Как улучшить свой показатель Google PageSpeed ​​Insights

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

Исследование Google выявило связь между коэффициентом конверсии и временем загрузки. Это также показывает, что вы, возможно, теряете половину своих потенциальных клиентов из-за отстающей целевой страницы после клика. К счастью, есть инструмент, который вы можете использовать, чтобы определить, что его замедляет.

Исследование Google по скорости страницы

После просмотра 900 000 объявлений исследователи из Google обнаружили, что средняя мобильная целевая страница после клика загружается за 22 секунды. Это более чем в 7 раз дольше, чем большинство нетерпеливых интернет-пользователей будут ждать, прежде чем покинуть страницу, - 53%, если быть точным.

Если ваша страница загружается более 3 секунд, более половины ваших потенциальных клиентов уходят, даже не увидев ее. Как будто этого было недостаточно, исследование показало, что с каждой секундой, когда страница не загружается, отскакивает еще больше посетителей:

С помощью технологии машинного обучения от SOASTA исследователи обнаружили корреляцию между временем загрузки, весом страницы (размером данных) и коэффициентом конверсии. По сути, «тяжелее» означает медленнее. В частности, когда количество элементов (текст, изображения и т. Д.) На странице увеличивается с 400 до 6000, ваши шансы на конверсию посетителя снижаются на 95%.

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

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

Что такое Google PageSpeed ​​Insights?

Google PageSpeed ​​Insights - это инструмент, который позволяет быстро и легко проверить скорость веб-страницы.

Введя URL-адрес и нажав «Анализировать», вы быстро получите подробный отчет о том, что замедляет эту веб-страницу на основе двух параметров, с рекомендациями о том, как это исправить.

• Параметр 1: Время до верхней загрузки. Это время, необходимое странице для отображения содержимого в верхней части страницы после того, как пользователь запросит новую страницу.

• Параметр 2: Время полной загрузки страницы. Это количество времени, которое требуется браузеру для полной визуализации страницы после того, как пользователь запросит ее.

По словам Google, это работает так:

Page Speed ​​Insights измеряет производительность страницы для мобильных и настольных устройств. Он получает URL дважды, один раз с помощью мобильного пользовательского агента и один раз с помощью пользовательского агента для настольных компьютеров.

Оценка PageSpeed ​​Insights составляет от 0 до 100 баллов. Чем выше оценка, тем лучше, а оценка 85 или выше указывает на то, что страница работает хорошо.

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

Достижение высокого балла Google PageSpeed ​​Insights

Если вы видите в своем отчете много красного и желтого, это потому, что на вашей странице есть серьезные проблемы с загрузкой.

Инструмент уведомит вас об этих проблемах, но сообщения об ошибках могут быть немного трудными для понимания. Вот что вы можете ожидать и как это исправить:

1. Избегайте переадресации целевой страницы после клика.

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

• example.com использует адаптивный веб-дизайн, никаких перенаправлений не требуется - быстро и оптимально!
• example.com → m.example.com/home - штраф за несколько поездок для мобильных пользователей.
• example.com → www.example.com → m.example.com - очень медленная работа на мобильных устройствах.

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

(Все шаблоны Instapage адаптивны, поэтому вашему пользователю никогда не придется щипать пальцы для увеличения.)

2. Включите сжатие.

Современные браузеры способны предоставлять пользователям Интернета меньшую альтернативную версию страницы. Если включен компрессор gzip, эти страницы могут уменьшиться в размере на 90%.

На своем веб-сайте Better Explained Халид Азад отлично описывает, как gzip оптимизирует процесс HTTP-запроса и ответа:

Однако, когда сжатие включено, процесс выглядит примерно так:

Вместо того, чтобы предоставлять пользователю полную страницу, браузер может получить сжатую версию экспоненциально меньшего размера, которая загружается за долю времени. Узнайте больше об оптимизации с помощью gzip здесь.

3. Минимизируйте CSS, HTML, JavaScript.

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

Помимо изучения исходного кода вашей страницы вручную, Google рекомендует использовать следующие ресурсы:

• Минификатор HTML для минимизации HTML.
• CSSNano и csso для минимизации CSS.
• UglifyJS2 и компилятор Closure для минимизации JavaScript.

Другой вариант - это, конечно, воспользоваться преимуществами Google AMP и AMP для рекламных фреймворков. Обе программы позволяют разработчикам создавать страницы с урезанными версиями HTML, CSS и JavaScript. В результате страницы и объявления загружаются за доли секунды.

4. Сделайте приоритетным содержание верхней части страницы.

Как ни странно это может показаться, время загрузки страницы зависит не только от ее скорости. Это также касается «воспринимаемой производительности». Брайан Джексон из KeyCDN объясняет:

Воспринимаемая производительность может быть описана просто как «насколько быстро ваш сайт загружается?» Это может немного отличаться от скорости загрузки вашего веб-сайта. Воспринимаемая производительность - это все с точки зрения пользователя, а не с помощью инструмента для проверки скорости веб-сайта.

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

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

5. Ускорьте время ответа сервера.

Время ответа сервера - время, необходимое вашему серверу, чтобы начать загрузку содержимого страницы для пользователя - согласно Google, оно может замедляться по ряду факторов:

• Запросы к базе данных
• Медленная маршрутизация
• Каркасы
• Библиотеки
• Истощение ресурсов ЦП
• Голодание памяти

Для веб-сайта Рэлин Мори плохой хостинг был главным убийцей скорости. Она предостерегает читателей:

Дешевый веб-хостинг, предлагающий ежемесячные планы за 3,95 доллара в комплекте с неограниченным количеством просмотров страниц и неограниченным пространством, может показаться выгодной сделкой, но обычно компромисс заключается в низкой скорости сайта и частых простоях в периоды высокого трафика.

Если вы хотите, чтобы ваш сайт работал молниеносно и работал хорошо, вам нужно инвестировать в достойный веб-хостинг. Если вы действительно хотите, чтобы ваш сайт работал быстро, вы можете посмотреть пакеты хостинга, которых нет на общем сервере.

Прежде чем выбрать WP Engine, она протестировала множество хостов, что помогло ей добиться времени отклика сервера менее 200 мс, рекомендованного Google. Подумайте о том, чтобы сделать то же самое или обновить текущий пакет веб-хостинга до более подходящего плана.

6. Устраните JavaScript, блокирующий рендеринг.

Среди прочего, JavaScript позволяет использовать некоторые мощные сторонние инструменты и интерактивные элементы страницы. Проблема в том, что он также останавливает парсинг HTML-кода.

Когда вы видите сообщение об ошибке, которое гласит: «Устраните JavaScript, блокирующий рендеринг», это означает, что есть фрагмент кода JavaScript, который приостанавливает процесс загрузки для верхней части вашей страницы. В частности, в этой проблеме, вероятно, виноваты сторонние скрипты. Решить эту проблему можно тремя способами:

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

• Сценарии, загружаемые асинхронно, следует использовать вместо сценариев, загружаемых синхронно. Синхронные скрипты приостанавливают процесс отрисовки страницы, а асинхронные позволяют браузеру одновременно загружать другие элементы.

• Рассмотрите возможность встраивания скрипта - вставки небольших внешних ресурсов JavaScript непосредственно в ваш HTML-документ - чтобы уменьшить количество запросов, которые ваш браузер должен делать.

7. Используйте кеширование браузера.

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

Кэширование позволяет вашему браузеру в некотором роде «запоминать» определенные элементы, которые были недавно загружены - заголовок, навигацию, логотип и т. Д. Чем больше элементов может кэшировать браузер, тем меньше элементов он должен загрузить в тот момент, когда пользователь делает запрос, и, в конечном итоге, тем быстрее загрузится страница.

Google рекомендует минимальную политику кэширования в одну неделю, а для элементов, которые практически не меняются, предпочтительнее один год.

8. Оптимизируйте изображения.

В сообщении в блоге тестировщики Google специально предупредили об угрозе, которую изображения представляют для скорости страницы. «Графические элементы, такие как значки, логотипы и изображения продуктов, могут легко составлять до двух третей общего веса страницы», - сказали они.

Когда это происходит, влияние на время загрузки страницы и, в частности, на коэффициент конверсии огромно. Согласно исследованию, страницы, которые привели к конверсии посетителей, содержали на 38% меньше изображений, чем те, которые этого не сделали:

К счастью, оптимизировать изображения очень просто. Замена PNG файлом изображения JPEG может легко сэкономить размер вашей страницы и время загрузки. То же самое и с такими компрессорами изображений, как Google Guetzli и Zopfli.

Но прежде чем использовать их, спросите себя, действительно ли вам нужны все изображения, которые вы разместили на своей странице. Действительно ли они добавляют ценность, или вы могли бы обойтись без них? Если ответ второй, откажитесь от них полностью, чтобы сэкономить данные и время.

Узнайте, где вы находитесь, с помощью Google PageSpeed ​​Insights

Какой у вас результат в Google PageSpeed ​​Insights? Вы достигли рекомендованного 85+?

Чтобы достичь этого порога, мы рекомендуем вам ознакомиться с нашим руководством по оптимизации работы целевой страницы после клика:

Затем начните улучшать пользовательский интерфейс и улучшать целевую страницу после клика.

Подпишитесь на демонстрацию Instapage Enterprise сегодня.