Совсем не много новостей

Недавно завершил работы по оптимизации лендинга. Сделал его не много быстрее и компактнее, как того желал клиент.

Поставленная задача

• Главное — добраться до зеленой зоны (90 баллов) в Google Pagespeed.
• Сделать лендинг еще компактнее.
• Скрыть левый блок с текстом на мобильной версии.
• Сделать форму мельче, чтобы на мобильном она помещалась на первом экране.

Нужно — значит сделаем.

Сервис Google Pagespeed до этого дня не особо любил, так как он не точно показывает данные и вообще слишком придирчив, зачастую даже чересчур.

Внесение изменений по дизайну

Первым делом я изменил все отступы. Тем самым сделал страницу более компактной. Так же сделал и форму более узкой, открыв больше фото менеджера.

Прописал правила отображения блока с текстом, который нужно скрывать на мобильном. Теперь этот блок виден только для пользователей с компьютеров, ноутбуков или планшетов. На смартфонах этот блок скрывается полностью.

Дальше я оптимизировал изображения. Изначально фото менеджера было в формате PNG и имело большой размер. Особенность формата PNG в том, что можно сделать картинку без фона. НО! Этот подход лучше использовать для иконок маленького размера или отдельных небольших элементов. Так как у этого формата картинок есть огромный минус — вес файла. Это фото весило 415кб! Что по меркам сайтов критически много для одной картинки.

Я уменьшил фото до нужных размеров, перевел его в формат JPG. У картинки появился фон. Я подобрал его специально по цвету, чтобы он совпадал с фоном сайта (серым). Таким образом я:

1. Уменьшил вес картинки с 415кб до 44,7кб (в 10 раз Карл! без потери в качестве!).
2. Сохранил опрятный вид подобрав одинаковые цвета для фото и фона сайта.

Иконки и логотип я не трогал, их вес мизерный. Итого вес всех картинок на сайте стал в районе 100кб. Что очень круто)

Техническая оптимизация сайта

С этого момента пошла самая «весёлая» часть работы. Я отключил ненужные скрипты. Выстроил подключение нужных в правильном порядке.

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

После настройки порядка загрузки и отключения лишнего я начал сжатие скриптов и стилей.

Что дает сжатие (минификация по научному)? Дает снижение веса файла скриптов или стилей сайта, что ускоряет его загрузку.

Например, в данном случае у меня было 3 документа с стилями сайта. После минификации получился один документ с более низким весом. Из кода были удалены пробелы, комментарии разработчиков. Это всё уменьшило вес.

Точно так же поступил с скриптами. Вес некоторых файлов уменьшился в двое.

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

Очень важно, при таком объединении, сохранять тот самый порядок загрузки. Если напутать и не правильно собрать этот «пирог» из файлов, то сайт перестанет отображаться правильно. Потому настоятельно советую делать копии файлов перед каким либо началом работ с ними!

Все эти изменения очень сильно уменьшают вес страницы и ускоряют её загрузку.

Гонимся за заветными 90 баллами в Google Page Speed

И вот тот момент, когда всё становится не так просто, как хотелось бы. Данный сервис чересчур требовательный и я рекомендую всем не сильно на него полагаться и вот почему.

Перед нами простейший лендинг на одну страницу. Без тяжелых слайдеров, скриптов навигации, видео и прочего. Но влезть в те самые 90 баллов было довольно сложно. Гугл ругался на… на самого себя по сути. Он возникал, что загрузке страницы мешает Google Tag Manager (Тег менеджер от гугла, далее по тексту ГТМ).

А что в ГТМ было? Стандартный набор там: метрика, аналитика, пиксели.

Убираем метрику и оп — 86 баллов уже. Убираем пиксели — оп, 94 балла. Забавно, правда? То есть нужно иметь абсолютно голый сайт, чтобы войти в ту заветную зеленую зону.

Так же большую роль играло место подключения ГТМ на странице. Я настоятельно рекомендую ставить его буквально перех </head>, а не в самом его начале после <head>

Путем проб, оптимизаций и танцев с бубном) Я все же добился 89-90 баллов не удаляя ни каких метрик или пикселей. Это правда больше чудо))

Результаты работы

Страница стала помещаться на один экран, как на ПК, так и на смартфонах. Теперь всё очень компактно.

Не переживайте, по поводу того, что на мобильной версии нет текста и фото менеджера. На конверсию это никак не повлияло.

Сайт набирает нужные 90 баллов (до оптимизации было в районе 74 баллов). И работает оочень шустро. Клиент остался очень доволен результатами.