Как увеличить скорость загрузки страницы? Часть 2: «быстрая» страница

Уменьшение изображений
Оптимизация видео
Что еще?



Это «быстрая» страница – ускоренная версия «медленной». Разберемся, как увеличить скорость загрузки с плохой до нормальной.

Загрузим ту же иллюстрацию, что и на «медленной» странице, но предварительно выполним ее сжатие.

Сервисов для оптимизации изображений существует множество. Мне нравится TinyPNG, он позволяет сжимать изображения форматов JPEG и PNG практически без потери качества.

Как видно, изображение уменьшилось практически вдвое. Добавим его на страницу и протестируем скорость. Для тестов используем PageSpeed Insights.

76/100 против 71/97 на «медленной» странице. Сжатие иллюстрации позволило увеличить скорость загрузки на 5 единиц. Разница в быстроте будет более ощутимой при большем количестве изображений.

Помимо TinyPNG можно также воспользоваться другими сервисами:

• Optimizilla – практически полный аналог Tiny с поддержкой русского языка и возможностью управлять качеством сжатия
• BIRME – позволяет изменять пропорции изображения и уровень компрессии
• Resize Pic Online – имеет русскоязычный интерфейс и допускает загрузку фото весом до 15 Мб
• ezGIF – незаменим при работе с гифками

По сравнению с иллюстрацией, видео с YouTube «затормозило» страницу намного больше. Это связано с тем, что интеграция ролика была произведена посредством API проигрывателя IFrame.

Вот так выглядит фрагмент кода с видеороликом на «медленной» странице:

При использовании тега <iframe> загружается большое количество кода JavaScript YouTube: до 500 Кб в сжатом виде и около 1,5 Мб в распакованном. Даже при асинхронном режиме загрузки, такой объем перегружает канал, что очень «тормозит» страницу.

Эта проблема с видео решается нехитрым способом, суть которого отложить загрузку плеера до этапа взаимодействия с ним пользователя. Т.е., сам плеер загружается не в момент открытия страницы, а в тот момент, когда пользователь желает воспроизвести ролик. При реализации этого метода видео «прячется» за баннер.

71/99 в то время, как на «медленной» странице этот показатель был всего 46/98.

Для наглядности использования этого приема уменьшения «веса» видео, приведу пример кода со стороннего сайта:

Некоторые CMS имеют предустановленные решения. В Tilda, к примеру, для размещения видео с ускоренной загрузкой существует отдельный блок – VD11. А пользователи WordPress могут установить специальный плагин – Lazy Load for Videos.

Оптимизация кода
Общее правило: CSS-код вставляется в хедер страницы, а JavaScript располагается внизу. В этом случае вначале загружается контент, и только после этого обрабатываются скрипты. Также из кода стоит удалить лишние пробелы, комментарии и пр. Для этого существуют автоматические сервисы, такие как CSS Compressor.

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

Использование сжатия GZIP
Файлы передаются браузеру в заархивированном виде, что уменьшает нагрузку на канал и ускоряет загрузку. Уровень компрессии можно установить в пределах от 1 до 9, оптимальной считается отметка 5.