Оптимизация спрайтов для ускорения загрузки страниц

25Сен - by petiva156 - 0 - In Uncategorized

CSS спрайты

Спрайты уже давно перестали быть новинкой на многих сайтах, но о путях их оптимизации для Google и успешного применения ещё можно многое изучать. Возможно, я не уделял достаточно пристального внимания этой теме, но в течение последних нескольких лет любопытные виды CSS -спрайтов были опробованы на крупных веб-сайтах с многомиллионной аудиторией.

Я был озадачен одним из них на Amazon`е и запостил изображение на Flickr`е на прошлой неделе, но комментарии быстро подсказали, что это далеко не уникальный случай. Среди исследованных мной на данный момент крупных сайтов также используют подобные изображения Google, Yahoo, и Apple. Разработчики Yahoo! даже задокументировали применение на практике в Developer Network и Flickr блоге.

Скорость загрузки сайта со сложным интерфейсом

Основная проблема при создании сайта со сложным пользовательским интерфейсом — это скорость загрузки. При этом нагрузка на сервер значительно возрастают, если ваш интерфейс требует множества изображений и иконок и т.п. При этом размер файла не столь существенен: поскольку каждое изображение вызывается собственным HTTP-запросом, то чем больше таких запросов, тем дольше будет загружаться сайт. При уровне трафика сайтов Yahoo! и Google, жизненно важно подумать о том, как много миллионов пользователей в день сайт теряет из-за медленной загрузки.

Какое же решение? Разместите как можно больше изображений интерфейса в одно большое изображение, а затем используйте свойства CSS для показа только нужной части большого изображения.

Yahoo spritesЯ также заинтересовался pop-in эффектом: когда весь ваш UI находится в одном или двух больших изображениях, которые загружаются приблизительно секунду, сайт будет

Google sprites
Google sprites

отображён без изображений в течение этого краткого времени, и затем происходит скачок сразу во всех изображениях. Это немного напомнило мне давно известный FOUC-эффект, правда, не в таком режущем глаз виде. Возможно, в данном случае, это необходимое зло.

FOUC-эффект для оптимизации изображений

Примечание: FOUC (Flash of Unstyled Content) — «вспышка нестилизованного содержания», которая появляется в IE/Win, а также в Safari.

Но главный вопрос — должен ли я начать использовать спрайты, созданные таким образом, во всех разрабатываемых мною сайтах?

И я начал экспериментировать с этим подходом к использованию UI зображений, и убедился, что он быстрый и простой. Я обрабатываю в Photoshop’е исходное изображение, затем сохраняю версию каждого изображения в отдельном файле, и уже потом экспортирую всё изображение в JPG / GIF / PNG, что помогает оптимизировать всё изображение в целом. (Для использования PNG дополнительно стоит также применять бесплатные инструменты для сжатия, например, Pngcrush или PngThing).

Запланировать повтор изображений немного сложнее, но я думаю, что за основу можно взять пример MobileMe. В этом примере используется одно большое изображение в строке, заполните небольшой интревал повторяющимся фрагментом, можете традиционно оставить полосу между фрагментами шириной не меньше 1 пикселя. Конечно, понадобятся дополнительные затраты на сжатие такого файла, но уменьшение количества HTTP-запросов более чем компенсирует подобные издержки.

Использование отдельного фрагмента большого спрайта-изображения

Итак, возвращаясь к изначальному вопросу, должен ли я разрабатывать сайт, использую подобную технику? И мой ответ: скорее да, чем нет.

Это требует большей работы. Использование отдельного фрагмента большого спрайта-изображения, требует больше времени, чем отдельного изображения. И вам крайне необходимо действительно тщательно распланировать сам спрайт для избежания неправильного его отображения при увеличении размера шрифта на странице, или при непредвиденном обтекании текста и т.д. Я не вижу, чтобы сайты извлекали достаточную пользу от времени, потраченного на эту реализацию.

Правда, дальнейшая поддержка сайта значительно упрощается. Нужно заменить цвет элемента интерфейса? Только отредактируйте и сохраните главное изображение. Нужно добавить новые изображения? Сделайте спрайт чуть больше и добавьте необходимые отступы.

Идельно подходят для этих целей веб-приложения, для которых жизненно необходима быстрая загрузка и дружественный интерфейс. Сайты с общим набором набором модулей, глобально используемых на всём сайте, также могут извлечь выгоду.

Вряд ли для большинства сайтов требуется объединение абсолютно всех UI изображений в одно, как например MobileMe. В большинстве случаев достаточно хорош будет пример Yahoo, когда в спрайт комбинируются только иконки. Также подойдёт уже тривиальная реализация, такая как элементы с округлыми углами, традиционно использующая три отдельных изображения в одном спрайте — одно для вершины, повторяющяяся середина, и нижняя часть.

Главное изменение, которое я планирую — это сокращение общего количества изображений для каждого из проектов. Если я увижу, что смогу быстро скомбинировать полдюжины изображений в одно, конечно, я сделаю это. Нет — так нет. И если в итоге у меня получится 12 изображений вместо 20, думаю, этого уже вполне достаточно для оптимизации большинства созданных мною сайтов.

Оригинал статьи: Sprite Optimization

Автор статьи: Dave Shea

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

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