Оптимизация вашего дизайна с YSlow – HowTo? #1

Все больше и больше сайтов появляется, которые поражают своим дизайном. Примеры таких сайтов вы можете посмотреть: в рубрике на сайте Six Revisions, 40 замечательных примеров на Vandelay Design, 20 Incredible Illustrative Site Designs Inspired by Nature и, конечно, огромная подборка на сайте SmashingMagazine. Я показал вам далеко на все, что нашел, но потратить на любование полчаса или даже час – вам хватит с головой.

Какие основные тенденции прослеживаются на сегодняшний день? Их в основном 2:

1. Усложнение стилей, появление изысканной графики, активное использование Javascript.
2. Аскетический стиль, который сильно контрастирует с первой тенденцией.

Если второй стиль обеспечивает максимально быструю загрузку и характеризуется отсутствием чего бы то ни было лишнего, кроме контента, то первый – совсем наоборот: важен не только контент, но и обертка этой конфетки – она должна нравится, притягивать взор, заставлять восхищаться. И если человеку нравится такой дизайн, то он будет возвращаться к нему и рассказывать своим друзьям / фолловерам в твиттере / читателям. На лицо технология word-of-mouth. Да и просто своему же глазу приятно, если дизайн красивый.

Но красота – страшная сила. Она может и раздражать, когда слишком много весит и/или абсолютно не оптимизирована, из-за этого человеку приходится долго ждать, пока все загрузится, теряется интерес и появляется недовольство. Именно поэтому я пишу этот пост, чтобы рассказать вам несколько прикладных советов, которыми сам часто пользуюсь и которые помогут вам ускорить загрузку вашего сайта, снизить нагрузку на сервер и уменьшить трафик (что актуально, если ваш хостер не дает вам безлимит). Вступительная речь закончилась – приступим.

Самым важным дополнением для FireFox, которое должно стоять у всех веб-дизайнеров и разработчиков, является, вне всяких сомнений, – YSlow. Эту разработку от Yahoo! я активно начал использовать еще летом, но только сейчас дошли руки до внедрения тех исправлений, что подсказываются при анализе загрузки вашего сайта. YSlow требует установленного FireBug, так что у кого его еще нет – не поленитесь и поставьте. В дальнейшем я буду основываться на том, что у вас установлен этот браузер и 2 указанных мной дополнения к нему.

После установки открывайте в браузере страницу вашего сайта. В нижем правом углу браузера будет рисунок жучка (или таракана) – это ссылка на окно FireBug. При нажатии на него вы увидите весь html, css и js код вашей главной страницы (или любой другой). Нажмите на вкладку YSlow – откроется окно запуска теста. После команды Run это дополнение загрузит текущую страницу и выдаст результат: Оценку (Grade) и количество баллов (Score). В общем случае: чем выше балл и ближе оценка к букве А – тем лучше для вашего сайта – это будет означать, что он правильно кешируется браузером пользователя, оптимизирована графика, сжаты все css и js файлы, маленькое количество http запросов. Если честно, то я не нашел ни одного сайта с оценкой A и 109 баллами (это максимум). Кто найдет – напишите, пожалуйста, в комментариях. Ну а теперь по порядку обо всех параметрах.

Как рассчитывается показатель "Баллы"

Я взял информацию из официальной таблицы – решил ничего не переводить тут, чтобы вы могли ориентироваться:

Имя параметра	Вес
Make fewer HTTP requests	8
Use a CDN	6
Add an Expires header	10
Compress components	8
Put CSS at top	4
Put Javascript at the bottom	4
Avoid CSS expression	3
Make JS and CSS external	4
Reduce DNS lookups	3
Minify JS and CSS	4
Avoid redirects	4
Remove duplicate JS and CSS	4
Configure ETags	2
Make Ajax cacheable	5
Use GET for AJAX requests	5
Reduce the Number of DOM elements	5
No 404s	5
Reduce Cookie Size	5
Use Cookie-free Domains	5
Avoid filters	5
Don’t Scale Images in HTML	5
Make favicon Small and Cacheable	5

Я думаю, что вполне очевидно – чем больше вес параметра, тем важнее, чтобы с ним все было нормально.

Делаем меньше HTTP запросов

Уменьшение запросов увеличивает скорость загрузки страницы, так как браузер обрабатывает меньше информации и быстрее начинает передавать материал пользователю. 1 запрос – это одно обращение к какому-нибудь файлу – файл стилей css, файл js скриптов, рисунки (как прописанные в файле стилей, так и напрямую вставленные в страницу – баннеры и т.п.). Соответственно для снижения количества запросов, надо уменьшить количество обращаемых файлов. Сделать это можно несколькими способами:

1. Упрощение дизайна – неиспользование плагинов, которые часто добавляют свои файлы при загрузке, уменьшение количества графики до нуля, отказ от js, использование одного файла style.css. Но ведь хочется дизайн красивый, так? Потому предлагаю другие варианты.
2. Объединение файлов js и css. То есть все ваши скрипты вы копируете в один файл, тоже самое и со стилями. Js надо копировать в один файл, учитывая их взаимную зависимость: то есть сначала jQuery, потом jQueryUI, потом все остальное…
3. Создание и использование CSS спрайтов (или фонов). Вы объединяете некоторые (или все) фоновые рисунки из css файлов в один графический файл, а потом с помощью свойств CSS background-image и background-position указываете, какой сегмент этого рисунка отображать. То есть фактически загружается один фоновый рисунок (удобно для кнопок или иконок) – но используются его части везде. Получаем экономию запросов. Подробнее читайте вот здесь.
4. Использование карт рисунков (Image maps). По большому счету, это тоже самое, что и для спрайтов: объединение нескольких рисунков, постоянно находящихся на вашей странице, в один. Отличие в том, что каждый из этих так называемых “регионов” рисунка, его частей, может стать отдельной ссылкой на другую страницу. Подробное описание вот тут.
5. Есть и более изощренные способы, но я не буду на них останавливаться.

Уменьшение запросов – это первое, над чем вы должны начать работать. Но, правда, в основном эти улучшения почувствуют только те посетители, которые придут к вам на сайт в первый раз, так как их кеш браузера будет пуст (не будет содержать элементов вашего сайта). Но с другой стороны, согласно вот этой записи про улучшение производительности страниц, 40%-60% посетителей – уникальные или те, у которых выключено кеширование, а это означает пустой кеш и постоянная загрузка для них всех элементов сайта. Соответственно для них выгодна такая оптимизация.

PS У меня на сайте процент новых посещений за месяц составляет примерно 60,88%. Так что думайте сами, к чему это.

Используем CDN

Если кратко – разделение элементов вашего сайта между различными серверами, находящимися в разных частях мира, что обеспечивает более быструю (до 20%) загрузку сайта. Идет распределение запросов на элементы сайта исходя из местоположения вашего посетителя: если он в Азии, то ему быстрее загрузит сайт азиатский сервер, чем европейский или американский (при прочих равных условиях), ну и для американца ближе будет американский, а не украинский, к примеру. Дорогостоящее удовольствие и используется только крупнейшими интернет-компаниями. Для наших стартапов и личных блогов – не вариант. Так что просто не обращаем внимание на этот показатель.

Добавляем дату истечения срока элементов

На мой взгляд, самое интересное. Я вчера этим занимался для своего сайта, потому расскажу исходя из своего опыта.

Используется правило второго посещения: после первого у человека должны сохраниться в кеше все основные и неизменяемые элементы сайта – рисунки, скрипты js, файлы стилей css. Соответственно повторное обращение к сайту значительно снижает количество http запросов и закачек элементов, уменьшая трафик, нагрузку и скорость открывания страницы пользователю.

Для внедрения Expires необходим включенный модуль mod_expires вашего Apache.

Все это вы узнаете у своего хостера (если у вас не собственный сервер). У меня был он отключен, потому я попросил, чтобы его включили, с такими аргументами (цитата): “…установить mod_expires никак нельзя? Многие знающие сказали бы спасибо… Ведь и для вас это хорошо, если будет установлен и применяться веб-мастерами – снижение трафика и нагрузки -, и для нас тоже – оптимизация загрузки.”. Удивительно, но включили. Мое мнение о хостерах улучшилось.

Предположим, вам включили, но ведь это далеко не все действия, которые надо сделать. Далее открываете ваш файл .htaccess в корне сайта. Вписываете в него вот это:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/png A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/css A2592000
ExpiresByType image/x-icon A2592000
</IfModule>

Цифры после буквы “А” означают время в секундах, которое будет сохраняться и не перезагружаться рисунок или иной элемент в кеше браузера вашего посетителя. 2592000 = 30 дней. Можете поставить свое значение (неделя или 2 месяца, или год… в секундах). Как часто вы изменяете рисунок в ваших записях или элементы вашего сайта (помимо контента, имею в виду тут фоны, статические рисунки)? Достаточно редко, потому такое внедрение считаю более чем целесообразным.

Если у вас некоторые рисунки (как у меня баннеры и еще кое-что) находятся не в папке /uploads/ или в папке рисунков вашего шаблона, а например в папке /images/ в корне сайта, то создаете файл .htaccess в этой папке и вставляете туда вот такой код:

Options -indexes
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/png A2592000
ExpiresByType image/x-icon A2592000
</IfModule>

Первая строка просто блокирует прямой доступ к этой папке. Будет выдавать: Error 403: Forbidden. Все остальное вы уже знаете.

Можно использовать также не только вариант с секундами (A2592000), но и просто: “access plus 30 days”. Именно в кавычках, также можно использовать слова days, week|weeks, month|months. У меня на хостинге Apache 1.3.x и я использую вариант с текстом, а не секундами.

продолжение следует