Как оптимизировать лендинг на 85+ google pagespeed

Многие, кто внимательно изучают Google Adwords, знает, что Adwords оценивает рекламируемую страницу по 10-ти бальной шкале. Оценивается как соответствие контента рекламному объявлению, информативность так и внутренняя оптимизацию сайт.

Как мне удалось снизить цену клика в Adwords на 3 гривны, с 14-ти до 11-ти?

Я добился в Google Pagespeed зеленой отметки. Потратив на работу по оптимизации сайта всего несколько часов и начал экономить по 3 грн на клике. На дневной бюджет приходилось около 150 кликов при цене в 14 грн за клик. Можете посчитать, сколько я сэкономил в неделю, или даже в месяц. Все свои шаги по оптимизации лендинга я решил уместить в одной статье. Это стандартные действия, но их, почему-то, большинство просто не делает, просто пропускает. Это шаги, которые позволят сервису google pagespeed показать 85+ вашему сайту.

Для проверки скорости сайта я пользовался двумя сервисами: google pagespeed и gtmetrix. Ориентировался я на google pagespeed, из-за рекомендаций самого google. Хотя с gtmetrix работать намного приятнее. Чтоб максимально доступно объяснить шаги, я скопировал один из попавшихся мне лендингов и установил на обычный хостинг. Домен тестовый.

После анализа получил такие данные: для мобильных оценка - 50, для десктопа - 55 (Рис.1)

Рис.1 Текущие оценки лендинга по google pagespeed

Ниже скрин ресурса откуда я скопировал лендинг. На нем показатели 46 и 55 на мобильном и десктопе соответственно(Рис.2). Сразу можем сделать вывод о том, что хостинг тоже отыгрывает роль в скорости работы сайта.

Рис.2 Оценки лендинга-оригинала по google pagespeed

Пройдемся пошагово по пунктам оптимизации сайта

Шаг №1. Оптимизация изображений

Один из самых важных пунктов, который позволит поднять оценку на несколько десятков. Это шаг можно разделить на несколько подпунктов:

1. Замена всех иконок на svg-иконки или использование иконочного шрифта, например http://fontawesome.io.
2. Большие непрозрачные изображения использовать в формате .jpg
3. Картинка не должна быть намного больше своего контейнера. Если контейнер размером 200 на 200 - не нужно размещать в него картинку 800 на 800. Лучше обрежьте ее в Photoshop и перезалейте.
4. Выкачать изображения и сжать сервисами https://compressor.io или https://tinypng.com. Лично я пользуюсь первым.

В случае с этим лендингом, практически все изображения были оптимизированы, все иконки на сайте в формате svg или выведены при помощи иконочного шрифта. Поэтому имеем незначительное улучшение. После анализа получил такие данные: для мобильных оценка - 53, для десктопа - 66 (Рис.3)

Рис.3 Оценки лендинга по google pagespeed после первого шага

Шаг №2. Используйте кеш браузера

Используйте кеширование для стилей, скриптов, шрифтов и изображений. На многих хостингах есть функция кеширование данных. Вам нужно просто поставить галочки на нужных позициях. Если же хостинг не предоставляет такую функцию - можно настроить кеширование самому в файле .htaccess(для пользователей apache) или в файле nginx.conf(для тех у кого NGINX). Что писать в файлах .htacces или nginx.conf для настройки кеширования можно посмотреть в документации своего хостинг-провайдера.

После анализа получил такие данные: для мобильных оценка - 74, для десктопа - 85 (Рис.4)

Рис.4 Оценки лендинга по google pagespeed после второго шага

Шаг №3. Сократите Javascript

Убедитесь, что весь js код не требует доработок. С помощью сервисов, например, https://jscompress.com, сократите ваш код (Рис.5)

Рис.5 Сжатие файла common.js

Закиньте его в аналогичный файл название_неоптимизированого_файла.min.js (Рис.6)

Рис.6 Исходный и сжатый js

Если вам все-же понадобится править код - правьте его в стандартном файле, сжимайте через сервис и записывайте в оптимизированный(min.js). Помните, что js подключать нужно в самом низу страницы (Рис.7)

Рис.7 Подключение js

На мобильных ситуация осталась такая же - 74, на десктопах выросла до 87(Рис.8)

Рис.8 Результат после шага №3

Шаг №4. Сократите CSS

Также убедитесь, что весь css написан и не требует правок. С помощью сервиса, например, https://cssminifier.com последовательно(Рис.9) оптимизируем каждый css файл.

Рис.9 Порядок оптимизации css на сайте

Далее, собираем все стили в один файл в той последовательности, в которой они подключены к сайту. После, все это копируем, открываем index.html, в <head></head>  пишем <style></style>  и внутрь вставляем наш минимизированный css код. Да, это некрасиво, это белое полотно, но такой подход круто работает в плане оптимизации.(Рис.10)

Рис.10 Минимизированный css в html документе

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

Рис.11 Результаты сканирования после шага №4 (мобильная версия)

Рис.12 Результаты сканирования после шага №4 (десктопная версия)

Шаг №5. Включите сжатие

После выполнения этого пункта я добился 100 из 100 на мобильном и десктопе.

Рис.13 Результаты сканирования после шага №5 (мобильная версия)

Рис.14 Результаты сканирования после шага №5 (десктопная версия)

На данной версии сайта удалось добиться оценки 100 из 100. На сайте, который я оптимизировал до этого - 87 из 100 на мобильной версии и 87 из 100 на десктопной версии.

Шаги выше помогут вам оказаться в зеленой зоне google page speed.