Думаю, вы не раз замечали, что некоторые сайты очень долго загружаются браузером. Возможно, что виной всему плохое соединение с Интернет, но это не обязательно так. Очень часто сам сайт сделан так, что его загрузка занимает значительное время.
В 2004 году, главой отдела анализа эффективности Yahoo был назначен Стив Содерс. Проанализировав загрузку первой страницы портала Yahoo, он выяснил, что только 5% времени тратится на загрузку HTML (а ведь это главное содержание страницы). Все остальное время расходовалось на загрузку картинок, скриптов, счетчиков, таблиц стилей и многого другого.
Все это привело к тому, что в компании Yahoo были разработаны правила для высокопроизводительных вебсайтов. Оригинал правил находится вот здесь. Я вам предлагаю перевод этих правил на русский язык.
1. Уменьшайте количество HTTP запросов к серверу
Большинство времени при загрузке страниц, браузер тратит на запросы к серверу. Уменьшая количество элементов страницы, вы одновременно уменьшаете количество обращений к серверу. По мнению Yahoo – это ключевой момент, на который стоит обратить внимание.
Еще один плюс данного метода в том, что нагрузка на сервер также уменьшается.
Как же Yahoo предлагает уменьшать количество компонентов на странице?
Один из путей, это упрощать дизайн страницы. Но что же, совсем не создавать сложные и красивые сайты? Можно ли для них уменьшить количество запросов к серверу?
Yahoo рекомендует следующие способы:
* Используйте Image Maps. С помощью этого способа можно комбинировать несколько изображений в одно. Общий размер меньше не станет, но количество запросов к серверу уменьшится.
* Используйте CSS спрайты. Поместите все изображения вашего сайта в один большой файл, а затем используйте CSS свойства background-image и background-position, для задания того участка, который должен быть отображен.
* Объединяйте несколько файлов в один. Например, помещайте все 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 показали, что размещение файлов стилей в заголовке страницы (в
секции) уменьшает общее время загрузки сайта, так как позволяет браузеру отображать документ постепенно по мере загрузки.Кроме того, в спецификации HTML прямо указано, что все стили должны подключатся в
секции. Однако, почти все браузеры позволяют включать стили в любом месте текста документа, поэтому многие веб-дизайнеры (или системы управления сайтом) пользуется этим.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 все больше входит в нашу жизнь. В эпоху веб2.0 очень многие сайты используют Ajax. Поэтому очень важно становится оптимизировать работу с ним.
Оптимизация Ajax подразумевает применение к скриптам правил 3, 4, 9, 10, 11, 13.
Правило 3 – самое важное. Именно оно управляет кэшированием скриптов.
О том, как сделать дружественный поисковикам Ajax, читайте здесь.
Выводы
Вот такие советы дает нам поисковый гигант Yahoo. Многие из них пересекаются друг с другом, некоторые предназначены только для очень крупных проектов, но в любом случае, о них желательно знать и понимать, почему специалисты советуют именно это.
