Наверное, это будет последняя статья из серии быстрый сайт. В принципе, в трех предыдущих статьях мы уже рассмотрели массу возможностей по ускорению загрузки сайта, но остались еще некоторые штрихи, сделать которые стоит для получения минимально возможного результата.
Помните, что сейчас быстрый сайт будет способствовать самостоятельному продвижению и раскрутке сайта, т.к. он является одним из важным фактором, на основании которых поисковые системы осуществляют ранжирование и определяют релевантность.
Насчет изображений сразу стоит оговориться — прежде, чем приступить к их сжатию, вам, пожалуй, следует решить — нужны ли данные изображения у вас на сайте. Дело в том, что в шаблоне вашего ресурса (шаблоны Joomla, темы WordPress, темы SMF) могут быть описаны в CSS файле фоновые изображения для отображения различных элементов дизайна, но при этом эти изображения вы по тем или иным причинам не используете.
Вообще, изображения для своего ресурса можно задавать двумя способами — с помощью Html тега IMG (задаются в Html коде), а так же с помощью CSS свойств «background» или «background-image», которое может выглядеть, например, так:
background:url(http://ktonanovenkogo.ru/wp-content/themes/Organic/images/spriteme3.png) no-repeat;
При загрузке страниц вашего ресурса происходит и загрузка изображений, заданных как через Html тег IMG, так и фоновых изображений, описанных свойствами «background» в CSS файле. Посмотреть все подгружаемые в браузер пользователя изображения можно в нашем средстве для получения быстрого сайта — Page Speed на вкладке «Resources»:
В колонке «Type» для изображений заданных через Html тег IMG будет прописано «image», а для фоновых изображений заданных через CSS — «cssimage». Поэтому при помощи Page Speed вам будет достаточно просто различить эти загружаемые в браузер пользователя изображения, к тому же, подведя курсор мыши к строчке с интересующим вас изображением, вы увидите его превьюшку:
К чему я все это говорю? Дело в том, что когда я дошел до сжатия (оптимизации) изображений, желая максимально создать быстрый и шустрый сайт, то прежде всего внимательно изучил через Page Speed все загружаемые с моего web сервера в браузеры пользователей картинки и пришел к неутешительному выводу.
Во-первых, подгружаемых изображений было слишком много (около 70), что совсем не здорово, ибо для передачи с web сервера в браузер пользователя каждого из этих изображений формируется отдельный http запрос. 70 http запросов тратилось только на загрузку изображений — это недопустимо много, т.к. сильно снижает быстроту сайта. Следовательно, одним из самых действенных способов создания быстрого сайта может быть уменьшение числа http запросов при загрузке страницы вашего ресурса в браузер пользователя.
Во-вторых, меня озадачило то, что среди подгружаемых изображений (при открытии любой страниц моего блога) было много картинок, которые не использовались в оформлении WordPress блога. Взялись эти левые картинки из CSS файла используемой мною темы WordPress.
При первоначальной настройке темы под свои нужды я не очень корректно убрал эти изображения из оформления своего блога, забыв удалить соответствующие им CSS свойства («background») из файла стилевого оформления темы WordPress (style.css), который обычно расположен по следующему пути:
/wp-content/themes/Organic/style.css
Кроме этого, нашлось несколько изображений, которые практически не играли никакой роли в дизайне блога, но зато требовали дополнительные http запросы для их загрузки. Поэтому, самым первым действием, призванным сделать сайт быстрым за счет уменьшения количества http запросов, была чистка CSS файла от лишних фоновых изображений, загрузка которых не являлась необходимой.
К слову сказать, таким образом мне удалось сэкономить до 20 http запросов при загрузке любой страницы моего блога, удалив, соответственно, из CSS файла около 20 фоновых изображений (ненужных или малозначительных). Для проведения подобной операции вам нужно будет подключиться к своему ресурсу через FTP клиент и открыть на редактирование файл style.css из указанной выше папки.
Далее вы производите поиск по файлу CSS с помощью средств того редактора, в котором вы открыли style.css (Html, CSS и PHP редактор Notepad++ советую). Искать следует по названию того графического файла изображения, который вы желаете удалить. Находите строчку с CSS свойством «background», из-за которой подгружается это фоновое изображение и удаляете его из CSS кода. Проверяете через Page Speed корректность проведенных вами действий по получению быстрого сайта и снижению количества http запросов.
Таким образом, вы проведете начальный этап оптимизации изображений для сайта, пока еще без их сжатия. На втором этапе ускорения сайта вам нужно будет уже поработать с теми изображениями, которые вы все-таки решите оставить. Тут можно сделать две вещи для получения быстрого сайта — оптимизировать размер каждого отдельного изображения через Page Speed, а так же объединить некоторые фоновые изображения из файла стилевого оформления в так называемые CSS спрайта (sprites).
Что такое оптимизация (сжатие) изображений вы уже, наверное, знаете, во всяком случае, я рассказывал про онлайн сервисы, позволяющие проводить оптимизацию (сжатие) изображений на сайте. Но гораздо проще будет воспользоваться возможностями самого Page Speed, тем более, что он сжимает изображения очень эффективно и без потери качества (иногда даже в пару раз уменьшает размер изображений и соответственно и убыстряет сайт).
Что же касается CSS спрайтов, то это такой способ объединения нескольких файлов фоновых изображений, используемых в вашем CSS файле в один единственный графический файл, а затем уже с помощью CSS свойств настроить показ в нужном месте сайта только определенного участка этого большого файла (CSS спрайта). Спрайт может выглядеть, например, так:
Догадайтесь, кому этот CSS спрайт может принадлежать (подсказываю — поисковой системе Googl.ru). В принципе, создавать CSS спрайт с нуля в каком-либо графическом редакторе очень сложно, ибо потом нужно будет в файле стилевого оформления очень четко описать позиции того или иного рисунка на большом изображении CSS спрайта.
Работа эта кропотливая, утомительная и нервная, но, слава богу, есть ряд онлайн сервисов позволяющих автоматизировать создание Css Sprites до такой степени, что вам только останется скачать получившийся спрайт и поменять некоторые CSS свойства (причем, вам будет четко указано что и на что нужно будет поменять).
Но о CSS спрайтах мы поговорим, наверное, уже в следующей статье (просто не получится подробно рассказать о спрайтах в двух слова), а сейчас хочу сказать несколько слов о том, как в Page Speed сжать изображения для быстрого сайта.
Да, в принципе, точно так же, как и мы чуть ранее сжимали CSS файлы средствами Page Speed. Только проделать все тоже самое нужно будет для другой строчки Page Speed под названием «Optimize images». Щелкаете по плюсику рядом с «Optimize images» и просматриваете список тех изображений на открытой в браузере странице вашего ресурса, которые по мнению Page Speed можно оптимизировать (сжать):
Далее вам нужно будет щелкнуть по ссылке «Save as» и скачать оптимизированное (сжатое) средствами Page Speed изображение на свой компьютер. В первую очередь стоит сжать все изображения, которые входят в состав вашего шаблона, а следовательно подгружаются на каждой странице. Даже немного сжав изображения шаблона вы сможете повлиять на общую скорость загрузки сайта. К тому же, изображения шаблона, как правило, сжимаются в Page Speed очень сильно (до нескольких раз, во всяком случае для моей темы WordPress).
Сжатие скриптов для получения быстрого сайта
Кроме изображений, с помощью Page Speed вы можете так же сжать (оптимизировать) скрипты (JavaScript, jQuery), которые подгружаются в браузеры пользователей с вашего web сервера. Сделать это можно в строке Page Speed под названием «Minify JavaScript»:
