Статьи

Перевод: Николай Мациевский aka sunnybear
Опубликована: 29 марта 2008

Yahoo: высокопроизводительные Веб-страницы. Часть 2

Примечание: ниже перевод свежей презентации от Yahoo! "High Performance Web Pages" с новыми советами по оптимизации. Yahoo известна своими статьями на тему оптимизации клиентской части и является мировым лидером в этой области. Однако, с уходом Julien Lecomte (ведущего специалиста отдела оптимизации, автора YUI Compressor) в Apple ситуация может измениться. Посмотрим.

Мои комментарии далее курсивом. Я постарался, по возможности, расставить ссылки на упоминаемые в презентации инструменты и связанные статьи.

Этот медлительный веб

  • Мы используем Интернет для решения наших повседневных задач
  • Мы все хотим испытывать при этом комфорт
  • Мы не выносим медленные страницы (хотя есть варианты)
  • На 500 мс медленнее = 20% уменьшение трафика (Google)
  • На 100 мс медленнее = 1% уменьшение продаж (Amazon)

Разговор на сегодня

  • Как улучшить производительность веб-страниц
  • Фокус на клиентской части
  • 14 отличных советов для быстрых страниц
  • ... и еще 20!

Исключительная производительность в Yahoo!

  • Измерение и улучшение производительность для продуктов Yahoo! по всему свету
  • Центр экспертизы
  • Инструменты для разработки, данные для анализа
  • Сбор, исследование и пропаганда лучших техник как внутри компании, так и за ее пределами

Важность производительности клиентской части

  • Серверная часть = 5% от времени загрузки
  • Клиентская часть = 95% от времени загрузки
  • Даже для главной страница Yahoo! клиентская часть = 88% от времени загрузки

Фокус на клиентской части

  • Занимает 80–90% времени при загрузке
  • Легче поддается оптимизации, чем серверная
  • Проверено в работе

Дальше идет описание известных 14 советов по оптимизации

Сервер: быстрый сброс буфера

  • Позвольте браузеру загружать компоненты в то время, как ваш сервер занят обработкой
  • В PHP есть функция flush()
  • Лучше всего подходит для загруженного сервера / легкой клиентской части:
    ... <-- css, js -->
    </head>
    <?php flush(); ?>
    <body>
    ... <-- содержание -->
  • Материал для изучения: поиск Yahoo!

Сервер: использование GET для AJAX-запросов

  • GET предназначен для получения данных
  • POST обычно состоит из двух шагов (отправка заголовков, отправка данных)
  • GET-запрос занимает 1 TCP-пакет (если у вас не огромное количество cookie)
  • Максимальная длина URL составляет 2 Кб (из-за IE)
  • POST без отправки «реальных» данных действует так же, как и GET
  • Исследование почты Yahoo!

Содержание: пост-загрузка компонентов

  • Спросите себя: что абсолютно необходимо для начальной отрисовки страницы?
  • Все остальное может подождать (интерактивные и анимационные эффекты, невидимое содержание, изображения «за линией перегиба»)
  • Лучше всего для разбиения на части подходит JavaScript
  • YUI Image Loader
  • Утилита YUI Get
  • Материал для изучения: yahoo.com
  • onload.js и onload.css
  • Последовательное улучшение внешнего вида

Содержание: предзагрузка компонентов

Загружаем

  • То, что понадобится в будущем
  • Безусловная предзагрузка (google.com сразу же загружает спрайты)
  • Предзагрузка по условию (search.yahoo.com после ввода текста в поле ввода)
  • Досрочная предзагрузка: загружаем «на потом» перед изменением дизайна

Содержание: Уменьшение числа DOM-элементов

  • Какая самая быстрая страница в мире? about:blank
  • Более сложная страница «тянет» больше байтов при загрузке
  • Это также замедляет обращение к DOM со стороны JavaScript
  • Это также может означать семантически неверную верстку (например, вложенные таблицы или кучу div'ов)
  • Используйте семантическую верстку
  • Используйте reset.css, fonts.css, grids.css от YUI
  • Очень просто тестировать: наберите в консоли Firebug document.getElementsByTagName.length (или в адресной строке браузера javascript:alert(document.getElementsByTagName.length))
  • yahoo.com — нагруженная страница, но все равно содержит не более 700 элементов (HTML-тегов)

Содержание: распределение компонентов между доменами

  • Максимизируйте число параллельных загрузок
  • Но не более 2–4 доменов из-за задержек на поиск DNS
  • www.example.com — HTML-содержание
  • static.example.org — статичные компоненты
  • В будущем: IE8 будет поддерживать 6 запросов на домен

Содержание: уменьшение числа iframe'ов

  • Преимущества <iframe>:
    • может помочь с медленными сторонними компонентами, например, информерами или рекламой,
    • обеспечивает информационную безопасность (из стороннего iframe'а нельзя доступиться до основного документа),
    • можно распараллелить загрузку компонентов.
  • Недостатки <iframe>:
    • даже если они пустые, все равно потребуют времени на свою загрузку,
    • блокируют загрузку страницы,
    • несемантичны.

Содержание: избавление от 404-ошибок

  • 404 — это когда что-то не найдено
  • Бесполезные загрузки
  • На некоторых эта страница пытается помочь пользователю: «Может быть, вы имели в виду X?»...
  • ...что потребляет серверные ресурсы (БД и т.д.)
  • Когда внешний JavaScript-файл оказывается 404-ошибкой, браузер по-прежнему пытается его проанализировать и найти хоть что-нибудь полезное
  • Это блокирует дальнейшую загрузку

Cookie: уменьшение размера

  • Удаляем ненужные cookie
  • Максимально уменьшаем размер cookie, чтобы снизить их влияние на время ответа пользователю
  • Выставляем cookie только для необходимого уровня домена, чтобы они не распространялись на ненужные поддомены
  • Выставляем правильно срок действия (Expires). Более ранний срок действия удалит cookie быстрее, что уменьшит время ответа пользователю

Cookie: хостинг для компонентов без cookie

  • Вариант 1: разные поддомены (static.example.org)
  • Вариант 2: новая TLD зона (например, yimg.com, ytimg.com, images-amazon.com)
  • Прокси могут не кешировать
  • www.wwww-yes.org или www-no.org?
  • www-no не оставляет других возможностей кроме задания cookie для *.example.org

JavaScript: уменьшение обращений к DOM

  • Обращение к DOM медленнее всего
  • Кешируйте
  • Обновляйте узлы «оффлайн», а только потом добавляйте к общему дереву
  • Избегайте правок в макете с помощью JavaScript

JavaScript: тонкая настройка обработчиков событий

  • Не ждите onload, используйте DOMContentLoaded
  • События «всплывают», поэтому используйте делегирование (назначение обработчиков на родительские элементы)
  • Удаляйте обработчики, чтобы избежать утечек памяти в IE
  • Будьте осторожны с onresize
  • Используйте утилиту YUI Event

CSS: используйте <link> вместо @import

  • CSS Должно быть вверху страницы
  • Для IE @import равносилен размещению <link> внизу страницы

CSS: уход от фильтров

  • Работают только в IE
  • AlphaImageLoader
  • Исправляют в IE6 проблему с полупрозрачными PNG, в IE7 все и так хорошо
  • Блокируют отрисовку, «замораживают» браузер
  • Увеличивают расход памяти
  • Для каждого элемента, а не для каждой картинки!

Лучше всего: вообще избегайте использовать, используйте PNG8 для корректного уменьшения функционала

Запасной вариант: используйте хак с подчеркиванием _filter, чтобы не ущемлять пользователей IE7+

Изображения: оптимизация

  • GIF: не используйте большую палитру, чем необходимо
  • Используйте PNG вместо GIF
  • «Все мы говорим: Give PiNG a Chance!»
  • Используйте pngcrush (или optipng, или pngoptimizer)
  • Удаление гамма-чанков также решает ряд проблем с корректностью цветов в браузеров
  • Удаляйте комментарии
  • jpegtran: JPEG преобразования без потери качества, может быть использован для оптимизации и удаления комментариев

Можно написать простой инструмент, который перебирает директории с изображениями перед запуском сайта и делает следующее:

  1. Преобразовывает все GIF в PNG (и проверяет, есть ли при этом выигрыш)
    > convert image.gif image.png
  2. Уминает все PNG
    > pngcrush -rem alla -reduce image.png result.png
  3. Удаляет комментарии из JPEG
    > jpegtran -copy none -optimize -perfect src.jpg > desc.jpg

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

Изображения: оптимизация CSS Sprites

  • По возможности используйте горизонтальные вместо вертикальных
  • Комбинируйте по цвету
  • Старайтесь использовать небольшое (до 256) число цветов, чтобы попасть в PNG8
  • «Будьте mobile-friendly»: не оставляйте большие пустые области:
    • Размер файла увеличивается несильно, но изображение все равно нужно преобразовать в карту пикселей
    • 100x100 — это 10000 пикселей
    • 1000x1000 — это 1 миллион пикселей
    • Материал для изучения: Yahoo! Mail Classic

Изображения: нет масштабированию в HTML

  • Происходит загрузка ненужных байтов
  • Если нужно
    <img width="100" height="100" src="mycat.jpg" />
    тогда mycat.jpg должно быть 100x100, а не 500x500

Изображения: уменьшение и кеширование favicon.ico

  • www.example.org/favicon.ico
  • Необходимое зло:
    • Браузер ее запросит
    • Лучше не отвечать 404-ошибкой
    • Будут отправлены cookie
    • Не может быть в CDN
    • Мешается в последовательности загрузки ресурсов
  • Уменьшайте ее (<=1 Кб)
  • Использовать анимированные иконки ни разу не хорошо
  • Выставляйте заголовок Expires
  • Инструменты: imagemagick, png2ico, favicon.ru
  • Материал для изучения: в поиске Yahoo! favicon.ico занимает 9% всех просмотров страниц (для webo.in это 7%)

Бонус: crossdomain.xml

  • Кросс-доменная политика для Flash/Flex
  • Находится в корне: example.org/crossdomain.xml
    <cross-domain-policy>
        <allow-access-from-domain="*.yahoo.com" secure="false"/>
    </cross-domain-policy>
  • Выставляйте заголовок Expires
  • Архивируйте (gzip)
  • ...и делайте его действительно безопасным, а не так:
    <allow-access-from domain="*" />

Мобильные агенты: размер всех компонентов до 25 Кб

  • Иначе iPhone не будет их кешировать
  • Несжатый размер до 25 Кб
  • Уменьшайте HTML так же, как и JavaScript и CSS

Мобильные агенты: группируйте компоненты в multipart документ

  • Для тех пользовательских агентов, которые это поддерживают (не iPhone)
  • Как email с вложениями

Инструменты

Инструменты: IBM Page Detailer

  • Метод: sniffer пакетов
  • Конкурентные преимущества:
    • Наиболее точный
    • Предлагает детальные данные
    • Работает для любого браузера
    • Лучше всего организована диаграмма загрузки
  • Недостатки:
    • Требует загрузки
    • 90-дневный испытательный период
    • Работает только под Windows
    • Не показывает компоненты из кеша

Инструменты: Firebug NET Panel

  • Метод: sniffer пакетов
  • Конкурентные преимущества:
    • Интегрирован в Firebug
    • Показывает диаграмму загрузки
    • Показывает информацию из HTTP-заголовков
  • Недостатки:
    • Работает только в Firefox
    • Неточная диаграмма загрузки
      • Нет времени отрисовки
      • Нет времени анализа
      • Нет информации по редиректам
      • Нет информации по поиску DNS
    • Не показывает компоненты из кеша

Ссылки по теме: исключительная производительность

Читать дальше

Все комментарии (habrahabr.ru)