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 преобразования без потери качества, может быть использован для оптимизации и удаления комментариев
Можно написать простой инструмент, который перебирает директории с изображениями перед запуском сайта и делает следующее:
- Преобразовывает все GIF в PNG (и проверяет, есть ли при этом выигрыш)
> convert image.gif image.png
- Уминает все PNG
> pngcrush -rem alla -reduce image.png result.png
- Удаляет комментарии из 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)