Ваше местоположение в сети:
Рубрика:

Скорость сайта

Разделы сайта:

Эта статья - в первую очередь для вебмастеров. Сегодня мы поговорим о том, как правильно настроить свой сайт чтобы он быстро загружался у пользователей. Начинающие вебмастера не обращают внимания на такой параметр как скорость сайта, а ведь это совершенно неправильно! Даже если у вас очень красивый сайт, но грузится он минуту, то найдется мало посетителей, готовых дождаться окончания загрузки. Да что там минуту, вот представьте простую ситуацию - вы вводите поисковый запрос, вам Google предложил десять сайтов. Вы щелкаете по первому - и ничего, страница пуста - секунда, две, пять... У вас хватит терпения? Скорей всего, вы возьмете и кликните по второй ссылке. Тем самым, как бы ваш сайт не был хорош и информативен, низкая скорость загрузки сайта - это потерянные посетители.

Более того, в 2010 году Google собирается начать учитывать скорость сайта при поисковом ранжировании. Тем самым, если у вас медленный сайт, то вы можете вообще перестать получать хороший приток посетителей из поисковых систем. А уж при размещении рекламы Google уже давно распределяет более выгодную рекламу на быстрых сайтах.

Чем этот пост может быть интересен для людей, не имеющих своего сайта? Думаю, тем, что можно познакомиться с проблемами, которые встречают вебмастера, а также понять, как при прочих равных получается, что сайты грузятся с совершенно разной скоростью

О каких проблемах мы поговорим сегодня? На повестке дня включение кэширования, архивирования и настройка apache (keep-alive, max-clients и подобное). А про уменьшение числа соединений путем технологий data:uri и image map мы поговорим в следующий раз.

Кэширование сайта

Допустим, вы открываете сайт, и у него есть какая-то фоновая картинка, например, шапка сайта или блога. Потом вы отправляетесь изучать сайт дальше, и на всех страницах сайта также повторяется шапка. Резонный вопрос - а зачем нам эту шапку загружать каждый раз? - ведь она неизменна. Чтобы не скачивать лишние килобайты (или даже мегабайты), была разработана технология кэширования.

У каждого объекта на сайте можно указать, разрешается ли его кэшировать и как долго можно хранить его, не обновляя. Все современные браузеры поддерживают технологию кэширования, так что дело - исклютельно за вебмастером - нужно включать кэширование сайта. Необходимо только решить, что кэшировать, а что - нет. Главную страницу сайта, тексты статей я бы не предлагал кэшировать - причина заключается в том, что в противном случае пользователи могут вообще перестать видеть изменения на вашем сайте. А для картинок, скриптов и таблиц css я бы кэширование включал. Так или иначе, окончательное решение - за вебмастером, а я просто приведу необходимый код, позволяющий увеличить скорость заргузки сайта.

Header append Cache-Control "public"
FileETag MTime Size
ExpiresActive On
ExpiresDefault "access plus 0 minutes"
ExpiresByType image/ico "access plus 1 years"
ExpiresByType text/css "access plus 1 years"
ExpiresByType text/javascript "access plus 1 years"
ExpiresByType image/gif "access plus 1 years"
ExpiresByType image/jpg "access plus 1 years"
ExpiresByType image/jpeg "access plus 1 years"
ExpiresByType image/bmp "access plus 1 years"
ExpiresByType image/png "access plus 1 years"

Да, чуть не забыл. Я молчаливо предполагаю, что вы используете самый популярный веб-сервер apache. Вставлять код нужно в файл .htaccess в корневой директории сайта, нужно также убедиться, что у сервера включен модуль mod_expires.

Типы вы можете уже выбирать самостоятельно и настраивать, что кэшировать, а что - нет. access plus 0 minutes означает, что файл кэшироваться не будет.

Архивирование страниц

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

А пользователь, в общем-то, и не знает, что скачивает сжатые файлы. Все это спрятано от глаз и происходит за кадром. Итак, включаем gzip

Header append Vary "Accept-Encoding"
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_exclude file \.(jpg|png|gif)$
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.*
mod_gzip_maximum_file_size 100000
mod_gzip_minimum_file_size 300
mod_gzip_maximum_inmem_size 100000

Опять-таки, нужно убедиться, что включен соответствующий модуль apache - mod_gzip. Я указал, какие типы файлов сжимать, а какие-нет. Картинки сжимать бесполезно, будет только лишняя нагрузка на сервер, а реально объем не уменьшится. Кроме того, я указываю, что не нужно сжимать уже сжатые файлы, слишком маленькие файлы и слишком большие файлы.

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

<FilesMatch "\.js.gz$">
ForceType text/javascript
Header set Content-Encoding: gzip
</FilesMatch>
<FilesMatch "\.css.gz$">
ForceType text/css
Header set Content-Encoding: gzip
</FilesMatch>
<FilesMatch "\.js$">
ForceType text/javascript
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} !".*Safari.*"
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.*)\.js$ $1\.js.gz [L]
ForceType text/javascript
</FilesMatch>
<FilesMatch "\.css$">
ForceType text/css
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} !".*Safari.*"
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.*)\.css$ $1\.css.gz [L]
ForceType text/css
</FilesMatch>

Теперь необходимо еще убедиться и в том, что на сервере включен mod_rewrite. Поясню происходящее. Во-первых, мы говорим, что файлы типа js.gz и css.gz уже сжаты (чтобы избежать повторного сжатия). Во-вторых, обычные js и css мы будем подменять сжатыми, если браузер поддерживает сжатие. При этом упоминается одна версия safari, которой все равно будут передаваться несжатые файлы - этот бразер утверждает, что сжатые файлы понимает, но на самом деле работает с ними неправильно.

Тонкая настройка Apache

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

Сервер Apache запускает несколько своих копий (дочерних процессов). Каждая копия готова обрабатывать входящие соединения. Тем самым, работа сервера очень сильно зависит от того, сколько у вас дочерних процессов и сколько запросов внутри одного соединения готов обработать дочерний процесс. За первое отвечают такие параметры как MinSpareServers, MaxSpareServers и MaxClients. MaxClients - этот лимит на число дочерних процессов. Как его расчитать? Нужно знать, сколько у вас оперативной памяти на хостинге (посмотрите в параметрах), сколько памяти забирает один процесс (если вы можете соединиться с сервером по ssh, то наберите команду top и посмотрите в колонке RES; типичное значение: 10-15 мегабайт), разделить первое на второе и вычесть 1 или 2 (1 для основного процесса и плюс запас). MinSpareServers и MaxSpareServers отвечают за то, сколько дочерних процессов может бездействовать. Дело в том, что если свободных процессов нет, а вдруг у сервера что-то запросили, то задержка может быть вызвана запуском процесса. Я использую для них значения 5 и 10 соответственно.

Теперь про запросы, выполняемые в рамках одного соединения с одним дочерним процессом. Для увеличения скорости загрузки сайта полезно сделать так чтобы один процесс мог обрабатывать несколько запросов подряд. Для настройки используются параметры KeepAlive и KeepAliveTimeout. Первый нужно ставить "on" чтобы вообще включить KeepAlive, второй же означает количество секунд, которые сервер будет ждать новых запросов, не разрывая соединения. Думаю, секунд 10-15 будет в самый раз. Только имейте в виду, что если процесс находится в состоянии KeepAlive, то он не может принимать новые соединения. Так что при включенном KeepAlive ваш сервер не сможет одновременно обработать больше клиентов, чем количество дочерних процессов (MaxClients).

Ну и еще одна опция - MaxRequestsPerChild. Она отвечает за то, через какое количество соединений сервер принудительно перезапустит дочерний процесс. Если у вас все работает нормально, нет утечки памяти, тогда можно это число устанавливать достаточно большим, например, 10000. Но последите за статистикой сервера. Если потребление памяти со временем растет, значит в ваших скриптах есть утечка памяти, и если вы не можете оперативно ее исправить, просто понижайте MaxRequestPerChild.

Итак, получаем такой код:

KeepAlive "on"
MaxClients 20
MinSpareServers 5
MaxSpareServers 10
MaxRequestsPerChild 10000

Внимание: этот код тнужно вставлять не в .htaccess, а в конфигурационный файл apache. Вот такая вот тонкая настройка сервера Apache получается. И не забудьте подобрать свое значение MaxClients! Удачной оптимизации! Ну и не забывайте, что помимо оптимизации вам нужен хороший хостинг.

Проверить свои настройки вы можете, например, сервисом site-perf.com. Проверьте свой сайт, и вы получите диаграмму загрузки сайта. Если у вас получается много длинных желтых частей - то это плохо. Такое означает, что клиент получает запрос, соединяется, а вот данные ему никто некоторое время не дает.

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

← Форматы изображенийБыстрый сайт →
comments powered by Disqus