Разгоняем свой сайт

Рассмотрим несколько простых и парочку более сложных способов ускорения работы сайта и существенно сократим трафик между клиентом и сервером

Что для этого нужно:

1. Оптимизируем JS. Для этого есть сервисы: 1 - 2 - 3

2. Оптимизируем CSS. И для этого есть сервис - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10

После оптимизации JS и CSS мы ускорили наш сайт на 10-20%.

3. Включаем gzip.

Теперь самое простое и самое гениальное решение - серверным способом, а именно в htaccess запускаем следующее:сайт источник http://yapro.ru Sat Feb 13 2010 13:36:52 GMT+0300

<IfModule mod_gzip.c>
mod_gzip_on       Yes
mod_gzip_dechunk  Yes
mod_gzip_item_include file      \.(html?|xml|css|js|php|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.*
</IfModule>

*xml - выделил т.к. у меня используется для хранения данных.

4. Если есть возможность и умение, выполните RAID-ускорение

5. Так же советую почитать рекомендации по ускорению и выполнить анализ сайта с помощью сервиса webo.in

Итог: после этих «танцев с бубном» скорость загрузки сайта должна увеличиться на 30-50%.

Для тех, кто желает понять и разобраться подробнее, продолжим с нескольких полезных советов сайта AskApache.com

Сжатие файлов стилей (.css) и JavaScript файлов (.js)

Если на вашем сервере установлен Apache 2, то просто добавьте следующие директивы в ваш файл .htaccess, а лучше в httpd.conf:

<FilesMatch "\.(js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>

Директива SetOutputFilter DEFLATE добавляет модуль mod_deflate, который сжимает файлы, к выходным фильтрам, а блок FilesMatch ограничивает действие этого фильтра только файлами js и css. Все просто и легко. Теперь смотрим на результат. Для этого пользователям FireFox рекомендую воспользоваться связкой FireBug + YSlow.

Разгоняем свой сайт

Результат говорит сам за себя. Также, как вариант, можно вручную сжать нужные файлы и хранить на сервере уже в сжатом виде. Это снизит нагрузку на сервер, но в случае внесения изменений, придется вновь пережимать файлы. Теперь про поддержку сжатых файлов браузерами. Для этого обратимся на сайт http-compression.com. Ситуация такова:

  • Microsoft Internet Explorer. Поддерживает сжатие с версии 4.0.
  • Mozilla Firefox. Сжатие поддерживается всеми версиями. (Еще один повод пользоваться огненой лисой).
  • Netscape Navigator. Поддержка сжатия началась с версии 4.06, но с серьезными ошибками, которые были устранены с версии 6.02.
  • Opera. Полная поддержка сжатия включена, начиная с версии 5.12.

Использование HTTP заголовка Expires

Графика, флеш, js-файлы, файлы стилей и пр. довольно редко обновляются на сайте, поэтому пользователю, который к вам попал не в первый раз, незачем вновь скачивать эти файлы, раз они не изменились. Чтобы "научить" браузер пользователя не скачивать эти файлы, а брать их из кеша, существует HTTP заголовок Expires. Он устанавливает время, до которого браузер может использовать файл из собственного кеша. Уточнение: Данные заголовки, помимо браузера, используют также прокси-сервера, кеширующие сервера и т.п. В файле httpd.conf или .htaccess пишем следующее:

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>

Опять же, перечисляем расширения файлов, на которые должно распространяться действие директивы. И указываем время Thu, 15 Apr 2010 20:00:00 GMT. Т.е. около 3 лет, но можно и больше

Заголовки Cache-Control

С помощью заголовка Cache-Control можно указать, как долго прокси-сервера могут хранить файлы в кеше. Добавление в заголовок must-revalidate заставляет проверять также значение ETag для обнаружения изменений.

# 480 недель

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=290304000, public"
</FilesMatch>

# 2 дня

<FilesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</FilesMatch>

# 2 часа

<FilesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=7200, must-revalidate"
</FilesMatch>

Либо вместе с заголовком Expires

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "public"
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>

Отключение заголовка ETag

Механизм ETag (Entity Tag) предназначен для обнаружения новых версий запрошенных файлов. Когда сервер отсылает клиенту файл, он добавляет заголовок ETag, в который записывает хеш отправляемого файла. Клиент же, при повторном запросе, добавляет заголовок If-None-Match, значение которого равно хешу файла в кеше. Если значение совпадают, то сервер возвращает ответ HTTP/1.1 304 Not Modified, а если не совпадают, тогда возвращает новую версию файла. Таким образом, удаление заголовка ETag в ответах сервера отключает этот механизм. Что заставляет кеш клиента использовать только значения Expires и Cache-Control (если вы не используете Expires и Cache-Control не удаляйте ETag!). Выигрыш такого подхода в том, что между клиентом и сервером отпадает надобность обмениваться запросами проверки новых версий (If-None-Match и 304 Not Modified).

Отключение заголовка делается следующим образом:сайт источник http://yapro.ru Sat Feb 13 2010 13:36:37 GMT+0300

Header unset ETag
FileETag None

А вот пример обмена запросами между клиентом и сервером с использованием ETag.

Ответ сервера на первый запрос файла /i/yahoo.gif:

HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 50064

Повторный запрос файла /i/yahoo.gif и ответ сервера:

GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f" HTTP/1.1 304 Not Modified

Удаление заголовка Last-Modified

Удаление заголовка Last-Modified вместе с заголовком ETag позволит полностью избежать использования запросов проверки новых версий файлов If-Modified-Since и If-None-Match. Таким образом файлы будут кешироваться только на основании значений Cache-Control и Expires. Примечание: Не удаляйте Last-Modified и ETag для .html файлов. Делается это следующим образом:

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css)$">
Header unset Last-Modified
</FilesMatch>

Вот и все.

Личеры идут лесом

Для тех кого достали левые юзеры и личеры, добавьте правило в файл .htaccess

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yapro.ru [NC]
RewriteRule \.(jpg|jpeg|png|gif|ico|css|js)$ - [NC,F,L]

Как говорится, ничего личного господа :)

Кэширование

Для тех, кому перечисленного выше окажется мало, может почитать про кэширование бинарного кода динамических страница в PHP.

В поле зрения попали APC, eAccelerator, Memcached, XCache.сайт источник http://yapro.ru Sat Feb 13 2010 13:36:29 GMT+0300

  1. PHP – рецепты и настройка под большие нагрузки
  2. Тесты производительности различных cache storage, в тест попали APC, XCache, Memcached
  3. Установка APC под Windows
  4. Установка eAccelerator под Linux и Windows
  5. Ускоряем PHP. eAccelerator и другие акселераторы
  6. Использование memcached в высоконагруженных проектах

Помните: продуманное и правильное использование сжатия и кеширования позволит существенно сократить трафик между клиентом и сервером. Успехов.

Источники: apachedev.ru, proft.com.ua и wearymax.ru

Оцени публикацию:
  • 9,44
Оценили человек: 9

Похожие статьи:


Комментарии посетителей:
  • У меня браузер (ФФ4) всё равно запрашивает картинки и избавится от запроса 304 не получается. Вставьте, пожалуйста, полный пример .htaccess'а
    20 мая 2011, 21:03 коммент полезен : -1 # Андрей
    • 304 означает Not Modified (Не изменялось) т.е. файл подгружается с жесткого диска юзера, а не с сервера. Поздравляю, у Вас все получилось.
      21 мая 2011, 11:22 коммент полезен : 0 # Admin
  • а вообще избежать запроса 304 возможно? Например для мелких файлов, 304 от 200 не сильно отличается, больше времени на соединение уходит. Вот зачем браузеру вообще делать запрос, если файл у него есть и "срок годности" у файла 10 лет? Или я фантазирую?
    21 мая 2011, 19:05 коммент полезен : -1 # Андрей
  • а если Вы замените файл на сервере, что в этом случае будет показывать браузер - старый файл! это ведь будет неправильно, согласны? поэтому и сделали 304 - документ не изменился с указанного момента.
    21 мая 2011, 19:43 коммент полезен : 0 # Admin
    • имя файла изменить можно. Так cms для css и js для уверенности делают. Ну если нельзя, то нельзя. Спасибо за прояснение ситуации. Очень понравилась статья. Кратко и то что надо.
      21 мая 2011, 20:17 коммент полезен : -2 # Андрей
  • > а если Вы замените файл на сервере, что в этом случае будет показывать браузер - старый файл! это ведь будет неправильно, согласны? ----
    Не дописал, shift+Enter отправил статью, хотел перенос. Если файл может изменяться, то надо надо дописывать заголовки типа must-revalidate (заставлять проверять дату последней модификации). Или не кешировать надолго. Всё таки много запросов маленьких файлов оч тормозят сайт
    21 мая 2011, 20:21 коммент полезен : -1 # Андрей
  • если у Вас много маленьких файлов, которые не будут долго изменяться, то делайте CSS-спрайты, это такие сборники изображений в одном файле. Но если честно, то даже большое кол-во изображений не может сильно притормаживать загрузку сайта, ведь они статичные.
    22 мая 2011, 02:58 коммент полезен : 0 # Admin
  • Про личеров для nginx, гуглите nginx hotlink, например:
    http://nginxlibrary.com/hotlink-protection/
    http://nginx.org/ru/docs/http/ngx_http_referer_module.html
    а если с подменой изображений, то:
    http://ru.wikipedia.org/wiki/%D0%A5%D0%BE%D1%82%D0%BB%D0%B8%D0%BD%D0%BA
    20 февраля 2013, 15:04 коммент полезен : 0 # Подмогатель :) (гость)
  • Большое спасибо! Узнал много нового, ваша статья стала дополнению к моим знаниям.
    08 ноября 2013, 16:58 коммент полезен : 0 # Иван (гость)
  • Про заголовок Last-Modified советую почитать тут http://kvinta-a.ru/last-modified/
    16 июля 2014, 09:32 коммент полезен : 0 # Мария4
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2018 YaPro.Ru

Главная » Веб-мастеру » Apache »