Блог фрилансера - сайты под ключ

Оптимизация скорости

Просмотров: 4963Комментарии: 1
Полезное

скоростьНа паре своих сайтов стал замечать что иногда страница очень долго прорисовывается браузером. Код страницы вроде уже загрузился. А кроме шапки ничего нет. Порой нужно было ждать до 30 секунд. Проблему нашёл быстро – код баннера в шапке на джава скрипте. Как раз в это время, когда была такая проблема, тот сайт, с которого крутились баннеры с оплатой за клики и показы, тоже был недоступен. Если бы баннер был в обычном html формате, проблемы бы небыло. Просто была бы ошибка при загрузке графики со стороннего сайта и всё. А вот с джава скриптом всё сложнее. Браузер ждёт пока скрипт выполниться, поэтому, загрузив код страницы он не прорисовывает её дальше того места где есть джава скрипт.

Удалять код баннерной сети не вариант, нужно было найти каким способом дать браузеру сначала отрисовать всю страницу. А потом уже загружать баннер через джава скрипт. Поиском очень быстро нашёл готовый рецепт, называется асинхронная загрузка JavaScript. В том месте, где у меня стоит код, вставил пустой блок div, а в самом конце кода страницы, перед закрывающим тегом вставил такой код

‹div id="script_ad" class="script_ad" style="display:none;"›здесь вставляем код‹/div›
 ‹script type="text/javascript"›
   document.getElementById(‘script_block‘).appendChild(document.getElementById(‘script_ad‘));
   document.getElementById(‘script_ad‘).style.display = ‘block‘;
 ‹/script›

После этого даже при недоступности сайта с которого загружались баннеры через джава скрипт, страница отрисовывалась браузером практически мгновенно. Просто баннер не появлялся на своём месте. Подождал, пока сайт станет доступен, и баннер, как ни в чём не бывало, появился на своём прежнем месте. Ну а раз уж я начал ковырять файлы движка сайта, решил дополнительно оптимизировать не только скорость отрисовки страниц браузером, но и скорость загрузки сайта. Применил способ, который всё что только можно, кэширует на стороне посетителя. Для этого в файле .htaccess добавил следующий код

‹FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf)$"›
 Header set Cache-Control "max-age=2592000"
‹/FilesMatch›

Этот код кэширует файлы с расширениями, которые прописаны в строчке во временной папке у посетителя на 100 часов. Можно поставить и больше, но 5 суток наверно достаточно. Ну и напоследок добавил сжатие всех файлов перед передачей их в браузер посетителя по сети следующим кодом

mod_gzip_on Yes
 mod_gzip_dechunk Yes
 mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
 mod_gzip_item_include handler ^cgi-script$
 mod_gzip_item_include mime ^text\.*
 mod_gzip_item_include mime ^application/x-javascript.*
 mod_gzip_item_exclude mime ^image\.*
 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

Проверка скорости загрузки показала отличный результат, если ранее у меня страница загружалась в среднем за 1.25 секунды, то после оптимизации скорости загрузки, среднее время не более 0.95 сек. Выигрыш в пол секунды – это очень круто! Хотя ещё есть куда стремиться. Вместе с кодом баннера на джаве можно таким же способом убрать в самый конец кода все джава скрипты загружаемые шаблоном дизайна оформления, уменьшить размер css файлов и скорость их вызова, немного оптимизировать графику в шаблоне. Таким образом, можно ещё процентов на 15-20 уменьшить скорость загрузки. Для сайтов с большой посещаемостью довольно актуально. Да и Google очень любит, когда посетитель не ждёт загрузки страниц. Сайты с оптимизированной скоростью загрузки для Google более релевантны.

Все коды которые я здесь привёл в качестве примера, нашёл в интернете в свободном доступе. Так что если что то нужно сделать, а не знаете как, поиск Вам в помощь. Например как пользоваться твиттером с пользой я тоже понял не сразу, первое время вообще считал что это просто новомодная игрушка вроде гигантского чата. Это я сейчас понимаю весь потенциал Twitter для продвижения, поэтому не забываю все свои посты закидывать туда. Кстати, и Вы можете этому посодействовать если твитните этот пост.

Комментариев: 1 RSS

1 plutov 08-11-2013 15:22

Спасибо. Можете почитать в моем блоге статью на похожую тему асинхронного JS: plutov.by/post/javascript_memory

Оставьте комментарий!

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question


Комментарий будет опубликован после проверки

     

  

(обязательно)