Как ускорить сайт


Рубрика: Создание сайта -> Блог
Метки: | | |
Просмотров: 11575
Как ускорить сайт

 Скорость сайта — так ли она важна при нынешнем интернете, когда скорость интернета в 2–3–5 Mb уже обыденность? Да ещё как важна! Во-первых король интернета GOOGLE сильно учитывает скорость загрузки, во-вторых долго- загружающийся сайт раздражает (стоит пройтись по liveinternet.ru, который кишит гламурными дневниками женщин с рюшечками и анимациями) А уж если делается промо-сайт, то стоит держать в голове, что если не пол-страны, то ОЧЕНЬ большая часть пользуется модемами от мобильных операторов и скорость интернета у многих почти диалаповская.

Как измерить скорость сайта?

Для начала можно сходить сюда http://tools.pingdom.com/fpt/ Введите в строку адрес сайта и жмите TEST NOW. Вот и смотрите. Результат этого сайта вот http://tools.pingdom.com/fpt/#!/x1XCIj1iL/realister.ru

Мы видим количество баллов из максимальных 100, размер страницы и время её загрузки. Ну, а ниже всё расписано подробно: что, какого размера и сколько грузится.

 Ну, а главный инструмент для творца сайтов раширение Firebug. Есть оно для Chrome, есть оно для Mozilla Firefox. Вторая предпочтительней. Запускаем Firefox, идём по ссылке . Или просто заходим на сайт расширений Mozilla и вбиваем в поиск Firebug. Устанавливаем и перезапускаем лису. Но это ещё не всё. Дальше нужно установить дополнение на дополнение. Нам нужно расширение PageSpeed от Google. Идём сюда Справа внизу раздел Downloads, где выбираем Firefox и жмём. Когда установится, перезапускаем Лису и заходим на сайт, который нам нужно разогнать. Кликаем правой кнопкой и дальше левой по Inspect Element with Firebug. И уже в окошке консоли внизу щёлкаем по вкладке Pagespeed. Осталось нажать на единственную кнопку Analyze  и вот он результат: 

К сожалению, этот инструмент больше не доступен. Теперь GOOGLE предлагает воспользоваться своим online сервисом. Так что идите по ссылке, вбивайте адрес своего сайта и смотрите.

дополнение pagespeed 

И теперь по порядку.

Ускорение сайта происходит с помощью целого комплекса мер.

Сервисы сжатия изображений

Перво-наперво оптимизация картинок, т.е. сжатие до минимальных размеров. Здесь можно воспользоваться он-лайн сервисом, забив в поисковик что-то типа «сервис оптимизации изображений» Правда среди этих сервисов есть такие, которые безобразно калечат фото. Вот два очень неплохих:

http://kraken.io/

http://www.jpegmini.com/

И вот ещё один сервис сжатия картинок, самый ударный compressjpeg.com Жмёт картинки этот сайт просто чудовищно, жаль только в формате Jpeg

скорость сайтаИз настольных программ лучше чем Adobe Fireworks нет. Открываете в ней изображение, дальше файл→ мастер экспорта ну и далее по мастеру.

Заметьте, это касается ВСЕХ изображений: и тех, что вставляются в статьи, и картинок шаблона (ВСЕХ КАРТИНОК! шаблона, даже самых малых) В целом это даст большой эффект.

А дальше уже по пунктам из Pagespeed. Будем править файл .htaccess. Помните, что код надо вставлять частями-блоками, как здесь описано. Вставили блок, закинули на хост и посмотрели, работает ли. В случае чего и откатиться можно.

Включение сжатия страниц сайта

 Для начала нужно влючить сжатие. Вот такой код включает mod_deflate - альтернатива сжатия GZIP. Добавляем его в самое начало файла .htaccess

 

<ifmodule mod_deflate.c="">
<filesmatch .(js|css|.jpg|.gif|.png|.tiff|.ico)$="">
SetOutputFilter DEFLATE
</filesmatch>
</ifmodule>

 При проверке в гугловском сервисе, упомянутом выше, скорей всего Вам посоветуют "ИСПОЛЬЗУЙТЕ КЭШ БРАУЗЕРА"  Включить использование этого самого кэша на стороне пользователя происходит также в файле .httaccess Можно добавить в конец оного такой код:

  ExpiresActive On
ExpiresDefault “access 7 days”
ExpiresByType application/javascript “access plus 1 year”
ExpiresByType text/javascript “access plus 1 year”
ExpiresByType text/css “access plus 1 year”
ExpiresByType text/html “access plus 7 day”
ExpiresByType text/x-javascript “access 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/x-icon “access 1 year”
ExpiresByType application/x-shockwave-flash “access 1 year”
# Cache-Control
 
# 30 дней
 Header set Cache-Control “max-age=2592000, public”
 # 30 дней
 Header set Cache-Control “max-age=2592000, public”
 # 2 дня
 Header set Cache-Control “max-age=172800, public, must-revalidate”
 # 1 день
 Header set Cache-Control “max-age=172800, private, must-revalidate”

НО, жирное большое НО. Может и не заработать конкретно на Вашем сайте и конкретно на на Вашем хостинге. Ищите и гуглите нужный код под себя.

Ускорение сайта с помощью модуля gzip

Включаем сжатие с помощью модуля GZIP. Добавляем в наш .httaccess такой код:

#Сжимаем компоненты сайта путем включения Gzip
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html

Это как вариант. Поищите и другие, если не сработает этот. А проверить, работате ли gzip-сжатие можно в этом сервисе http://www.whatsmyip.org/http-compression-test/  или здесь http://checkgzipcompression.com/

 Асинхронная загрузка JS скриптов.

В секции HEAD Вашего сайта, неважно на чём он сделан, наверняка есть подгрузка скриптов, что-то типа такого:

< script type = "text/javascript" src = "/js/script.js"   ></ script >

Асинхронная загрузка JS  позволяет браузеру не дожидаться ее загрузки и продолжать загрузку основного HTML кода страницы. Для этого нужно добавить свойство async = "async". Выглядеть будет выглядеть так:

<script type="text/javascript" src="/js/script.js" async="async" ></script> или так: <script async src="http://www.site.ru/script.js" type="text/javascript"></script>

А можно все эти строки, где прописывается подгрузка скриптов, поместить вообще в конец шаблона. И есть ещё несколько способов: это добавление свойства defer

 

<script defer src="http://www.site.ru/script.js" type="text/javascript"></script>

Спросите какой способ лучше? А не знаю grin... На Opencart использую первый, пробуйте сами и смотрите.

И ещё способ: подгрузить на сайт специальный гугловский скрипт. В секцию HEAD дописываем

<script src="http://extsrcjs.googlecode.com/svn/trunk/extsrc.js"></script>

А все <script src="...">   заменяем на <script extsrc="..."> Вот, собственно, и всё по асинхронной загрузке.

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

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

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

Вы можете войти под своим логином или зарегистрироваться на сайте.

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