Оптимизация вашего дизайна с 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 requests8
Use a CDN6
Add an Expires header10
Compress components8
Put CSS at top4
Put Javascript at the bottom4
Avoid CSS expression3
Make JS and CSS external4
Reduce DNS lookups3
Minify JS and CSS4
Avoid redirects4
Remove duplicate JS and CSS4
Configure ETags2
Make Ajax cacheable5
Use GET for AJAX requests5
Reduce the Number of DOM elements5
No 404s5
Reduce Cookie Size5
Use Cookie-free Domains5
Avoid filters5
Don’t Scale Images in HTML5
Make favicon Small and Cacheable5

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


Делаем меньше 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%. Так что думайте сами, к чему это.


Используем title="Content Delivery Network">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 и я использую вариант с текстом, а не секундами.

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

    комментариев 14

    1. Мне на мирексе (mirex.su, там блог девушки хостиццо) тоже включили без проблем :) Правда, у меня сложилось ощущение, что на тот момент я входил в десятку первых клиентов, да и сейчас их ненамного больше :-D

      P.S. Есть еще сайт, занимающийся подобным анализом – webo.in, возможно – кому-то будет удобнее, чем YSlow.

    2. @BaRoN!:
      За ссылку спасибо, сейчас его смотрю.
      А хостеры – чем моложе, тем отзывчивее…

    3. Ну тут конечно, как повезет… Или помрет, или будет счастливо расти и развиваться, до тех пор, пока не вырастет настолько, что сможет класть на клиентов.

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

    4. Александр:

      Проблема хостера, что он наращивает клиентскую базу забывая про мощности вычислительные :)

      • Потому НЕ имейте дело с infobox, masterhost… Там вообще жуть.. Да, и еще про FastVPS забудьте тоже…

        • Александр:

          проблема в том, что в итоге все хостеры становятся такими… :(
          именно по этой причине перешел на собственный сервер – по деньгам это год хорошего VPS, но все настройки за мной и ресурсов сколько выделю

    5. У меня появилось пара идей по поводу http запросов (техники их снижения) и CDN. Вам это будет интересно прочитать?

      • Александр:

        вариант с оптимизацией – думаю сейчас актуален.. выход последний версии… требует улучшений :) (и собственного сервера :)))) )

    6. brdm:

      Оценка “А” выдается при включенном плагине WP Minify Это без настроек, дизайн конечно пропадает ) Сейчас пытаюсь с этим плагином разобраться.

    7. Jettochkin:

      Можно скрипт на сервере через cron запускать – который все js, css и тп – пожмет gzip-ом – работает пару секунд на сайте с 1200 блогов

    8. sol:

      Мой сайт http://www.moshiach.ru имеет оценку А и счет 95

    1. 14.12.2009

      […] скорости зазгруки сайта… О некоторых я писал вот тут и тут. И не забываем про WP-Super-Cache и/или Maxsite […]

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *