Страницы Интернета

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня, похоже, завершается серия статей, посвященных увеличению скорости загрузки сайта. Как вам, наверное, известно, с недавних пор она является одним из факторов, влияющих на успешность продвижения проекта.

Это уже пятая статья. В предыдущих публикациях для анализа скорости загрузки сайта и получения рекомендаций по ее увеличению, мы воспользовались очень удобным и эффективным инструментом под названием Page Speed. Сегодня же поговорим о таком понятии, как CSS спрайты (sprites).

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

Как я говорил в предыдущей статье, для загрузки каждого изображения в браузер пользователя с web сервера, вне зависимости от того, как оно формируется (с помощью тега IMG или же в CSS с помощью свойства «background»), используется отдельный http запрос. Если графики на вашем проекте довольно много, то и количество таких запросов будет неприлично большим.

Например, на начальном этапе развития моего блога сервис Pingdom (на нем можно измерить скорость загрузки, а так же настроить проверку и мониторинг доступности сайта — аптайм) давал такое заключение:

Откуда же может взяться такое большое количество картинок? Естественно это будут те, которые вы вставляете в свои статьи, но все же основную массу будут составлять изображения, входящие в состав шаблона (элементы дизайна). Вот именно их количество мы и попытаемся оптимизировать.

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

Обращаю ваше внимание на то, что нужно именно удалить свойства «background», инициирующие их подгрузку, а не просто физически убрать графические файлы с сервера, т.к. этим вы можете существенно ухудшить скорость загрузки — будет тратиться время на поиск не существующих изображений.

Лично я удалил пару десятков незначительных картинок, используемых в шаблоне моего блога, сократив тем самым пару десятков лишних обращений к web серверу при каждой загрузке страницы, тем самым немного ускорив его общую скорость работы.

Ну, а те фоновые картинки, которые все же окажутся необходимыми в оформлении, мы попробуем объединить в один или несколько больших графических файлов (спрайтов), которые позволят еще немного снизить число запросов к web серверу. Технология CSS спрайтов известна довольно давно, хорошо отработана и поддерживается всеми браузерами.

Единственный минус, который они имеют по сравнению с отдельными графическими файлами под каждое фоновое изображения — это сложность создания и поддерживания. Что есть, то есть — сделать его самому и описать положение отдельных фоновых картинок в CSS коде — задача не из простых.

Но к счастью в интернете можно найти много онлайн сервисов, позволяющих создавать спрайты из загруженных вами картинок. Вам нужно будет потом посмотреть, какие именно свойства в style.css нужно поменять для их корректной работы.

Лучшим онлайн сервисом, на мой взгляд, является "Sprites me" — широко известный и популярный в буржунете, но не заслужено обойденный вниманием в рунете. Вам даже не потребуется загружать в него свои фоновые изображения, которые вы желаете объединить.

Этот генератор все сделает за вас — сам просмотрит ваш сайт, даст рекомендации о том, какие именно картинки можно будет объединить в спрайты, а какие нет.

Во как, настоящий сервис по буржуйски — все включено, да и к тому же бесплатно. Работать с ним действительно очень просто и я сейчас расскажу, как именно в два счета создать и применить на своем сайте спрайты.

Кстати, после того, как я произвел все действия, описанные мною в этой серии статей про увеличение скорости загрузки, в сервисе Pingdom результат уже получился гораздо более приятный глазу:

В общей сложности, ускоряя свой блог, мне удалось в два раза снизить количество http запросов, при этом так же в два раза снизить количество загружаемых в браузеры пользователей с web сервера изображений. Частично были удалены не нужные картинки шаблона, а оставшиеся были по возможности объединены. Так же на треть уменьшился общий вес всех подгружаемых объектов, за счет их оптимизации (сжатия).

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

После проведения всех описанных в этих пяти статьях мероприятий по повышению скорости загрузки, Page Speed дает моему блогу KtoNaNovenkogo.ru оценку в 93 балла из ста возможных, и при этом отсутствуют строки помеченные красным, что означает практически полное исполнение мною всех основных требований (см. скриншот выше).

Итак, для начала вам нужно открыть главную страницу сервиса «Sprites me». Дальнейшие действия могут показаться вам не совсем обычными, ибо потребуется перетащить ссылку под таким же названием «Sprites me» с этой страницы в закладки вашего браузера.

Не знаю, насколько корректно работает этот онлайн генератор в различных браузерах, но в Opera он работает без проблем и на ура.

Открываете в боковой панели обозревателя закладки и выбираете папку, куда требуется сохранить ссылку генератора, а затем просто хватаете левой кнопкой мыши надпись «Sprites me» и тащите ее на панель закладок своего браузера.

Дальше открываете в нем любую страницу своего ресурса и просто щелкаете в панели закладок по только что созданной закладке сервиса «Sprites me». На фоне страницы вашего ресурса в правом верхнем углу откроется окно этой надстройки, где вы сможете осуществить создание спрайта именно для вашего проекта, а затем его скачать. Потрясающе удобная штука.

Посмотрите внимательно, в области «Suggested Sprites» для моего блога предлагается создать три спрайта из фоновых изображений моей темы оформления WordPress. В первый будет включено девять графических файлов, а в остальные по два. В самом низу окна генератора в области «Non-Sprited Images» приведены картинки, которые не представляется возможности объединить.

Что примечательно, в случае, если вы не согласны с мнением генератора, то можете левой кнопкой мыши перетаскивать изображения между этими областями. Мне это понадобилось, например, после того, как я, попробовав применить первый из предлагаемых спрайтов к своему блогу, столкнулся с неработоспособностью двух из девяти объединенных картинок.

Попробовав и так, и эдак поиграться с CSS кодом, я счел за благо при создании первого спрайта просто перетащить из него проблемные изображения в нижнюю область «Non-Sprited Images». После этого проблем с его работой уже не наблюдалось. Как я и говорил — все очень просто и наглядно. Хвала создателям этого онлайн генератора.

Итак, что же нужно сделать для создания спрайта? Да просто щелкнуть по кнопке «make sprite», расположенной в верхнем правом углу каждой области с изображениями, которые при вашем желании могут быть объединены.

После этого генератор на некоторое время задумается, а затем вместо Урлов на отдельных картинок покажет ссылку, по которой вы сможете скачать уже готовый CSS спрайт (все изображения будут объединены в одно). Подведя курсор мыши к этой ссылке вы увидите, как он будет выглядеть:

Для скачивания созданного спрайта щелкните по его Урлу правой кнопкой мыши и выберите из контекстного меню пункт сохранения объекта по ссылке. Затем подключитесь к вашему ресурсу по FTP и копируете графический файл со спрайтом в папку, где хранятся картинки вашего шаблона (хотя можно и в любую другую директорию, ибо это не принципиально).

Точно таким же образом создаете и остальные (просто щелкнув по кнопке «make sprite»), которые вам предлагает создать генератор. Скачиваете полученные файлы спрайтов и заливаете их в папку с картинками на своем ресурсе.

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

Для этого потребуется внести небольшие изменения в файл стилевого оформления вашего проекта, который обычно находится в папке с шаблоном используемого вами движка — чаще всего он называется style.css, но возможны варианты.

Но тут у вас не должно возникнуть особых трудностей, ибо данный генератор даст вам подробную инструкцию, что именно в вашем файле CSS нужно будет изменить. Для получения этой инструкции вам нужно будет щелкнуть по кнопке «export CSS», расположенной в правом верхнем углу окна «Sprites me».

В результате откроется страница с рекомендациями по внесению изменений именно в ваш style.css для того, чтобы заработали созданные вами объединенные изображения. Будут указаны конкретные CSS свойства, в которые потребуется внести изменения, а так же будут зачеркнуты те, которые потребуется удалить и те, которые нужно будет прописать заместо удаленных.

Но обратите внимание, что в приведенной инструкции путь до графических файлов спрайтов вам нужно будет поменять на свой. Для примера приведу участок кода моего style.css до внесения изменения:

И после:

Если в свойстве уже окажется прописанным свойство «background-position», то замените значения в нем на те, которые предлагает данный генератор.

После внесения всех предписанных изменений в style.css обновите открытую в браузере страницу вашего ресурса, удерживая при это нажатой клавишу Shift на клавиатуре (в этом случае статические объекты на вебстранице будут заново запрошены с web сервера).

Если никаких изменений и перекосов в дизайне вы не заметите, то можно вас поздравить с удачным повышением скорости загрузки сайта через уменьшение числа http запросов — ведь теперь будут подгружаться не десятки графических файлов, а лишь единицы (не важно, что они будет больше весить, ибо никто не мешает вам их оптимизировать, как было рассказано в одной из приведенных в начале статей).

Если перекосы после применения CSS спрайта все же появились, то попробуйте определить их причину, и при невозможности устранения, просто создайте его заново в генераторе, но уже исключив из него те изображения, которые не корректно отображались (перетащите их мышью в область «Non-Sprited Images»).

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Буду признателен, если воспользуетесь кнопочками: