середа, 26 вересня 2012 р.

Скорость загрузки сайта

Необычайно важна! Есть примеры когда сайт работал долго в течении недели и начал активно терять позиции по своим ключевикам.
Предполагаем, что более быстрый сайт, имеет больше шансов получить первые (а именно топ 1..5) позиции, которые приносят трафик.
Быстрый гугл тематики подтверждает предположение, так же как его подтверждает здравый смысл и логика гугл: чем быстрее этот сайт загрузится тем быстрее пользователь найдет что ему надо и останется довольным гуглом. 
А что нужно делать сайтостроителям чтобы быть довольными гуглом? Оставим широкий вопрос в стороне, коснёмся лишь малой его части: Скорость Загрузки Сайта.

1. Быстрее загрузится то, чего меньше. Отдавайте клиенту только то, что он хочет прочесть. Ни байтом больше! Не очень практичный совет, но с ним не поспоришь :)

Можно и нужно зиповать html, js, css иногда даже картинки
IIS:
в web.config секция (http://msdn.microsoft.com/en-us/library/ms690689%28v=vs.90%29.aspx)
Apache:
mod_deflate должен быть загружен

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/css text/xml application/xml application/xhtml+xml application/rss+xml
</IfModule>


Чем меньше HTTP запросов будет сделано на сервер, тем быстрее страница покажется. Весь css желательно выносить из inline в css файл и все css файлы нужно слить в один большой (он один раз будет выкачан и осядет в кеше); аналогично со скриптами.

2. Хранить все кроме текста (css, js, etc) на CDN. Это дешевле чем вы думаете! maxcdn - средне низкой руки провайдер продает 1TB трафа аж за $40. Благодаря распределенной структуре, а так же из-за более быстрых каналов время до полной загрузки страницы уменьшается.
Но как говорил Lt. Gaeta из BSG: "What's the catch? There is always a catch, right?". 
Да, помимо $40 баксов за тер есть еще время которое требуется браузеру на DNS резолв имени вашего cdn: Например, вы храните css файлы по пути: css.<your-domain>, а картинки по пути: img.<your-domain> и когда в данном случае мы будем иметь два _лишних_ днс запроса и браузер (о ужас) не начнет рендерить полученный html ПОКА не примет css файл. Клиент будет видеть чистый лист. Гугл будет видеть текст, правда.
Общий совет: не используйте CDN для css/img пока к вам ходит меньше 10к уников в день.

3. Кеширование. В известном мультике длину удава меряли попугаями (КЕШами). Даже если у вас 70% это новые посетители, то пренебрегать оставшимися 30 не стоит ибо зачем отбирать канал у новых?

IIS:
В сайт мэнеджере на папке с картинками/скриптами/css амиcache-control: public, max-age=7200
pragma: public, max-age=7200

Apache:
mod_expires должен быть загружен
<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresByType image/gif "access plus 1 years"
    ExpiresByType image/jpeg "access plus 1 years"
    ExpiresByType image/png "access plus 1 years" 
    ExpiresByType text/css "access plus 1 years"
    ExpiresByType text/js "access plus 1 years"
    ExpiresByType text/javascript "access plus 1 years"
    ExpiresByType application/javascript "access plus 1 years"
    ExpiresByType application/x-javascript "access plus 1 years" 
    ExpiresDefault "access plus 1 days"
</IfModule>
Еще есть NGinx: работает на другом уровне, но тоже можно попробовать.
Если вы самостоятельно создаете и генерите картинки на сервере, обязательно используйте ETag хидер. Он позволит клиенту не загружать одно и тоже множество раз.

4. Переместить тег загрузки css в самый верх тега <HEAD />. А подгрузку скрипта самым последним в теге head
Таким образом браузер начнет раньше загрузку css Файла и сможет раньше начать рендерить и показывать страницу.

5. AJAX, web2.0 и т.д.: по возможности используйте метод GET. Как правило, при небольших данных такой запрос влезет в один TCP пакет. POST при тех же объемах данных обязательно будет использовать 2 пакета. В первом хидеры, во втором дата.



Используйте Google PageSpeed Insights https://developers.google.com/speed/pagespeed/insights

Кто совсем ленивый, то вот свежий бета сервис, стучитесь за инвайтами! https://docs.google.com/spreadsheet/viewform?formkey=dGdIWjljWkFuRDNLbFlqa2FsUHNIOHc6MA#gid=0
https://developers.google.com/speed/pagespeed/service

Немає коментарів: