Скорость сайта
Эта статья - в первую очередь для вебмастеров. Сегодня мы поговорим о том, как правильно настроить свой сайт чтобы он быстро загружался у пользователей. Начинающие вебмастера не обращают внимания на такой параметр как скорость сайта, а ведь это совершенно неправильно! Даже если у вас очень красивый сайт, но грузится он минуту, то найдется мало посетителей, готовых дождаться окончания загрузки. Да что там минуту, вот представьте простую ситуацию - вы вводите поисковый запрос, вам Google предложил десять сайтов. Вы щелкаете по первому - и ничего, страница пуста - секунда, две, пять... У вас хватит терпения? Скорей всего, вы возьмете и кликните по второй ссылке. Тем самым, как бы ваш сайт не был хорош и информативен, низкая скорость загрузки сайта - это потерянные посетители.
Более того, в 2010 году Google собирается начать учитывать скорость сайта при поисковом ранжировании. Тем самым, если у вас медленный сайт, то вы можете вообще перестать получать хороший приток посетителей из поисковых систем. А уж при размещении рекламы Google уже давно распределяет более выгодную рекламу на быстрых сайтах.
Чем этот пост может быть интересен для людей, не имеющих своего сайта? Думаю, тем, что можно познакомиться с проблемами, которые встречают вебмастера, а также понять, как при прочих равных получается, что сайты грузятся с совершенно разной скоростью
О каких проблемах мы поговорим сегодня? На повестке дня включение кэширования, архивирования и настройка apache (keep-alive, max-clients и подобное). А про уменьшение числа соединений путем технологий data:uri и image map мы поговорим в следующий раз.
Если заинтересовало, читаем дальше! Но для начала хочу продемонстрировать свой новый баннер, сделанный бесплатно компанией website4all:
Никто не хочет его у себя разместить?
Кэширование
Допустим, вы открываете сайт, и у него есть какая-то фоновая картинка, например, шапка сайта или блога. Потом вы отправляетесь изучать сайт дальше, и на всех страницах сайта также повторяется шапка. Резонный вопрос - а зачем нам эту шапку загружать каждый раз? - ведь она неизменна. Чтобы не скачивать лишние килобайты (или даже мегабайты), была разработана технология кэширования.
У каждого объекта на сайте можно указать, разрешается ли его кэшировать и как долго можно хранить его, не обновляя. Все современные браузеры поддерживают технологию кэширования, так что дело - исклютельно за вебмастером - нужно включать кэширование. Необходимо только решить, что кэшировать, а что - нет. Главную страницу сайта, тексты статей я бы не предлагал кэшировать - причина заключается в том, что в противном случае пользователи могут вообще перестать видеть изменения на вашем сайте. А для картинок, скриптов и таблиц css я бы кэширование включал. Так или иначе, окончательное решение - за вебмастером, а я просто приведу необходимый код.
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
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. Я указал, какие типы файлов сжимать, а какие-нет. Картинки сжимать бесполезно, будет только лишняя нагрузка на сервер, а реально объем не уменьшится. Кроме того, я указываю, что не нужно сжимать уже сжатые файлы, слишком маленькие файлы и слишком большие файлы.
Но это еще не все. Скрипты и стилевые файлы сжимать нужно, но зачем же их сжимать каждый раз? Лучше заготовить сжатые файлы на сервере заранее и отдавать их, если браузер поддерживает архивирование. Делается это так:
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.
Итак, получаем такой код:
MaxClients 20
MinSpareServers 5
MaxSpareServers 10
MaxRequestsPerChild 10000
Внимание: этот код нужно вставлять не в .htaccess, а в конфигурационный файл apache. И не забудьте подобрать свое значение MaxClients! Удачной оптимизации!
Проверить свои настройки вы можете, например, сервисом site-perf.com. Проверьте свой сайт, и вы получите диаграмму загрузки сайта. Если у вас получается много длинных желтых частей - то это плохо. Такое означает, что клиент получает запрос, соединяется, а вот данные ему никто некоторое время не дает.
На этом мы пока закончим, а позже я обещаю написать про оптимизацию загрузки изображений. Подписывайтесь на обновления!
Дата: 23 декабря 2009 г., категория: для вебмастеров.
Что-то непонятно или не получается?
Оставьте свои пожелания или вопрос в виде комментария к статье. Информация о новых комментариях сразу приходит ко мне на почту, и я постараюсь ответить на ваш вопрос как можно скорее!
Есть вопрос по схожей теме?
Попробуйте поискать по сайту (форма поиска находится наверху страницы). Кроме того, можно задать мне вопрос через форму обратной связи.
Нужна компьютерная помощь?
Напишите мне о своей проблеме через форму обратной связи, я постараюсь помочь. Если же проблему невозможно решить удаленно, вы можете обратиться к специалистам, чей баннер расположен наверху.
| ← Форматы изображений | Быстрый сайт → |
Комментарии
1# |
Спасибо! Статья очень в тему! То есть можно gzip и кеширование включить прямо в .хтаксесс файле??? |
2# |
Да. Первые два совета выполнимы всегда - достаточно использовать htaccess
|
3# |
Всё таки в Опере нельзя залогиниться. Точнее логин вроде как происходит, но толку нуль. А через ФФ всё ок работает. |
4# |
Есть один вопрос и одно пожелание.
|
5# |
Mr Visor - я там отписался. Не знаю, откуда информация о том, что они не работают одновременно. По мне - так работают, я потом разными сервисами блог проверял.
|
6# |
При авторизации нашел глюк - при выборе аватара на загруженной картинке можно выбрать область, но масштабировать ее нельзя.
|
7# |
жалко мне столько денег, тем более, не зная уровень посещаемости
|
8# |
Автор, спасибо за полезную информацию!
|
9# |
Елена, происходит это примерно так: клиент посылает серверу запрос "пришли заголовки этого файла", сервер присылает заголовки, содержащие информацию о том, что кэшировать можно, как надолго, и что является идентификатором файла (FileETag MTime Size означает, что запоминаются размер и время). Соответственно при повторном запросе перепроверяются заголовки, и если не прошло время, а идентификатор не изменился - сами данные с сервера не скачиваются. |
10# |
Читал, что при помощи модуля mod_gzip неумелый вэбмастер может довольно сильно нагрузить сервак. К огромному сожалению эту же самую информацию читал и мой хостинг-провайдер. В результате я оказался лишенным возможности использовать данный модуль. К счастью осталась возможность использовать библиотеку zlib. Довольно нормально работает, не хуже, чем mod_gzip. А так статья в целом понравилась, особенно раздел про кэширование. |
11# |
Хотел бы разместить у себя Ваш баннер. Пробовал оставить сообщение через форму обратной связи в Контактах, но ни в одном браузере не отображается картинка с проверочным кодом (F5 нипричем). Как мы можем с Вами связаться? |
12# |
Наблюдатель, ответил по почте. А контактную форму надо будет починить, спасибо! |
13# |
Статья просто супер, давно искал что-то подобное. У меня появился к вам вопрос по методу сжатия gzip. Если я вставляю ваш код, то у меня появляется ошибка 500. С чем это связано. Нашел на другом сайте другой код:
|
14# |
Мой код содержит больше настроек + включает статическое кэширование для css и js.
|
15# |
Sander, а как проверить работает он или нет. Где это можно посмотреть. И если он отключен, его можно включить самостоятельно или через тех.поддержку хостинга.
|
16# |
CoolSeoMan,
|
17# |
Сандер, спрашивал у сисадминов хостинга, функция мод_гзип на сервере включена. Но при попытке добавить код в хтакесс, он выдает ошибку 500 Добавлял выше указанный код: Header append Vary "Accept-Encoding"
|
18# |
хмм а если добавить вначале
|
19# |
CoolSeoMan, а если все-таки посмотреть в админке хостинга? mod_gzip может быть глобально включен, а у вас выключен. |
20# |
Забыл добавить, что нужно еще включить headers_module |
21# |
Действительно большое спасибо! Занимаюсь оптимизацией скорости загрузки сайта. Раньше все не мог зацепиться за кеширование для Apache - не хватало знаний. Файлы .htaccess раньше видел, но и понятия не было для чего они нужны. Теперь благодаря этой статье появились зацепки и мысли.
|
22# |
Отличная статья. Последнее время занимаюсь разгоном и много чего перечитал. Тут всё по пунктамЮ ясно изложено. Класс! Особенно понравилось про параллельные загрузки. Впервые встретил. Лично у меня "желтые столбы" длинные и ява-скрипты тормозят загрузку. Короче, есть куда стремиться... |
23# |
Напишите пожалуйста, как включить этот headers_module иначе Ваш код не работает. |
24# |
Alex, это зависит от вашего хостинга.
|
25# |
Спасибо за ответ.
|
26# |
Так. Модуль через .htaccess включить нельзя, можно только использовать, что мой код и делать.
|
27# |
У меня оказывается нет gzip
|
28# |
Ну это вообще не так просто и настраивается в каждом случае индивидуально. Дело в том, что zlib - это не модуль Apache, а модуль php. Соответственно нужно смотреть, вообще какие php скрипты вызываются и в них внедряться... |
29# |
Вот блин, обидно, просто выше тут писали, что воспользовались zlib вместо gzip вот я и думал, что это не так сложно.
|
Нужна компьютерная помощь?
Задайте свой вопроc
на нашем новом проекте!
![[*]](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAA7ElEQVRIie2XTQ6CMBCF3xgPQsLWQ7is8TrlECYeAe7hrhzDHdzkueBX1KSdImjCS7roYuZrp28KFQDECtoDALksW0SwW5Q40gb+UXCZQUSeRlbq4fRSldM0rfcyTF755WjVxnmCSVa5oXX9jLnp4Jbuc1g8+N1CmiSGIZsGwChz1febOlYPrgtcrt3kgDQJT6EosqMdmWs4d/9Sq8DO6h2tB4/bKnSrMeDByWEtNAXrzWXPOKqDFa5O0kMEbpCgKfUsybyhqh+B/kNxQlHHLSDEWqP7eWFX01nV/TwF/9EZz6QNvIG/JsFKj7YHwRrAR6l51asAAAAASUVORK5CYII= "Гость")
Нужна компьютерная помощь?
Задайте свой вопроc
на нашем новом проекте!
