Принцип 80/20
Если взглянуть на сетевую активность веб сайта, то можно заметить, что загрузка непосредственно страницы HTML занимает очень маленькую долю в общем времени загрузки.
В общих чертах можно сказать, что ≤20% загрузки страницы связано с HTML документом, а оставшиеся ≥80% тратятся на загрузку изображений, стилей, скриптов и так далее. Правило 80/20 гласит, что если вы ищите способ улучшить производительность сайта, то лучше взглянуть на то, что составляет 80%, чем пытаться изменить что-то в 20%. Другими словами, нет сомнения, что оптимизация сервера и базы данных очень важна, но проще всего ускорить ваш сайт, если обратить внимание на картинки, скрипты и тому прочее.
Основываясь на принципе 80/20, YSlow проверяет факторы, которые влияют на 80%, и возвращает оценку того, насколько хороша или плоха производительность вашего сайта..
Почему следует заниматься данным вопросом?
Недавно компания Google заявила, что начинает использовать скорость загрузки в своих вычислениях ранга страницы. К тому же, улучшение вашей оценки YSlow может помочь сократить стоимость полосы пропускания (особенно для сайтов с большим трафиком), улучшить отношение пользователей к ресурсу и повлиять на коэффициент конверсии CR.
Обычное значение оценки YSlow
Сайты с низкими характеристиками производительности получают D или хуже. Вот несколько примеров:
Вэб сайт Оценка YSlow
Boing Boing E (55)
Dribbble D (66)
The New York Times E (52)
Daring Fireball C (74)
Zeldman.com D (60)
Осуждение сайтов и их авторов выходит за рамки данной статьи. Данный список приводится просто для того, чтобы показать, что проблемы имеют все типы сайтов. Правда такова, что производительность вэб сайта не стоит на первых местах в списке первоочередных задач, а ее улучшение не происходит само по себе. Вне зависимости от того, имеете ли вы огромный коммерческий сайт или персональный блог на WordPress, вопрос производительности сайта надо встраивать в свои рабочие процессы.
С этой позиции рекомендуется установить Firebug/YSlow, и взглянуть на ваш сайт. Как он оценивается?
Но как мы можем улучшить оценку YSlow нашего сайта? И более важный вопрос, что мы можем сделать как разработчики и дизайнеры для того, чтобы быть уверенными, что сайты клиентов имеют отличную производительность?
3 основных концепции
YSlow содержит 14 правил, а Google Page Speed содержит 26. Все эти правила и техники важны, но для упрощения сконцентрируемся на 3 основных концепциях:
1. Делаем меньше запросов к файлам
2. Загружаем файлы одновременно
3. Держим все в кэше настолько долго, насколько это возможно
Делаем меньше запросов к файлам
Резюме: если вы делаете меньше запросов к файлам, то это занимает меньше времени при загрузке сайта.
Давайте посмотрим, каким образом можно уменьшить количество стилей, скриптов и изображений, которые надо загружать:
Минимизация
Что если вместо написания множества тэгов <script> вы сможете объединить их в один файл, удалив лишние символы? В этом суть минимизации. Используя программное обеспечение подобное PHP Minify, мы можем взять все наши JavaScript или CSS файлы и соединить их в один файл, сохраняя правильный порядок.
<!-- Обычное включение скриптов -->
<script src="/_scripts/file1.js"></script>
<script src="/_scripts/file2.js"></script>
<script src="/_scripts/file2.js"></script>
<!-- Использование Minify -->
<!-- http://code.google.com/p/minify/ -->
<script src="/_min/b=_scripts&f=file1.js,file2.js,file.js"></script>
Основное преимущество использования PHP Minify в том, что уменьшается количество загрузок файлов (что приводит к увеличению оценки YSlow). Но есть еще один положительный фактор: PHP Minify не изменяет оригинальные файлы, он создает новый, комбинированный файл налету. Таким образом, у разработчика остается возможность вносить изменения в сайт клиента с помощью редактирования индивидуальных файлов, а PHP Minify автоматически создаст новый комбинированный файл.
Это очень важный аспект концепции: дизайн студия должна быть уверена, что сайт, переданный клиенту можно поддерживать при полном ее отсутствии. Когда бы ни писался код, он должен быть легко доступен клиенту или будущим разработчикам для чтения и редактирования.
При использовании PHP Minify все оригинальные файлы остаются в действии и могут быть редактированы поотдельности. Такой подход позволяет сохранять высокий уровень поддержки,
CSS спрайты
Спрайты - это технология, которая позволяет комбинировать несколько фоновых изображений в одно. Затем скомбинированное изображение используется несколькими правилами CSS, которые показывают только нужную часть изображения.
Обычно, создание и сопровождение спрайта CSS является настоящей головной болью. До тех пор пока не появился SpriteMe.org. SpriteMe делает всю тяжелую работу за вас. С помощью одного виджета JavaScript вы сможете комбинировать изображения и корректировать соответствующие стили CSS.
Используйте данный инструмент рассудительно. Использование спрайтов может существенно усложнить процесс изменения изображений для клиента.
Одновременная загрузка файлов
CSS наверх, JavaScript вниз
Резюме: загружайте одновременно столько файлов, сколько сможете.
Браузеры по умолчанию могут загружать параллельно несколько файлов (~2 в старых браузерах, ~6 в новых). Однако, пока браузер загружает скрипт, он не будет загружать никакие другие файлы.
Размещая файлы CSS наверху и JavaScript внизу вы даете возможность браузеру загрузить и показать контент пользователю гораздо быстрее, без блокирования.
Примечание: это особенно важно по отношению к скриптам с третьих сторон, таких как Google Analytics, виджетов или тэгов ad, так как задержка в доставке может привести к существенным нарушениям рендеринга.
jQuery с сайта Google
Используя библиотеку jQuery рекомендуется ссылаться на Google CDN (content delivery network - сеть распространения контента). Если пользователь уже посещал вэб сайт, который ссылался на библиотеку jQuery в Google CDN, то она уже загружена в кэш пользователя. В этом случае мы экономим 24KB объема страницы. Если библиотеки еще нет в кэше, то используется преимущество CDN: быстрая загрузка с сервера, который географически находится ближе и параллельная загрузка со второго хоста.
<!-- Ссылка на jQuery в Google CDN -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Примечание: Google размещает обширный фреймворк JavaScript в дополнение к jQuery.
Держим все в кэше настолько долго, насколько возможно
Резюме: Если вы что-нибудь загрузили и оно не изменялось, не нужно загружать это основа.
Несколько строк, добавленных в файл .htaccess указывают браузеру кэшировать файлы на длительный срок, таким образом не нужна будет повторная загрузка при повторном визите пользователя.
# Добавьте в ваш файл .htaccess
FileETag none
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000
ExpiresByType application/x-javascript A2592000
В примере устанавливается срок хранения для изображений, скриптов и стилей на 30 дней от текущей даты. Также приводятся указания для Apache удалить ETag, идентификатор, который часто усложняет процесс кэширования. Эти установки можно делать и в конфигурационных файлах Apache, но модифицирование файла .htaccess обычно проще.
Данные модификации также помогают сокращать трафик для сайтов с высоким трафиком.