Моментальная загрузка десктопных и мобильных сайтов: часть 1

Привет, Хабровчане! Сегодня поговорим об оптимизации скорости загрузки сайта. Это первое на что обращает внимание пользователь особенно при входе с мобильных устройств. Какие проблемы ведет за собой низкая скорость сайта: — снижение конверсии (исследование Walmart); — уменьшение охвата аудитории; — увеличение показателя отказов; — снижение доступности сайта; — снижение скорости индексации поисковыми роботами.

В цикле статей рассмотрим этапы и способы оптимизации сайтов

1. Анализ и оценка текущего состояния сайта.
2. Инструменты и подходы к уменьшению растровых изображений.
3. Уменьшение векторных изображений.
4. Минимизация количества запросов.
5. Оптимизация шрифтов.
6. Кэширование.
7. Структура веб-страниц.
8. Использование CDN.
9. Оптимизация кода CSS, HTML и JavaScript.
10. Улучшение удобства использования.

1. Анализ и оценка текущего состояния сайта

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

Page Speed Insights измеряет скорость загрузки веб-страниц. URL проверяется дважды – с помощью обычного и мобильного агента пользователя. Оценка PageSpeed может составлять от 0 до 100 баллов. Чем больше оценка – тем лучше. Если страница набрала более 85 баллов, значит она загружается быстро.

Приемлемым результатом можем считать оценку: 70-80 баллов.

Обратите внимание, что PageSpeed Insights постоянно развивается, поэтому по мере добавления новых правил или усовершенствования аналитических алгоритмов оценка иногда меняется.

• время загрузки объектной модели документа: общее время с момента запроса страницы до момента прорисовки.
• время полной загрузки страницы: общее время с момента запроса страницы до ее полного отображения в браузере.

Каждая рекомендация имеет индикатор приоритета, соответствующий ее важности:

Для автоматизации процесса отладки можно воспользоваться PageSpeed Tools.

С помощью сервиса Pingdom измеряем скорость доступа к фактической странице, производительность, общие результаты по странице, а также в отдельных вкладках можем оценить правильность настройки DNS серверов и сделать проверку пинга до хоста или ip адреса. Тест удобен для оценки показателей до и после оптимизации.

Вкладка Networks в DevTools позволяет оценить порядок загрузки, скорость, размер страницы и эмулировать различные виды соединения. При повторном анализе желательно отключать кэш для улучшения производительности первого пользовательского визита («холодная загрузка»).

Как базовые ориентир для адаптивного сайта возьмем следующие показатели:

• Мобильная версия сайтаСкорость загрузки: 2-3 сек Размер страницы: 1 Мб или меньше (если возможно 500 Kб или меньше)

• Десктопная версияСкорость загрузки: 2-3 сек Размер страницы: 2 Мб или меньше

2. Инструменты и подходы к уменьшению растровых изображений

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

Но оптимально использовать специализированные программы и веб-сервисы, три из них разберем ниже. В качестве эксперимента были взяты одинаковые наборы изображений GIF, PNG и JPG, каждое из которых является образцом веб-графики.

Простое в использовании десктопное приложение с открытым кодом ImageOptim под MacOS позволяет без потерь качества уменьшить размер на 10-30% GIF, JPEG и PNG. Это достигается удалением метаданных и ненужных цветовых профилей без перекодирования или уменьшения количества цветов.

Интерфейс ImageOptim также весьма удобен. Перетащите один файл, группу или папку и программа начнет сжимать их с заменой исходных файлов и отображением результатов.

Кроме сжатия без потерь стандартных форматов возможности программы FileOptimizer достаточно обширны. Она также уменьшает исполняемые файлы, архивы, документы Microsoft Office, PDF и многое другое. Способ работы с программой аналогичен ImageOptim.

PUNYpng — веб-сервис, который применяет сжатие на 16-32% без потерь качества. Регистрация бесплатна, но действуют ограничения: можно загрузить только 15 изображений в пакетном режиме, каждое не более 150 кб. За $2 в месяц, можно проапгрейдить аккаунт до PRO, позволяющий улучшить сжатие и загружать больше файлов.

Инструмент Платформа PNG, % JPG, % GIF, % ImageOptim Mac 17,8 18,3 16,2 FileOptimizer Win 42,2 17,7 15,9 PUNYpng Web 32,1 27,5 16,1 Полный обзор инструментов для сжатия изображений.

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

— утилита командной строки и редактор картинок с большим набором функций (инструкция по настройке). — ответвление ImageMagick обеспечивающую лучшую производительность благодаря поддержке многопроцессорной обработки. — создает и оптимизирует GIF-изображения. — оптимизирует JPEG-изображения. — сжимает PNG с потерями.

Делать бездумно поддержку Retina может оказаться ресурсозатратным, поэтому предварительно необходимо убедиться в необходимости ее поддержки. Для четкого отображения изображения 100x100 на экране, скажем iPhone, нужно подготовить изображение размером 200x200 и путем сжатия масштабов отобразить в размере 100x100.

Конечно, размер файла используемого изображения становится больше, поэтому нужно использовать сжатие изображений описанное выше. Для JPG установите уровень сжатия примерно 30-50. Если есть опасения, что будет теряться качество, то лучше экспериментировать с уровнем сжатия, чтобы найти оптимальный.

Аналогичен атрибуту srcset, поддерживается пока только в браузерах Chrome, Firefox и Opera.

Использование спрайтов позволяет повысить производительность, уменьшить вес графики и организовать элементы интерфейса. Благодаря однократной загрузке сервером сразу всех элементов (пиктограмм или кнопок) в одном файле. А с помощью CSS можно отображать каждый элемент отдельно. Для автоматизации процесса создания спрайтов можно воспользоваться фреймворком Compass или сборщиком Grunt.

Существует альтернативный вариант генерации CSS спрайтов, на основе data:uri. Он максимально минимизируется кол-во обращений к серверу и автоматизирует процесс сборки и перегенерации спрайтов.

Но у него есть ограничения: закодированные таким образом в Base64 данные примерно на 33% больше по размеру, чем их бинарный эквивалент.