Quantcast
Channel: Блог front-end разработчика
Viewing all articles
Browse latest Browse all 15

Оптимизация загрузки сайтов. Часть 2 — общие советы

0
0

В предыдущем посте этой серии мы говорили о плагинах для WordPress, позволяющих снизить нагрузку на сервер. Пост тот назывался «Оптимизация WordPress». Но сегодня, продолжая тему оптимизации, я хочу назвать несколько общих приёмов, которые подойдут для любого сайта, поэтому заголовок этой серии постов поменялся.

Все эти советы направлены на снижение нагрузки на сервер, уменьшение количества трафика и времени загрузки сайта. Они снижают количество запросов к серверу и/или вес передаваемых файлов.

Оптимизируйте графику

Оптимизация графики позволит снизить вес изображений и, следовательно, уменьшить трафик между клиентом и сервером. Это важнейший этап оптимизации сайта.

Практически для всех элементов интерфейса сегодня целесообразно использовать PNG, причем не PNG-24, а куда более легкий PNG-8, если это возможно. PNG-24 — это полноцветный «вариант» PNG с поддержкой полупрозрачности и прозрачности. А PNG-8 поддерживает до 256 цветов и прозрачность (но не полупрозрачность). Используя PNG-8, выбирайте максимально низкое количество цветов, сохраняя при этом баланс качество/вес так, как вам нужно.

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

Но когда можно использовать легкий PNG-8? Всё очень просто — если вам обязательно нужна полупрозрачность и/или для нужного вам качества не хватает 256 цветов, значит придётся использовать PNG-24. В остальных же случаях ваш путь — это PNG-8. А чтобы лучше понять, когда полупрозрачность не нужна, предлагаю вам скачать мой логотип и посмотреть на него НЕ на белом фоне. Он сохранён с помощью инструмента Photoshop Save for web в формате PNG-8, в 32-х цветах, полупрозрачные пиксели заменены на белые (в цвет фона блога), а также он оптимизирован с помощью приведённого выше сервиса на 28% (а это почти 1 кб экономии).

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

Что же касается популярного в вебе GIF, то он, на мой взгляд, прячется где-то за PNG. Сегодня целесообразность его использования вместо PNG мне представляется сомнительной, но это моё личное мнение.

Используйте спрайты

Старайтесь везде, где это возможно, использовать спрайты. Спрайт — это одна картинка, включающая в себя несколько или даже множество других. Спрайты позволяют не только снизить общее число запросов к серверу (например, вместо 5 разных картинок всего 1), но и сократить их общий вес — 1 большая картинка из 5 маленьких практически всегда будет весить меньше, чем те 5 в общей сумме.

Технология использования спрайтов очень проста. Допустим, нам нужна кнопка, которая меняется при наведении (например, меняет свой цвет). Её размер равен 100х20 пикселей, а раз у неё два состояния, то и картинки будет 2. Но мы объединим их в спрайт и получим изображение размером 100×40 пикселей. За примером далеко ходить не надо, просто снова посмотрите на мой логотип. В виде кода это выглядит так.

HTML:

<a href="#">Кнопка</a>

CSS:

a {
    display:block;
    width:100px;
    height:20px;
    background:url('button.png');
    text-indent:-9999px;
}
a:hover {
    background:url('button.png') 0 -20px; /* сдвигаем фон на высоту кнопки, чтобы показать её активный вариант */
}

Это вариант для вертикального спрайта, когда картинки вплотную располагаются друг под другом. Можно использовать и горизонтальный вариант, разницы нет.

Выносите все CSS-стили и JS-скрипты в подключаемые файлы

Старайтесь, чтобы все CSS-стили и JS-скрипты на вашем сайте лежали в отдельных файлах, подключаемых в шапке страницы между <head> и </head>. CSS- и JS-код в разметке не только замедляет рендеринг страницы браузером, но и может создавать проблемы при поисковом продвижении вашего сайта.

Объединяйте все CSS-стили и JS-скрипты в один файл

Чтобы снизить число запросов к серверу, необходимо по возможности объединить все CSS- и JS-файлы, подключаемые к сайту, в один (1 файл для CSS, 1 для JS). Здесь простая арифметика — когда к странице подключено 3 CSS-файла и 4 JS, клиент делает 7 запросов к серверу, но если их объединить, то запросов будет всего 2.

Минимизируйте код

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

Используйте хранилище Google для подключения jQuery

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Кроме того, этот уже минимизированный файл отдаётся еще и с gzip-сжатием. Файл в примере выше весит 89,4 кб, но gzip сжимает его почти на 65%, в результате посетителю отдаётся файл весом 39,4 кб, который к тому же наверняка заваляется у него в кэше. А еще, каким бы крутым ни был ваш хостинг, Google всё равно окажется лучше, поэтому и файл пользователь получит быстрее и с ближайшего к себе сервера Google.

Помимо jQuery, таким же способом можно подключать Prototype, Mootools, Swfobject и другие популярные библиотеки.


Viewing all articles
Browse latest Browse all 15

Latest Images

Trending Articles





Latest Images