Что такое скорость загрузки Web страницы? Это время, за которое пользователь получает полностью загруженную страницу.

От чего зависит это время? От того, насколько долго запрос пользователя обрабатывается на сервере. Но не только.

Сегодня типичная Web страница - это несколько десятков картинок, парочка CSS файлов, до десятка JavaScript файлов и HTML размером в 50…100 Кб. И для загрузки каждого из этих компонент браузер посылает на сервер отдельный запрос.

Ясно, что загрузка одной только странички, сгенерированной на серверной части (на Вашем PHP, Python, ASP и т.п.) займет малую часть времени. Большинство времени и ресурсов отнимет загрузка всех остальных компонент страницы.

Клиентская оптимизация призвана уменьшить время полной загрузки страницы.

Почему клиентская оптимизация?

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

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

HTML

Размер современных страниц может быть очень большим из-за сложной верстки и большого количества элементов. Чем больше размер HTML, тем больше времени понадобиться на его отдачу клиенту (учтите также бОльший трафик).

Используйте сжатие

Практически все современные браузеры поддерживают сжатие gzip или deflate. Вы можете выставить уровень сжатия на сервере в зависимости от того, что для Вас критичнее - трафик или процессорные ресурсы отдающего сервера.

Многие известные Web серверы имеют модули для сжатия:

• nginx ngx_http_gzip_module
• lighttpd mod_compress
• Apache httpd mod_deflate

Кроме того, некоторые платформы имеют встроенные средства сжатия (например, zlib в PHP). В таком случае предпочтительнее использовать именно их, т.к. бекенд-серверов обычно больше, чем фронт-серверов.

Минимизируйте HTML

• Не используйте инлайн стилей, выносите все стилевые инструкции в CSS
• Выносите весь Javascript во внешние файлы
• Минимизируйте размер верстки

CSS и Javascript

Есть ряд преимуществ, которые предоставляют внешние CSS и Javascript файлы. Пользуясь ими, можно намного увеличить эффективность работы клиентского браузера:

Внешние файлы

Не используйте стилей и JS скриптов внутри HTML. Выносите всё во внешние файлы, это поможет использовать преимущества клиентского кеширования

Клиентское кеширование

Устанавливайте HTTP заголовки Expires и Cache-control для того, что-бы Ваши CSS/JS файлы кешировались на клиентском браузере. Т.о. клиент будет запрашивать уникальные файлы только один раз на время действия кеша.

Pack и minify

Используйте механизм minify для получения более компактного размера JS и CSS. Minify подразумаевает вырезание всех коментарием из файлов, а также всех необязательных пробельных символов (переносов, табов и т.д.).

Для Javascript также можно воспользоваться упаковкой, т.е. изменением названий переменных и функций на более короткие (например, a, b, c…)

Существует ряд инструментов для автоматизации упаковки и минифаинга, например: Библиотека Minify

Сжатие и склеивание

Склеивайте все CSS/JS файлы в один, т.о. у Вас будет всего два внешних файла для страницы: 1 javascript и 1 CSS.

Используйте сжатие gzip либо deflate для уменьшения трафика и увеличения скорости загрузки файлов.

Загрузка CSS/JS

Загружайте CSS файлы вверху страницы (в теге HEAD), а Javascript файлы в самом низу страницы (перед закрывающимся тегом BODY). Это позволит максимально быстро отрисовать страницу посетителю, а уже потом загрузить необходимые скрипты. Не забывайте, что первое впечатление о сайте очень важно, и Ваш посетитель не будет ждать две минуты перед белым экраном загрузки различных скриптов, он просто уйдет.

Картинки

Большую часть в сумарном размере всех компонент страниц обычно составляют картинки. Им следует уделить особое внимание.

Выбирайте правильный формат

Уделите особое внимание выбору формата картинок:

• GIF - ограниченная палитра, что позволяет создавать картинки малого размера. Их удобно использовать для иконок и картинок для верстки. Помимо этого, GIF позволяет использовать прозрачность.
• JPEG - хорошо подходит для многоцветных фотографий. Предоставляет возможность прогресивной загрузки картинки (сначала грузится превью худшего качества, а потом полное изображение)
• PNG - полнофункциональный формат. Может использовать как ограниченную так и полную палитру. Позволяет использовать прозрачность. Стоит использовать только в крайних случаях, например когда необходима градиентная прозрачность.

Устанавливайте заголовки кеширования

Опять таки заголовки Cache-control и Expires помогут добиться того, что картинки будут загружаться браузером только один раз на время действия кеша.

CSS спрайты

Большое количество мелких картинок на одной странице могут стать ужасом для отдающего сервера. Не так страшен большой трафик, как огромное количество одновременных соединений. Этого позволит избежать подход CSS спрайтов: Все картинки на сайте склеиваются в один большой файл, а отображение их достигается путем использования стилей (в частности background-image и background-position). В этом случае вместо большого количества соединений, браузер будет получать весь пакет картинок в одном файле за одно соединение.

Динамические картинки и keep-alive

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

Итог

Главный принцип клиентской оптимизации - это сжатие и кеширование:

1. Минимизируйте и сжимайте всю статику
2. Устанавливайте заголовки кеширования всего статического содержимого

Что можно сделать еще?

Статьи по теме

• Оптимизация клиентской части с Google Page Speed
• Оптимизация картинок для Web
• Оптимизация постраничного вывода в MySQL
• Оптимизация баннерной рекламы
• Оптимизация производительности Apache