БЛОГ MILLION MILES
декабрь, 2018

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

Подробное описание сжатия изображений и оптимизации видео. А также краткий перечень других популярных методов ускорения работы сайта

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

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

Уменьшение изображений

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

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

“

Как это работает?
Когда Вы загружаете файл PNG (Portable Network Graphics), похожие цвета в Вашем изображении объединяются. Эта техника называется «квантование». Благодаря уменьшению количества цветов 24-битные файлы PNG можно преобразовать в намного меньшие 8-битные индексированные цветные изображения. Все ненужные метаданные тоже удаляются. В результате получаются улучшенные файлы PNG со 100% поддержкой прозрачности.

Как увеличить скорость загрузки страниц сайта? Сжатие изображений.

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

Проверка скорости загрузки страницы сайта: использование PageSpeed Insights от Google.

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

Помимо 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.

YouTube Player API Reference for iframe Embeds

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

<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 Мб в распакованном. Даже при асинхронном режиме загрузки, такой объем перегружает канал, что очень «тормозит» страницу.

В блоге Million Miles можно бесплатно разместить обратные ссылки

Узнать подробнее

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

Гугл: скорость загрузки страницы. Проверка онлайн для мобильного и ПК.

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&amp;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.

Вместо вывода

Проверить скорость загрузки страницы: использование онлайн сервиса Гугл.

__________________
25 декабря 2018

12.04.2019

Длинный Title: стоит ли использовать?

Как будет индексироваться URL и что отобразится в сниппете? Пример страницы с длинным Title

28.03.2019

Как ускорить индексацию сайта в Google и Яндекс?

Как новые или измененные страницы «скормить» поисковому роботу? И как быстро после этого они попадают в индекс?

Продолжая использовать сайт millionmiles.ru, Вы даете согласие на обработку файлов cookie и пользовательских данных.

Понятно