Перейти к содержимому

Реферальная программа Мегаплана


Гугл сказал: "Используйте кэш браузера"

#11 Ixman

Ixman
  • Пользователь PRO
  • 2 159 сообщений
  • Репутация: 432
0

Отправлено 10 Октябрь 2016 - 20:06

@ShowPrint, тут по любому все стили переносить не нужно. Только важные, только те, которые сформируют макет страницы. Все рюшечки должны грузится потом. Это моё ИМХО. Но у самого ещё руки для экспериментов не дошли.
 

Оффтопик


  • 0

#12 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 700 сообщений
  • Репутация: 405

Отправлено 10 Октябрь 2016 - 20:19

@Ixman, так те, которые формируют макет и занимают основную часть стилей. Я когда запарился темой переноса "рюшечек" в конце - не один час провел над своим css "выцарапывая" из него что именно можно "залить по факту загрузки страницы".

 

У меня до этого руки дошли, я с энтузиазмом хватаюсь за осознанные полезные фишки. Беда в том, что эксперименты - "грязные", т.к. "энтузиазм" всегда мешает "плановым" работам. Сначала сделаю, а потом подумаю, что не мешало бы провести "контрольные замеры" на стадии "до", чтоб оценить эффективность проведенных работ в числовом выражении  :wacko: .

Понятно, что полезное дело сделал, но результаты экспериментов по хорошему должны подтверждаться цифрами, а они у меня получаются только в графе "после"  B)


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#13 Ixman

Ixman
  • Пользователь PRO
  • 2 159 сообщений
  • Репутация: 432

Отправлено 10 Октябрь 2016 - 20:27

@ShowPrint, ну если я дойду до этого, то обязательно зафиксирую до и после. А там поделюсь результатами 


  • 0

#14 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 700 сообщений
  • Репутация: 405

Отправлено 10 Октябрь 2016 - 20:31

@Ixman, обязательно дойдешь - верю в это и буду рад ознакомиться с результатами ;)


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#15 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 700 сообщений
  • Репутация: 405

Отправлено 10 Октябрь 2016 - 20:58

@Ixman, я же сразу кинулся экспериментировать  :D

 

 

 

остальное помещаем в файл css и подключаем его за закрывающим тегом body

У меня-то скрипты и стили линкуются непосредственно перед закрывающим тегом body. Провел эксперимент и перенес этот кусок "за".

Результат эксперимента: работать всё работает - валидатор стал ругаться на "бродячий" линк стилей (на скрипты не ругается).  :wacko:

Так чтоб был явный плюс по таймингу - вообще не заметил...

Внимание
Чтобы увидеть этот текст Вам необходимо авторизоваться


Сообщение отредактировал ShowPrint: 10 Октябрь 2016 - 20:58

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#16 Ixman

Ixman
  • Пользователь PRO
  • 2 159 сообщений
  • Репутация: 432

Отправлено 10 Октябрь 2016 - 21:33

@ShowPrint, здесь ведь не в тайминге дело, а в отрисовки страницы. Тут нужно понять как, что и в какой последовательности загружается. И вообще все эти танцы на практике только для того, чтобы Google был рад со своим PageSpeed, ну и не было проблем у того, кто на медленном интернет соединении. Сейчас отлучусь, и чуток позже распишу принцип всех этих последовательных загрузок дабы картина полностью сформировалась зачем всё это нужно.


  • 0

#17 Ixman

Ixman
  • Пользователь PRO
  • 2 159 сообщений
  • Репутация: 432

Отправлено 10 Октябрь 2016 - 22:47

Итак, немного теории по загрузке страницы. Примерный макет:

<html>
    <head>
       <link rel="stylesheet" type="text/css" href="/css/first.css" />
       <link rel="stylesheet" type="text/css" href="/css/second.css" />
       <script src="/js/jquery-1.12.4.min.js"></script>
       <script src="/js/first.js"></script>
       <script src="/js/second.js"></script>
       <script src="/js/third.js"></script>
    </head>
    <body>
        <some html code />
    </body>
</html>

Сразу скажу что это через чур упрощенный вариант шапки. На самом деле для трудностей нужно с десяток css файлов и с 10 js скриптов. Но даже на таком примере можно смодулировать ситуацию.

 

 

Итак, идёт загрузка страницы, доходит до css и js файлов и останавливается, пока эти файлы не загрузятся полностью дальнейшая загрузка html кода страницы будет блокирована. Значит пока не загрузятся css мы не увидим страницу, она изначально будет просто белой. Пока не загрузятся js файлы функционал, который они несут не будет работать.

 

И css и js загружаются асинхронно, то есть все и сразу. Но если файлов слишком много, лимиты мне точно не известны, да и ранее было, что у разных браузеров они были разными, то файлы загружаются асинхронно в пределах лимита.

 

Допустим лимит на одновременную загрузку css 10 файлов, а подключено их 25. Что будет? Мы ждем пока загрузится 10, потом ещё 10 и следующие 5. Тоже самое с js файлами. Но тут ещё есть один момент. Лимиты распространяются на загрузку js и css файлов с одного ресурса. Это как правило локальное хранилище сайта. Поэтому рекомендуют использовать различные cdn. Это актуально ещё и потому, что есть вероятность того, что скрипт загружаемый с cdn уже есть в кеше браузера пользователя. В таком случае он грузится не будет, а будет взят из кеша. Это как говорится, одним выстрелом двух зайцев.

 

Что страшного происходит в этот момент? Юзер ждёт, пока увидит полнофункциональную страницу. Время - деньги. Где-то на западе подсчитали процент отказов у торговых онлайн площадок именно из-за медленной загрузки, и он никого не заставил сомневаться в необходимости оптимизации этих процессов.

 

Что будет, если мы вынесем основной внешний вид страницы в шапку в тег style, а все остальные скрипты и файлы стилей за закрывающий тег body? А будет то, что страница загрузится до закрывающего тега body, и только потом будет блокирована для загрузки css и js файлов. То есть мы увидим контент страницы и уже начнём ориентироваться в нём. А пока мы осваиваем визуально, подгружается остальной, необходимый для полной работы, функционал страницы.

 

 

Ну как-то так.


  • 1

#18 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 700 сообщений
  • Репутация: 405

Отправлено 11 Октябрь 2016 - 01:00

@Ixman, спасибо за теорию - хоть и знакома, но всегда есть что-то новое для понимания.
 
Упрощенного примера достаточно для понимания, в этот раз наша дружеская беседа переехала в паблик  :)
 
Именно время отрисовки страницы я и обозвал таймингом. Я не сильно знаком с настройкой серверов, но у меня есть большие подозрения что лимиты по количеству одновременных загрузок по идее конфигурироваться должны именно там.
Собственно опять-таки не имея опыта, а имея голову с логическим мышлением, у меня есть теоретическое подозрение что, чем меньше происходит одновременных загрузок, тем быстрее загрузка*. По аналогии с "чем дальше в лес, тем толще партизаны". Допускаю, что с практической точки зрения это может быть ошибочною
* (сноска)

Спойлер

 
Well, возвращаясь к примеру. Как ускориться? Как вариант: перенести загрузку максимально возможного количество js в конец страницы - раз; уменьшить количество файлов стилей - два.
 
Относительно "раз" - чревато тем, что когда загрузятся js-рюшечки произойдёт сдвиг(и) уже загруженного контента. Вариантов (на мой взгляд) немного, возможность использования зависит от конкретных случаев: а) позаботиться об отсутствии сдвигов заранее, при загрузке основного контента, заранее подготовив и "забронировав" место для позже загружаемых "рюшей" и б) не бороться со сдвижками, а напрячься и сделать их условно "красивыми", чтоб их "до"-появление не вызывали негативных эмоций у посетителя.
 
Относительно "два" (стилей) - тоже всегда есть что работать: минимизировать количество файлов стилей - раз; их размер - два; оптимизировать сами стили - три.
 
Собственно практическую реализацию перечисленного я уже давно начал делать: оставил внутри <head> загрузку одного только файла стилей, минимизировав их количество (отправляя загрузку "рюшечек" в конец загрузки и убрав туда же абсолютно все линкованные js, большую часть которых вообще подгружая ajax-ом  (кстати которого перестал бояться "с твоей легкой руки")
 
Загружая таким образом, "до" основного контента, всего лишь один файл стилей, и искренне веря в том, что это способствует наискорейшей его загрузке, получается достаточно шустрое влетание и отображение контента для посетителя. Знаю что еще можно сделать в плане оптимизации самих css, но это в перспективных планах, пока и так вроде всё влетает достаточно оперативно.

Внимание
Чтобы увидеть этот текст Вам необходимо авторизоваться


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#19 miketomlin

miketomlin
  • Пользователь
  • 261 сообщений
  • Репутация: 35

Отправлено 12 Октябрь 2016 - 02:20

Ещё есть один момент, если у вас наряду с apache, либо вместо него используется nginx, то тут настройками в .htaccess не обойтись. Нужно править конфиги nginx
Достаточно изменить реальное местоположение файлов, продолжая их отдавать по прежним адресам (программно или при помощи рерайта).

 

Ajax-ом
И будете вы на каждой странице грузить, хотя при обычном способе браузер один раз загрузит и закэширует. При размещении вставок клиентских скриптов в конце страницы она обычно начинает нормально отображаться еще до окончания загрузки этих скриптов. Тут самое главное, чтобы код кардинально не менял вид по событию загрузки. Т.е. исходный вид нужно задать статически.
  • 2

#20 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 700 сообщений
  • Репутация: 405

Отправлено 12 Октябрь 2016 - 08:17

И будете вы на каждой странице грузить, хотя при обычном способе браузер один раз загрузит и закэширует
 Ну так голову на плечах нужно иметь ;)

Да, скрипты одинаковые для всех страниц - в отдельный script_for_all.js и в конец страницы. А индивидуальные для конкретной страницы скрипты - ajax-ом (personal_page.js), и скрипты аналитики, которые не кэшируются - туда же.

Ибо есть понятная логика: нефига инд.скрипту делать в общих, увеличивая размер загружаемого и кэшируемого файла.

Не очень понятная логика: зачем сра гадить в кэш пользователю скриптом пользуемым на одной странице, когда его можно догрузить только когда надо.

Совсем сомнительная логика - если пользователь повторно посещает страницу, то он туда приходит за контентом, а не плюшками/рюшками, которые можно подгружать пока пользователь юзает контент.

 

исходный вид нужно задать статически
Ну это не обсуждается (по умолчанию) ^_^  
  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru