Автор: Перевод: Николай Мациевский aka sunnybear Источник: WEBOptimizator
Примечание: ниже перевод свежей презентации от 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% от времени загрузки
Безусловная предзагрузка (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 медленнее всего
Кешируйте
Обновляйте узлы «оффлайн», а только потом добавляйте к общему дереву
Просто удивительно, как много сайтов, от маленьких до огромных, могут оптимизировать свой размер. Для отдельной страницы в изображениях передается порядка 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 Кб)
Использовать анимированные иконки ни разу не хорошо