© 2018-2019 Million Miles
БЛОГ MILLION MILES
декабрь, 2018
декабрь, 2018
Как увеличить скорость загрузки страницы? Часть 2: «быстрая» страница
Подробное описание сжатия изображений и оптимизации видео. А также краткий перечень других популярных методов ускорения работы сайта
Уменьшение изображений
Оптимизация видео
Что еще?
Это «быстрая» страница – ускоренная версия «медленной». Разберемся, как увеличить скорость загрузки с плохой до нормальной.
Оптимизация видео
Что еще?
Это «быстрая» страница – ускоренная версия «медленной». Разберемся, как увеличить скорость загрузки с плохой до нормальной.
Уменьшение изображений
Загрузим ту же иллюстрацию, что и на «медленной» странице, но предварительно выполним ее сжатие.
Сервисов для оптимизации изображений существует множество. Мне нравится TinyPNG, он позволяет сжимать изображения форматов JPEG и PNG практически без потери качества.
Сервисов для оптимизации изображений существует множество. Мне нравится TinyPNG, он позволяет сжимать изображения форматов JPEG и PNG практически без потери качества.
“
Как это работает?
Когда Вы загружаете файл PNG (Portable Network Graphics), похожие цвета в Вашем изображении объединяются. Эта техника называется «квантование». Благодаря уменьшению количества цветов 24-битные файлы PNG можно преобразовать в намного меньшие 8-битные индексированные цветные изображения. Все ненужные метаданные тоже удаляются. В результате получаются улучшенные файлы PNG со 100% поддержкой прозрачности.
Когда Вы загружаете файл PNG (Portable Network Graphics), похожие цвета в Вашем изображении объединяются. Эта техника называется «квантование». Благодаря уменьшению количества цветов 24-битные файлы PNG можно преобразовать в намного меньшие 8-битные индексированные цветные изображения. Все ненужные метаданные тоже удаляются. В результате получаются улучшенные файлы PNG со 100% поддержкой прозрачности.
Как видно, изображение уменьшилось практически вдвое. Добавим его на страницу и протестируем скорость. Для тестов используем PageSpeed Insights.
76/100 против 71/97 на «медленной» странице. Сжатие иллюстрации позволило увеличить скорость загрузки на 5 единиц. Разница в быстроте будет более ощутимой при большем количестве изображений.
Помимо TinyPNG можно также воспользоваться другими сервисами:
Помимо TinyPNG можно также воспользоваться другими сервисами:
- Optimizilla – практически полный аналог Tiny с поддержкой русского языка и возможностью управлять качеством сжатия
- BIRME – позволяет изменять пропорции изображения и уровень компрессии
- Resize Pic Online – имеет русскоязычный интерфейс и допускает загрузку фото весом до 15 Мб
- ezGIF – незаменим при работе с гифками
Оптимизация видео
По сравнению с иллюстрацией, видео с YouTube «затормозило» страницу намного больше. Это связано с тем, что интеграция ролика была произведена посредством API проигрывателя IFrame.
“
API проигрывателя IFrame позволяет встраивать проигрыватель видео YouTube на сайт и управлять использованием JavaScript. В отличие от API Flash и JavaScript, требующих вставки объекта Flash на веб-страницу, API IFrame отправляет содержимое в тег <iframe> страницы сайта. Благодаря этому появляется больше возможностей использования API, так как YouTube может выступать в качестве проигрывателя HTML5 для мобильных устройств, не поддерживающих технологию Flash.
Вот так выглядит фрагмент кода с видеороликом на «медленной» странице:
<iframe width="960" height="540"
src="https://www.youtube.com/embed/736fiBMtADg"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>При использовании тега <iframe> загружается большое количество кода JavaScript YouTube: до 500 Кб в сжатом виде и около 1,5 Мб в распакованном. Даже при асинхронном режиме загрузки, такой объем перегружает канал, что очень «тормозит» страницу.
Эта проблема с видео решается нехитрым способом, суть которого отложить загрузку плеера до этапа взаимодействия с ним пользователя. Т.е., сам плеер загружается не в момент открытия страницы, а в тот момент, когда пользователь желает воспроизвести ролик. При реализации этого метода видео «прячется» за баннер.
Эта проблема с видео решается нехитрым способом, суть которого отложить загрузку плеера до этапа взаимодействия с ним пользователя. Т.е., сам плеер загружается не в момент открытия страницы, а в тот момент, когда пользователь желает воспроизвести ролик. При реализации этого метода видео «прячется» за баннер.
71/99 в то время, как на «медленной» странице этот показатель был всего 46/98.
Для наглядности использования этого приема уменьшения «веса» видео, приведу пример кода со стороннего сайта:
Для наглядности использования этого приема уменьшения «веса» видео, приведу пример кода со стороннего сайта:
<div class="wrapper" onclick="$(this).replaceWith('<iframe width=\'100%\' height=\'364\' src=\'http://www.youtube.com/embed/w-7rVHZUeLE?autoplay=1&rel=0\' frameborder=\'0\' allowfullscreen></iframe><br/>');">
<img class="youtube_preview" src="http://clubsar.ru/assets/templates/turfirma/main-video.jpg" width="100%">
</div>Некоторые CMS имеют предустановленные решения. В Tilda, к примеру, для размещения видео с ускоренной загрузкой существует отдельный блок – VD11. А пользователи WordPress могут установить специальный плагин – Lazy Load for Videos.
Что еще можно предпринять для того, чтоб сайт «летал»?
Оптимизация кода
Общее правило: CSS-код вставляется в хедер страницы, а JavaScript располагается внизу. В этом случае вначале загружается контент, и только после этого обрабатываются скрипты. Также из кода стоит удалить лишние пробелы, комментарии и пр. Для этого существуют автоматические сервисы, такие как CSS Compressor.
Кэширование
Настраивается на уровне сервера, увеличивает скорость загрузки при повторных посещениях страницы. При первом подключении браузеру сообщается список статичных элементов ресурса и время их хранения. В результате, при последующих запросах браузер не будет загружать их с сервера, вместо этого использует локальную копию.
Использование сжатия GZIP
Файлы передаются браузеру в заархивированном виде, что уменьшает нагрузку на канал и ускоряет загрузку. Уровень компрессии можно установить в пределах от 1 до 9, оптимальной считается отметка 5.
Общее правило: CSS-код вставляется в хедер страницы, а JavaScript располагается внизу. В этом случае вначале загружается контент, и только после этого обрабатываются скрипты. Также из кода стоит удалить лишние пробелы, комментарии и пр. Для этого существуют автоматические сервисы, такие как CSS Compressor.
Кэширование
Настраивается на уровне сервера, увеличивает скорость загрузки при повторных посещениях страницы. При первом подключении браузеру сообщается список статичных элементов ресурса и время их хранения. В результате, при последующих запросах браузер не будет загружать их с сервера, вместо этого использует локальную копию.
Использование сжатия GZIP
Файлы передаются браузеру в заархивированном виде, что уменьшает нагрузку на канал и ускоряет загрузку. Уровень компрессии можно установить в пределах от 1 до 9, оптимальной считается отметка 5.
Вместо вывода
__________________
27 декабря 2018
