Многие, кто внимательно изучают 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. Оптимизация изображений
Один из самых важных пунктов, который позволит поднять оценку на несколько десятков. Это шаг можно разделить на несколько подпунктов:
- Замена всех иконок на svg-иконки или использование иконочного шрифта, например http://fontawesome.io.
- Большие непрозрачные изображения использовать в формате .jpg
- Картинка не должна быть намного больше своего контейнера. Если контейнер размером 200 на 200 - не нужно размещать в него картинку 800 на 800. Лучше обрежьте ее в Photoshop и перезалейте.
- Выкачать изображения и сжать сервисами 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.
