Правила для высокопроизводительных сайтов

[WWW.ZEOS.IN 1 161]

Правила для высокопроизводительных сайтов от Yahoo

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

В 2004 году, главой отдела анализа эффективности Yahoo был назначен Стив Содерс. Проанализировав загрузку первой страницы портала Yahoo, он выяснил, что только 5% времени тратится на загрузку HTML (а ведь это главное содержание страницы). Все остальное время расходовалось на загрузку картинок, скриптов, счетчиков, таблиц стилей и многого другого.

Все это привело к тому, что в компании Yahoo были разработаны правила для высокопроизводительных вебсайтов.

1. Уменьшайте количество HTTP запросов к серверу

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

Еще один плюс данного метода в том, что нагрузка на сервер также уменьшается.

Как же Yahoo предлагает уменьшать количество компонентов на странице?

Один из путей, это упрощать дизайн страницы. Но что же, совсем не создавать сложные и красивые сайты? Можно ли для них уменьшить количество запросов к серверу?

Yahoo рекомендует следующие способы:

1. 
   1. Используйте Image Maps. С помощью этого способа можно комбинировать несколько изображений в одно. Общий размер меньше не станет, но количество запросов к серверу уменьшится.
   2. Используйте CSS спрайты. Поместите все изображения вашего сайта в один большой файл, а затем используйте CSS свойства background-image и background-position, для задания того участка, который должен быть отображен.
   3. Объединяйте несколько файлов в один. Например, помещайте все javascript скрипты в один файл. То же самое относится к файлам стилей. Иногда это бывает достаточно трудно сделать, но оно того стоит.
   

2. Используйте Сеть доставки Контента (Content Delivery Network).

Смысл CDN в том, что бы иметь несколько географически распределенных серверов, которые используются, для выдачи содержимого вашего сайта.

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

На рынке есть множество компаний, предлагающих услуги CDN. Yahoo рекомендует Akamai Technologies, Mirror Image Internet, или Limelight Networks.

3. Добавьте http заголовок Expires

Веб сайты становятся все больше и больше. Больше скриптов, больше стилей, мультимедийный контент и т.п. Зайдя на ваш сайт первый раз, посетителю придется загрузить весь контент сайта. Добавление заголовка Expires, заставит браузер сохранить уже загруженные элементы в кэше. Это позволит избежать повторной загрузки этих элементов при повторном заходе на сайт.

Чаще всего данный заголовок используют для картинок, но он также может подойти для javascript скриптов, файлов стилей и флеш информации (то есть той, которая не часто меняется).

Для установки данного заголовка в веб сервере Apache можно воспользоваться следующей директивой:

ExpiresDefault "access plus 10 years"

В данном случае, директива указывает, что необходимо перечитать содержимое сайта через 10 лет от даты первой загрузки. Будьте осторожны при установке даты слишком далеко в будущее. Если вы все же измените файл потом, то вам также придется поменять и его имя, что бы у ваших пользователей он обновился до истечения срока указанного в заголовке Expires. 4. Включите gzip сжатие для компонентов вашего сайта Все современные браузеры поддерживают передачу содержимого веб сайта в сжатом виде. Это может существенно сэкономить количество передаваемого трафика. Однако у сжатия есть один отрицательный момент. Данное действие, усиливает нагрузку на веб сервер, так как ему необходимо сжимать страницу, каждый раз, когда она послается ее клиенту. В Apache 1.3 поддержкой сжатия <занимается> модуль mod_gzip, а в Apache 2.x модуль mod_deflate. 5. Размещайте файлы стилей в начале документа. Исследования Yahoo показали, что размещение файлов стилей в заголовке страницы (в <HEAD> секции) уменьшает общее время загрузки сайта, так как позволяет браузеру отображать документ постепенно по мере загрузки. Кроме того, в спецификации HTML прямо указано, что все стили должны подключатся в <head> секции. Однако, почти все браузеры позволяют включать стили в любом месте текста документа, поэтому многие веб-дизайнеры (или системы управления сайтом) пользуется этим. 6. Размещайте все скрипты внизу страницы. Скрипты не так важны для отображения сайта, как таблицы стилей. Поэтому, их рекомендуют размещать в конце документа, что позволит загрузить сайт целиком и, лишь затем, приступить к загрузке скриптов. 7. Не используйте выражения внутри CSS файлов. CSS выражения - это мощный (и опасный) инструмент, позволяющий изменять CSS свойства динамически. Вот как можно задать разное значение цвета заднего фона в зависимости от четности или не четности текущего часа:

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

В данном случае вычисляется javascript выражение, которое и используется для задания свойства.

Проблема в том, что данное выражение вычисляется намного чаще, чем многие думают. Вычисление выражения происходит не только в момент генерации страницы или изменения ее размеров, но и при скроллинге страницы, и, даже, при наведении на элемент мыши. Размещая счетчик в javascript'e такого выражения, можно было увидеть, что количество вычислений легко может доходить до нескольких тысяч.

Еще одной из причин не использовать выражения в CSS является то, что их поддерживает только IE. Многие хаки для IE используют CSS выражения. Прочитав данный пункт, подумайте, а стоит ли их использовать.

8. Делайте JavaScript и CSS внешними файлами

Использование внешних JavaScript и CSS файлов дает лучший результат, так как позволяет браузерам сохранять их в кэше, а не загружать каждый раз, когда пользователь приходит на сайт. А это очень большое преимущество.

9. Уменьшайте количество DNS запросов.

DNS - осуществляет преобразование доменных имен в IP адреса. Что бы сделать такое преобразование, необходимо послать запрос к DNS серверу. На это уходит определенное время. Пока запрос не завершился удачно, браузер не может продолжать загрузку.

Вот почему, не желательно на вашем сайте иметь элементы, загружаемые с разных доменов. Это может привести к замедлению загрузки страницы.

10. Минифицируйте JavaScript

Термин <минификация> означает удаление из кода различных символов, которые не несут смысловой нагрузки. Например, комментарии, символы пробела, табуляции, перевода каретки. Данное действие, может уменьшить размер JS скрипта до 50%.

Существует несколько продуктов, которые позволяют минифицировать JS код. Два наиболее популярных из них это: JSMin и YUI Compressor.

11. Старайтесь не использовать редирект.

Редиректы бывают постоянными (301) или временными (302). Получив заголовок с кодом 301 или 302, браузер автоматически начинает загружать другую страницу, как если бы именно ее запросил пользователь.

Редиректы замедляют попадание пользователя на страницу, которую он хочет увидеть.

Однако, в некоторых случаях редиректы необходимы (например, что бы перенаправлять пользователя со старой версии сайта на новую).

12. Удалите дублирующиеся скрипты.

Здесь все ясно. Один и тот же код не должен дублироваться на странице. Выносите одинаковую функциональность в общие функции.

13. Сконфигурируйте Etags.

Теги содержимого (Entity Tags - Etags) - это механизм, позволяющий браузерам узнать, соответствует ли элемент в кэше браузера, элементу на сервере. Это поле более гибкое, чем дата последней модификации компонента.

ETag - это строка, уникально идентифицирующая версию элемента на сервере.

При нахождении элемента в своем кэше, браузер посылает на сервер запрос if_none_match. Если элемент изменился, сервер отвечает 304 ошибкой и браузер скачивает новую версию документа.

В Apache поддержка Etags включена по умолчанию. Если вы хотите ее отключить, то используйте следующую директиву: FileETag none

14. Сделайте свой Ajax код кэшируемым.

Ajax все больше входит в нашу жизнь. В эпоху web2.0 очень многие сайты используют Ajax. Поэтому очень важно становится оптимизировать работу с ним.

Оптимизация Ajax подразумевает применение к скриптам правил: 3, 4, 9, 10, 11, 13.

Правило 3 - самое важное. Именно оно управляет кэшированием скриптов.

---

Дополнительно (не Yahoo):

1) Вместо .htaccess использовать настройки Apache или Nginx.

.htaccess каждый раз перечитывается, что и вызывает дополнительную нагрузку.

2) Включить кэширование MySQL

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

Подробнее тут: http://dle-news.ru/tips/559-mysql-keshirovanie.html

3) Использовать Nginx

Nginx предназначен для раздачи статики и использования в качестве фронтендов. Apache при этом можно использовать в качестве бэкенда для генерации динамического контента.

4) Использовать кэширование

5) Оптимизация базы данных

Вы можете произвести оптимизацию базы данных, тем самым будет сэкономлено немного места на диске, а также ускорена работа базы данных. Рекомендуется использовать данную функцию минимум один раз в неделю.

6) Создаёт ли Apache нагрузку на сервер при ведении логов доступа и ошибок?

Да, но маленькую. Если Вам не нужны логи доступа и ошибок, можете отключить их.

7) Вырастет ли нагрузка, если я включу "Антилич картинок и файлов" в .htaccess?

Да и довольно сильно.

8) Сжимать CSS файлы шаблона

Как вы знаете, начиная с версии DLE 8.5, в скрипте появилась возможность сжатия javascript файлов, что позволяет до 70% уменьшить их размер и тем самым существенно ускорить их загрузку в браузер.

Подробнее тут: http://dle-news.ru/tips/917-szhatie-css-fajlov-shablona.html

9) Использовать Ajax

Ajax позволяет делать динамические запросы к серверу без видимой перезагрузки веб-страницы: пользователь не замечает, когда его браузер запрашивает данные.

---

Если Вы знаете еще какие-то рекомендации по снижению нагрузки на сервер для высокопосещаемых ресурсов, прошу поделиться

Автор: www.zeos.in

[prikindel 255]

хорошие советы. всем новичкам пригодятся, да и бывалым тоже полезно

кстати, мне вот вспомнилась одна фишка: так называемые ксс спрайты я впервые встретил еще в 2000 или 2001 году, не совсем понимал нафига они (верстальщики того сайта) кидают всякие иконки в одну картинку. тогда мне казалось, что если иконки нарезать в отдельные мелкие файлы, сайт будет быстрее грузиться)

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

максимум было 30к в сутки, но это ведь ерунда по сути.

[hotdj 33]

Прикрепите тему. Жалко если упадёт на дно!

=========

зеос, плюсанул. Спасибо. полезно.

[IronMedia 7]

Хорошая статья. Многим пригодится

[spam 11]

Полезная тема

ExpiresDefault я бы советовал писать так:

<IfModule mod_expires.c>

  # Включаем мод

  ExpiresActive On


  # ставим кеширование на 1 день.

  ExpiresDefault "access plus 1 days"


  # не кешировать html

  ExpiresByType text/html "access plus 1 seconds"


  # это для примера, необязательно но можно если хотите задать разное время кеша для разных типов файлов

  ExpiresByType image/gif "access plus 2592000 seconds"

  ExpiresByType image/jpeg "access plus 2592000 seconds"

  ExpiresByType image/png "access plus 2592000 seconds"

  ExpiresByType text/css "access plus 604800 seconds"

</IfModule>

Изменено 4 мая 2010 пользователем spam

[WWW.ZEOS.IN 1 161]

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

http://www.google.com.ua/images/srpr/nav_logo13.png

http://www.google.com.ua/images/srpr/nav_logo10.png

http://www.google.com.ua/images/srpr/nav_logo8.png

На каждой из этих трёх картинок больше 40 картинок для дизайна сайта.

Это значит, что серверам надо будет выполнять на 40 запросов меньше.

Но не совсем понимаю, почему они таблицы стилей не вынесли в отдельный файл? Они вообще весь код главной страницы сайта сделали в виде одной строки и вырезали все лишние пробелы и переносы строк. Это, видимо, для максимального уменьшения веса страницы и для уменьшения передаваемого трафика. А также, чем быстрее посетитель загрузил сайт, тем быстрее освободился процесс на выполнение запросов других посетителей.

И, кстати, странное начало: <!doctype html> и закрывающегося тега </body> и </html> я так и не нашел на странице

[llbarmenll 18]

Очень интересно было прочитать, спасибо! Возник только один вопрос:

4. Включите gzip сжатие для компонентов вашего сайта

Все современные браузеры поддерживают передачу содержимого веб сайта в сжатом виде. Это может существенно сэкономить количество передаваемого трафика.

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

В Apache 1.3 поддержкой сжатия <занимается> модуль mod_gzip, а в Apache 2.x модуль mod_deflate.

я считаю что gzip сжатие нужно включать если не большая посещаемость и ограничен трафик - или я не прав? Просто например у меня на сервере и так нагрузка скачет и я даже боюсь думать о включении еще чего либо

Изменено 9 мая 2010 пользователем llbarmenll

[zgr 72]

я считаю что gzip сжатие нужно включать если не большая посещаемость и ограничен трафик - или я не прав? Просто например у меня на сервере и так нагрузка скачет и я даже боюсь думать о включении еще чего либо

Ага, сервак накроется, думаю... Ведь, если страничка весит 50 кб, то, чтоб ее запаковать, нужно будет выделять серваку 60 кб, а при большой посещалке и малом кол-ве ОЗУ, встанет очередь на сжатие каждой странички для каждого пользователя. Мне сейчас 128 мб ОЗУ поставили и я не парюсь, а на 32 мб частенько подвисал сайт (если много людей одновременно заходят) при посещалке в среднем 600 чел/день

Статейка хорошая, взял на заметку. Эх, нужно будет время выбрать да заняться вплотную оптимизацией... В php от многих функций старых уже отказываюсь, теперь бы БД научиться оптимизировать

Изменено 21 мая 2010 пользователем zgr

[WWW.ZEOS.IN 1 161]

По пунктам:

3. Добавьте http заголовок Expires

4. Включите gzip сжатие для компонентов вашего сайта

11. Старайтесь не использовать редирект.

13. Сконфигурируйте Etags.

Вам поможет эта статья: http://forum.dle-news.ru/index.php?showtopic=51296

[freeseller 0]

Полезная тема

ExpiresDefault я бы советовал писать так:

<IfModule mod_expires.c>

  # Включаем мод

  ExpiresActive On


  # ставим кеширование на 1 день.

  ExpiresDefault "access plus 1 days"


  # не кешировать html

  ExpiresByType text/html "access plus 1 seconds"


  # это для примера, необязательно но можно если хотите задать разное время кеша для разных типов файлов

  ExpiresByType image/gif "access plus 2592000 seconds"

  ExpiresByType image/jpeg "access plus 2592000 seconds"

  ExpiresByType image/png "access plus 2592000 seconds"

  ExpiresByType text/css "access plus 604800 seconds"

</IfModule>

Данный код при использовании nginx работать будет?

[www.zeos.com.ua 6]

freeseller, как это сделать для nginx можете прочитать тут: http://webo.in/articles/all/2009/22-caching-automation/