Ниже приведена частичная перепечатка статьи из журнала «Терминал.Ру» #4, 2008. С полной верией можно ознакомиться на сайте журнала.
Еще во времена HTML 3.2 разработчики стали задумываться над тем, как сократить время загрузки сайтов, перегруженных информацией и графикой. С тех пор мир шагнул далеко вперед: во много раз увеличилась скорость доступа в интернет, сложность и технологичность сайтов возросла, но проблема «медленных» сайтов осталась.
Кто-то может подумать, что эта проблема надуманна: при нынешних скоростях любой сайт работает быстро. Однако, по данным последних исследований, рост размера средней веб-страницы лишь немного уступает темпам увеличения пропускной способности каналов доступа. А если учесть, что с каждым годом расслоение пользователей по скорости подключения к интернету только усиливается, то ситуация принимает уже критический характер: для 90% пользователей нужно использовать более прогрессивные и технологичные методы, чтобы обеспечить высокую скорость загрузки.
Исторически так сложилось, что вопросами клиентской оптимизации занимается именно front-end-архитектор, ведь подавляющая часть вопросов по ускорению загрузки сайтов связана именно с клиентской частью. В стремлении создавать удобные, быстрые, кроссбраузерные сайты архитектору приходится решать массу задач: согласовать видение заказчика с удобством для пользователей и обязательно предвидеть, каким образом будет развиваться сайт или целый портал в дальнейшем.
В решении таких проблемных вопросов, как использование стандартов в верстке, комбинирование фоновых изображений, применение JavaScript-логики на странице и т.п., следует учитывать не только фактическое техническое задание, но и максимальную производительность на стороне клиентского браузера. Очень часто производительностью жертвуют ради скорости разработки. Чтобы закончить проект вовремя, его сдают немного сырым, что отрицательно сказывается на конечной производительности.
При создании любого внешнего модуля (страницы или ее части) архитектору приходится делать выбор: использовать ли на странице свою таблицу стилей или общий стилевой файл. В первом случае для ускорения загрузки страницы можно включить таблицу стилей в итоговый HTML-документ. Во втором случае следует использовать кэширование и оценивать число постоянных пользователей.
Вопросы выбора преследуют архитектора повсюду. Объединять ли все файлы в один или разбить на несколько независимых модулей? Кэшировать ли отдельные ресурсные файлы, необходимые для отображения страницы, или включить их в сам документ? Какие браузеры необходимо поддерживать, и какие приемы при этом использовать? Какую палитру и степень сжатия использовать для изображений, и как разбить на несколько составляющих сложный рисунок? Для каких страниц возможно использование постзагрузочных методов, а для каких нужна предварительная загрузка? Вопросов очень много, и большую их часть можно решить, применяя знания основ клиентской оптимизации.
...
Все оптимизационные методы разбиваются на четыре основные группы: уменьшение объема данных, кэширование, уменьшение числа файлов и визуальная оптимизация.
Наиболее действенным способом уменьшения объема данных является архивирование на сервере (gzip/deflate). Сегодня практически все современные гиганты интернет-индустрии (Google, Yahoo!, Yandex) отдают текстовые файлы в gzip-формате. Существуют определенные проблемы с восприятием таких файлов некоторыми браузерами, однако почти все они решаемы на данный момент. Это наиболее простой в применении подход, поэтому имеет наибольший ROI: минимум действий приводит к максимуму результата.
Кэширование также не требует глубоких знаний сетевых протоколов и тонкостей верстки, но при большом количестве постоянных посетителей способно в значительной степени повлиять на скорость загрузки страницы.
Для уменьшения числа файлов обычно используют объединение как текстовых (.html, .css, .js), так и графических файлов, используемых в оформлении. Текстовые файлы объединять очень просто, при этом значительно экономится время, уходящее на дополнительные запросы к серверу. При объединении графических файлов обычно используют технологию CSS Sprites (Image Map), которую не так легко автоматизировать. Однако при больших количествах иконок на странице эта технология способна значительно ускорить загрузку.
К методам визуальной оптимизации можно отнести как экстремальную оптимизацию, когда все сопутствующие файлы включены в итоговый, так и распределение нагрузки по нескольким серверам при загрузке файлов. На реальном времени отображения страницы эти действия сказываются несильно, и в некоторых случаях их внедрение сопряжено со значительными трудностями. Однако если мы имеем дело с высоконагруженными проектами, даже несколько миллисекунд могут сказаться на значительном (в абсолютном смысле) приросте прибыли.
Наиболее простым и оправданным способом ускорения загрузки страницы является минимизация текстовых файлов за счет их gzip-сжатия. Данная техника проста и довольно эффективна. Необходимо лишь прописать несколько строк в конфигурационном файле сервера — и общая скорость загрузки возрастет от 30% до 50%, в зависимости от числа графических файлов. При сжатии .html могут возникнуть проблемы, которые давно изучены и исследованы. Их решение заключается в отключении сжатия для известного набора «старых» браузеров.
...
При анализе диаграммы загрузки сайта стоит обратить внимание на два фактора: время загрузки последней таблицы стилей (или последнего файла скриптов, вызываемого в head), соответствующее времени визуальной загрузки, и время полной загрузки страницы (приход последнего файла в клиентский браузер). Диаграмму загрузки сайта можно получить, например, проанализировав сайт с помощью Web Optimizator (https://webo.in/).
Самой знаменитой технологией оптимизации времени загрузки изображений еще со времен ранних компьютерных игр является CSS Sprites. Технология заключается в создании одного ресурсного файла, в котором собираются несколько отдельных изображений. Сейчас уже не редкость встретить rollover-эффекты, созданные на спрайтах: десятки отдельных иконок, объединенных в один файл и загружающихся сразу, а не в течение нескольких секунд, и т.д.
Хотя все современные браузеры отлично понимают данную технологию, но неумелое ее применение способно разрушить страницу, например, при увеличении размера шрифта или если не позаботиться о том, чтобы фон одного элемента не появился бы у другого. Также есть ряд негативных эффектов, связанных с появлением в HTML-коде несемантических конструкций и со сложностью модификации самого ресурсного файла при нетривиальном расположении в нем изображений. Но при умелом использовании эта технология способна в значительной степени сократить время ожидания загрузки страницы (до 40%).
...
Подводя небольшой итог вышесказанному, отмечу, что оптимизацию ресурса в первую очередь стоит начинать с исследования его аудитории. Учитывая особенности аудитории (характерную скорость подключения, используемые браузеры и так далее), можно сделать работу оптимизатора по-настоящему эффективной. Значительная часть проводимых действий будет зависеть от конкретной клиентской архитектуры и особенностей дизайна.
Перед собой всегда нужно иметь полную картину, желательно для всех страниц исследуемого ресурса, чтобы представлять, какое воздействие на скорость загрузки окажут конкретные действия.
...
Основным инструментом любого грамотного клиентского оптимизатора было и является кэширование. Знание архитектуры и грамотное применение кэширующих заголовков способно сильно упростить и ускорить работу пользователя с конечным ресурсом.
Далее по эффективности (относительно прикладываемых усилий) следуют такие техники, как использование сжатия и минимизации текстовых файлов, объединение картинок в спрайты, распределение статических файлов по различным хостам, уменьшение картинок в размере и объединение файлов. Все они способны ускорить загрузку вашего сайта, но не все могут быть действенны в каждом конкретном случае. К сожалению, общего рецепта не существует: каждый случай требует детального анализа.
...
С полной версией статьи можно ознакомиться на сайте журнала Терминал.Ру