Советы по оптимизации веб-сайтов
166IT блог --- Советы по оптимизации веб-сайтов
Привет, сегодня я хотел бы рассказать про некоторые методы, которые я использую на своих сайтах для увеличения их быстродействия. В качестве объективной оценки быстродействия страниц сайта, я использую инструмент PageSpeed, который вы можете использовать на странице PageSpeed Insights.
1. Используем CSS-спрайты
Техника CSS-спрайтов находит широкое применение на современных сайтах и заключается в объединении нескольких картинок в одну и дальнейшей настройки свойства background-position.
На своем сайте я использую спрайты везде, где это возможно. Вы можете посмотреть наглядный пример для темной темы сайта.
Давайте в качестве примера рассмотрим простую кнопку, для которой требуются три состояния - по умолчанию, при наведении курсора мыши и активное состояние (например, когда кнопка нажата). На рисунке ниже показаны все три состояния, объединенные в один файл. Стоит отметить, что данный пример лучше реализовать с помощью CSS3 и не использовать для этого картинки, но в данном случае я решил не усложнять пример.
По умолчанию используется более темный цвет кнопки, когда пользователь наводит курсор кнопка подсвечивается, когда он щелкает по ней - подсвечивается еще сильнее. Соответственно за все три состояния отвечает одна картинка, просто, при каждом действии пользователя меняется ее положение. На CSS подобное поведение реализуется с помощью псевдо-селекторов hover и active:
button {
background:url(../img/my_image.png) 0 0;
}
button:hover {
background-position: 0 -67px;
}
button:active {
background-position: 0 -134px;
}
В данном коде мы сначала задаем элементу меню картинку, которую используем в качестве фонового изображения. Затем, с помощью псевдо-селекторов и свойства background-position изменяем позицию данного фона:
Выгода от использования CSS-спрайтов очевидна - мы используем одну картинку вместо трех, поэтому снижается не только общий вес изображений, но и скорость их загрузки браузером, т.к. нужно загружать одну картинку, а не три!
При использовании спрайтов главное не переусердствовать, например приведенные мной выше две картинки я не объединил в один спрайт, а просто вставил их по отдельности на страницу. Я рекомендую использовать спрайты для иконок и картинок, используемых неоднократно на страницах сайта, как правило в качестве навигации и меню. Не используйте спрайты для отдельных рисунков и изображений.
Что касается PageSpeed, то выгода в нем составит от 1 до 10%, в зависимости от количества иконок используемых на сайте.
2. Кэш браузера
Одним из самых мощных средств по оптимизации и увеличению быстродействия загрузки страниц сайта является использование кэша браузера.
Кэш браузера представляет собой локальное хранилище файлов, скриптов, изображений, которые браузер загружает с различных сайтов. Для включения кэширования на JavaScript, ASP.NET или PHP существует множество способов, но рекомендую вам использовать специальную настройку для кэширования в конфигурационном файле .htaccess, которая выглядит следующим образом:
<IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access 2 days" ExpiresByType application/javascript "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" ExpiresByType text/css "access plus 1 year" ExpiresByType text/x-javascript "access 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/x-icon "access 1 year" ExpiresByType application/x-shockwave-flash "access 1 year" </IfModule>
В данном коде используется модуль mod_rewrite, который устанавливает срок кэширования различного типа содержимого сайта: JavaScript'ов, таблиц стилей CSS, изображений различных форматов и содержимого типа Flash.
При использовании кэширования нужно быть осторожным при обновлении сайта. Например, в приведенном выше коде, таблицы стилей CSS должны кэшироваться сроком на 1 год. При этом, если вы захотите внести изменения в таблицу стилей, которая уже кэширована браузером пользователя, ваша попытка потерпит неудачу, т.к. браузер будет загружать данную таблицу из кэша (если конечно пользователь специально не почистил кэш).
Для обхода этой проблемы вы можете указывать версии таблиц стилей и скриптов при их подключении к странице. Например:
<link rel="stylesheet" type="text/css" href="../css/style.css?v1014"/>
<link rel="stylesheet" type="text/css" href="../css/lmenu_style_net.css?v1013"/>
<link href="../css/code.css" rel="stylesheet" type="text/css" />
<script src="../js/pw_script.js?v1013" type="text/javascript"></script>
Как видите, для таблиц стилей в атрибуте href и для скриптов в атрибуте src в конце через вопросительный знак указан номер версии. Допустим, если вы захотите изменить скрипт pw_script.js, вы можете внести изменения в данный файл и указать другой номер версии. Теперь браузер пользователя снова перекэширует этот скрипт.
На счет PageSpeed - включение кэширования на сайте может увеличить рейтинг от 5 до 30%.
3. Оптимизация изображений
Оптимизацию изображений можно разделить на 2 составляющие: выбор правильного формата изображения и использование сжатия.
Что касается формата изображения, то тут вы должны руководствоваться типом его содержимого. Например, если изображение состоит из штриховых линий или содержит большие области однородной заливки, для него лучше использовать формат GIF или PNG. PNG лучше подходит в тех случаях, когда требуется использовать более одного уровня прозрачности. Фотографии следует всегда сохранять в формате JPEG.
Используя сжатие, можно уменьшить размер изображения одним из способов: уменьшить объем (понизить разрешение) или уменьшить контрастность. Оба эти метода напрямую или почти всегда отрицательно сказываются на качестве изображения, поэтому их следует применять с осторожностью.
Эти два метода уменьшают размер файла изображения по-разному. При понижении разрешения количество пикселов, для которых будет выполнено сжатие, уменьшается логарифмически — иными словами, быстро относительно постепенного уменьшения размеров изображения. Слегка или умеренно уменьшить контрастность — тоже эффективный способ, так как он увеличивает диапазон яркости изображения, что подходит как для форматов сжатия с потерями (JPEG), так и для форматов сжатия без потерь (GIF, PNG).
Если перед вами запущенная программа Photoshop и набор изображений, которые требуется обработать для последующего использования при создании сайта, вам остается решить вопрос о показателе качества выходных данных.
В случае JPEG-изображений показатель качества контролируется явно кодеком JFIF. В случае PNG- и GIF-изображений качество является более субъективным показателем; специалист уменьшает качество таких изображений понижая глубину цвета и индексируя цвета, которые должны сохраниться (при этом могут появиться искажения). В общем случае, самые лучшие настройки для GIF-изображений и низкокачественных PNG-изображений вы найдете в режиме Indexed Color при глубине цвета 2, 16, 64 или 256.
После того как вы выберете глубину цвета для изображения, которому требуется сжатие без потерь, вам необходимо будет выбрать метод дизеринга. При индексировании цветов изображения Photoshop предлагает четыре варианта, которые приведены ниже в соответствии с качеством выходных данных при низкой глубине цвета:
Pattern
Diffusion
Noise
None
Такая иерархия в некотором смысле субъективна; чем ниже контрастность изображения или число значимых цветов, тем меньше вероятность того, что случайный пользователь заметит очевидно неправильный выбор палитры или настроек дизеринга.
В качестве примера приведу вам два изображения JPEG: изображение 1 и изображение 2. Как видите, второе изображение сильно сжато, вплоть до того что видны артефакты на границе окна, но при этом более-менее видно содержимое консоли. При этом первое изображение весит 44 кб, а второе всего 16 кб. Можно выбрать промежуточный вариант и сохранить изображение в PNG без потери качества - изображение 3. Этот вариант весит 26 кб и содержит картинку без артефактов.
4. Сжатие скриптов и стилей
Сжатие скриптов и стилей выполняется удалением лишних пробелов из данных файлов. На первый взгляд это может показаться несущественной оптимизацией, но взгляните на библиотеку jQuery в развернутом виде и сжатом.
В развернутом виде библиотека весит 180 кб, а в сжатом 78 кб, экономия более чем на 100 кб при одинаковой функциональности! Удалять пробелы вручную может показаться крайне утомительным занятием, поэтому я рекомендую использовать для этого специальные онлайн-сервисы (JS Compressor, CSS Compressor). Для приложений ASP.NET можно включить сжатие на программном уровне, как это описано в статье Сжатие кода JavaScript и CSS.
Очевидно, что использовать сжатие подобным образом рекомендуется для больших библиотек (наподобие фреймворков jQuery, Angular, Reactи т.п.) и таблиц стилей. В зависимости от количества скриптов и стилей на сайте, подобная оптимизация может повысить рейтинг PageSpeed до 10%.
