Лицемерие google. PageSpeed Insights / Habr
Google Page Speed Insights — это сервис от гугла, который позволяет определить производительность сайта и дает рекомендации по его оптимизации. Очень важно понимать, что это всего лишь рекомендации! Некоторые воспринимают эти рекомендации настолько серьезно, что готовы реализовать все что там написано в ущерб функционалу своего сайта, что в итоге может даже навредить. Но это довольно сложная тема с множеством нюансов, а данная статься лишь мои мысли в слух и пара замечаний самому google.Есть такая рекомендация:
Используйте современные форматы изображений:С этим не поспоришь, а WebP, когда я его первый раз увидел, я был потрясен. Отличное сжатие без явной потери качества. Но там же сразу можно перейти по ссылке и увидеть, какова же поддержка браузерами данного формата?
Форматы JPEG 2000, JPEG XR и WebP обеспечивают более эффективное сжатие по сравнению с PNG или JPEG, поэтому такие изображения загружаются быстрее и потребляют меньше трафика
На момент написания данной статьи, это всего 80%. Вполне не плохо, но еще слишком мало чтобы использовать повсеместно. И как вы думаете что делает с этой информацией сам PageSpeed Insights? Правильно, он использует PNG:
Ну ладно, не то что сами рекомендуют, но почему бы не SVG? Нужно же подать пример, но зачем? А давайте проверим на оптимизацию сам сайт developers.google.com на котором находится данный сервис:
Мобильная версия всего лишь 51, а вы видели эту страницу? Она практически пустая, несколько меню сверху и снизу, пара новостей и поиск:
Очевидно, что они клали на эту оптимизацию, ведь оно им не надо. Они даже не попытались показать пример… Хотя может это и есть пример? Пример того, что не нужно бездумно пытаться реализовать все рекомендации в ущерб функционалу и здравому смыслу?
В общем любая оптимизация полезна, любая рекомендация имеет смысл быть, но давайте без фанатизма. Спасибо за внимание.
habr.com
Google PageSpeed Insights кардинально обновился, что изменится? / Habr
12 ноября Google по тихому обновил PageSpeed Insights, изменив в нем практически все. Это станет большой переменой для всей индустрии сайтостроения. Похоже, сейчас настанет некоторая волна паники и хайпа вокруг этого события. В статье — анализ перемен и что они нам принесут.
Что такое PageSpeed Insights
Буквально пару слов для тех, кто не в курсе. Вот уже 8 лет PageSpeed Insights является главной пузомеркой скорости сайтов, в нее можно ввести адрес страницы и узнать ее оценку по шкале от 0 до 100 вкупе с рекомендациями по улучшению.
Что изменилось?
Если коротко — все. Старый PageSpeed отставили в сторону, заменив его оценками и аналитикой Lighthouse, open-source инструмента для аудита сайтов, который помимо прочего встроен в Google Chrome.
Рекомендации есть, как и раньше — но теперь они несут совсем другую нагрузку. Рекомендации никак напрямую не связаны с баллами, и абсолютно не факт, что их воплощение улучшит ситуацию (но запросто может ухудшить при бездумной реализации).
Паника неминуема
Сейчас ночь 13го, и все относительно тихо. Только пару профильных ресурсов выложило короткие заметки об обновлении, только пару клиентов написали взволнованные письма о странном поведении PageSpeed Insights. Кажется, это затишье перед бурей.
Прямо сейчас видно, что инструмент ведет себя нестабильно — оценки для одной и той же страницы колеблются в пределах 20 пунктов, иногда выходят жалобы о невозможности получить страницу оцениваемого сайта. Некоторые сайты вообще, по его мнению, недоступны — хотя на самом отлично себя чувствуют.
Очевидно, что скоро очень много людей бросятся смотреть оценки своих проектов, накрывая сервис международным хабра-эффектом. Все будет работать через пень-колоду, глючить и пугать прыгающими оценками.
Это непросто, но постарайтесь расслабиться и сохранять спокойствие. Первое, что надо помнить — обновление PageSpeed Insights никак не влияет на принципы ранжирования в поисковой выдаче. Второе — понадобится не меньше двух недель, чтобы обновление обкатали, поправили и оно начало стабильно работать. Не делайте резких движений, возможно их потом придется откатывать.
Размышления и прогнозы
В этих изменениях много позитива. Господство старого PageSpeed Insights с его принудительными рекомендациями наделало немало бед. Во первых, любая рекомендация может быть близка к бесполезной в вашей конкретной ситуации. Во вторых, ее можно реализовать в ущерб более важным вещам, например времени генерации страницы. Но выбора не было — приходилось все это делать, чтобы получить красивую оценку.
В любом проекте последних лет немало усилий уходило на оптимизацию изображений, минификацию и группировку ресурсов, отложенный запуск JavaScript, который бы ничего не сломал. Чаще всего это уводило фокус внимания от сути — скорости работы сайта для посетителей. Интернет был полон как примерами тормозных сайтов с отличными оценками, так и быстрых сайтов, которые оценивались плохо.
Теперь эта мишура будет понемногу отваливаться. На первых тестах оценки с минификацией-группировкой ресурсов и без практически не отличаются. Значимыми становятся реально важные вещи — как быстро сервер отвечает и сколько тяжелого материала на странице. Все свистелки — виджеты социальных сетей, интерактивные карты, чаты и роскошные попапы будут неумолимо бить по оценке, как их не заворачивай.
Вполне вероятно, что это все приведет к действительно быстрым сайтам и пониманию, как их делать. По крайней мере, очень хочется в это верить.
Новые метрики
А для самых стойких — подробный разбор новых метрик, которые влияют на оценку. Всего их 6, и они имеют разный вес в формировании финальной оценки. Пройдемся по ним в порядке уменьшения значимости.
1. Время загрузки для взаимодействия
Это самая важная характеристика — и самая тяжелая. Отметка времени, когда страница становится полностью готова к взаимодействию с пользователем. Этот момент наступает, когда:
- отобразилась страница
- зарегистрировались обработчики событий для большинства видимых елементов
- отклик на действия пользователя составляет менее 50 мс
По сути, страница должна прорисоваться, не тормозить и быть готовой реагировать на действия.
2. Индекс скорости загрузки
Это время, когда страница в браузере перестает изменяться визуально. Для определения используется покадровое сравнение вида страницы.
3. Время загрузки первого контента
Показатель, который определяет интервал времени между началом загрузки страницы и появлением первого изображения или блока текста.
4. Время окончания работы ЦП
Этот параметр показывает время, в которое основной поток страницы становится достаточно свободен для обработки ручного ввода. Этот момент наступает, когда:
- большинство элементов на странице уже интерактивны
- страница реагирует на действия пользователя за разумное время
- отклик на действия пользователя составляет менее 50 мс
Русский перевод этой метрики немного теряет суть. В оригинале она звучит First CPU Idle — первый простой процессора. Но и это не совсем правда. Подразумевается момент в загрузке страницы, когда она уже в основном может реагировать на действия, хоть и продолжает прогружаться.
5. Время загрузки достаточной части контента
Этот параметр показывает время, по истечении которого становится виден основной контент страницы. Этот момент наступает, когда:
- случилось наибольшее изменение вида страницы
- прогрузились шрифты
6. Приблизительное время задержки при вводе
Это наименее значимая характеристика. Показывает время в миллисекундах, которое занимает реакция страницы на действия пользователя в течение самых занятых 5 с загрузки страницы. Если это время превышает 50 мс, пользователям может показаться, что ваш сайт притормаживает.
Каждая метрика сравнивается с показателями всех оцененных сайтов. Если у вас она лучше, чем у 98% сайтов, вы получаете 100 баллов. Если лучше, чем у 75% сайтов — вы получаете 50 баллов.
На первый взгляд, эти метрики весьма жизненные и обмануть их грязными манипуляциями, которые на самом деле не ускоряют сайт, будет практически невозможно.
Пока что остается загадкой принцип оценки мобильной версии сайта. Вернее, принцип тот же, но часто баллы ощутимо ниже. Непонятно, на какой виртуальной конфигурации мобильного устройства они прогоняются.
habr.com
как ускорить загрузку страниц сайта на любых устройствах
Реальная скорость загрузки и рейтинг PageSpeed
Важность скорости загрузки
Google Pagespeed Insights — инструмент для оценки качества оптимизации страниц в интернете. Основной показатель, которым оперирует предлагаемый в нём анализ — скорость загрузки страницы. Данная метрика является одной из ключевых, будучи важным поведенческим фактором, о которых у нас есть хорошая информативная статья.
Как минимум, с пользовательской точки зрения, необходимо, чтобы сайт работал быстро — это экономит наше время и приносит положительный опыт.
В Google провели исследование, обучив на больших данных о поведении пользователей нейронную сеть, с целью предсказания конверсий и bounce rate. В результате, выяснилось, что при времени загрузки страницы от 1 до 10 секунд вероятность отказа повышается на 123%. Даже при задержке до 3 секунд она растёт на треть.
В январе 2018 было объявлено, что с июля данного года Google вводит page speed в качестве фактора ранжирования для мобильного поиска. Это связано с упомянутым исследованием, в котором ясно показано: скорость имеет значение. Здесь Google рекомендует разработчикам заняться оптимизацией своих сайтов и предлагает для анализа их эффективности использовать инструменты:
- Chrome User Experience Report. Открытые данные по ключевым метрикам поведения пользователей в популярных сегментах интернета.
- Lighthouse. Автоматический аудит веб-страниц, являющийся частью Chrome Developer Tools.
- PageSpeed Insights. Инструмент, определяющий степень оптимизации страниц и предлагающий пути улучшения их параметров.
Вторят корпорации и SE-оптимизаторы. Часто по результатам аудита в своих отчётах они приводят итоги проверки Pagespeed Insights. Специалисты настоятельно рекомендуют заказчикам устранить все недостатки, выявленные в ходе тестирования.
О чём говорит Google Pagespeed Insights
Всё говорит о том, что скорость загрузки сайта — важнейший показатель, влияющий и на лояльность пользователей, и на позиции в выдаче. Как в улучшении данной метрики помогут Google Insights?
Кто-то будет разочарован или неприятно удивлён, но Pagespeed Insights — это не в полной мере про скорость.
- Данный инструмент не измеряет скорость загрузки страниц.
- Показатель Page Insights не влияет на ранжирование.
- Разница в показателях между двумя сайтами не говорит о качестве одного и второго относительно друг друга.
Можно привести огромное множество примеров, когда топ выдачи занимают сайты с вопиюще низким показателем, а под 100 баллов получают сайты на одном HTML без каких-либо удобств и функций.
Проверим верность утверждения на запросе авиабилеты.
Два топовых сайта показывают удручающие, с точки зрения сервиса, показатели.
А сайт Артемия Лебедева, посвящённый Московскому метрополитену, написанный на HTML, идеален по мнению Pagespeed Insights.
Разработчикам, которых интересует скорость загрузки сайта, будут полезны сервисы:
- Pingdom Tools. Бесплатный инструмент, отображающий подробные метрики performance страницы и итоговый балл.
- WebPageTest. Инструмент для профессиональных веб-аналитиков, разработчиков и оптимизаторов. Даёт развёрнутую информацию по многим специфическим показателям, из которых время загрузки страницы и количество запросов — самые поверхностные.
- GTmetrix. Один из лучших сервисов. Формирует отчёт о времени и скорости загрузки, учитывает полный перечень параметров оптимизации.
Подробнее о таком факторе, как скорость загрузки сайта, читайте в нашей статье.
Сквозная аналитика
Подробные отчеты от вложений до прибыли по каждому рекламному каналу
- Учитывайте все типы обращений: звонки, заявки, чаты, корзины, колбеки
- Получайте данные из CRM и рекламных площадок
- Стройте воронку от показов рекламы до сделок
- Более 30 показателей эффективности в отчетах
Как ускорить загрузку своего сайта на любых устройствах
Тем не менее, с помощью Google Pagespeed Insights вы можете определить недостатки страницы, чтобы исправить их и оптимизировать загрузку.
Оптимизация изображений
Pagespeed Insights даёт рекомендации по оптимизации изображений. Чтобы изображения не тормозили работу сайта, стоит предпринять следующие меры:
- Предварительная оптимизация
При загрузке изображений откуда-либо и последующей их вставке на сайт позаботьтесь о том, что их размер минимально возможный. Речь идёт не о весе в килобайтах, а именно о пикселях.
Используйте графический редактор: в идеале — Photoshop, на крайний случай — Paint. У первого есть параметры сохранения картинок в формате web, что улучшает качество оптимизации. Если невозможно применить ни один из редакторов, возможно, ваш сайт работает на CMS, в функционале которой предусмотрена обрезка изображений.
Сделайте так, чтобы на картинке или фото не оставалось полей и лишних элементов — это может замедлить загрузку. При создании коллажей постарайтесь не допускать много свободного пространства между отдельными изображениями — пустоты увеличивают размер файла и замедляют сайт.
- Подберите формат
В случае с calltouch.ru Google советует сменить формат ряда изображений. Он говорит, что JPEG 2000, JPEG XR и WebP более оптимизированы для веба, нежели используемые нами PNG.
Сложно сказать, правы ли здесь авторы, так как PNG входит в перечень наиболее оптимизированных для веб форматов. У него, в отличие от JPEG, имеется возможность загрузки изображений неправильной формы без необходимости дорисовки до прямоугольника. Если нужна круглая кнопка, JPEG добавит к кругу непрозрачные уголки, чтобы изображение вышло квадратным. Загружая PNG, вы оставляете только ту графику, которую хотели, а остальное пространство между вашим изображением и прямоугольным контейнером остаётся прозрачным.
Старайтесь прибегать к JPEG для размещения фотографий. Иллюстрации и техническую графику сохраняйте в PNG. Векторным изображениям идеально подходит SVG.
- Сжимайте изображения
Вот сейчас самое время сжать картинки и по весу. В интернете есть несколько бесплатных или частично платных сервисов, уменьшающих размер картинок без потери качества:
Эти сервисы дают сжатие от 30% до 80% без визуальных дефектов.
- Используйте атрибуты с правильным размером
Если разработчик загружает большое изображение и ограничивает его до меньшего атрибутами width и height, ему кажется, что он оптимизировал своё время. Но он на самом деле отнял время у пользователя, который загрузит файл целиком, а увидит его в уменьшенном размере.
Для облегчения задачи пакетного сжатия Google предлагает загрузить сжатые в ходе диагностики картинки в архиве. Вы можете распаковать их прямо в директорию соответствующей страницы и обновить старые изображения. Пакетное сжатие лучше провести в PunyPNG.
Оптимизация JavaScript и CSS
Google Pagespeed Insights, как правило, рекомендует сокращать JavaScript и CSS. Обычно это совет перенести скрипты и стили в футер. Но не спешите следовать этим рекомендациям.
Разумеется, JavaScript, загружаемый внизу страницы или асинхронно, ускоряет загрузку. Но разработчики редко прибегают к этому действию, так как перенос скриптов в футер систематически нарушает функционирование сайта. Тем более, это касается готовых шаблонов для CMS, в которых страницы редактируются через интерфейс, а в отдельных вставка кода существенно ограничена.
Аналогично и со стилями. В случае, когда пользователь загружает страницу, где CSS находятся внизу, он с большой вероятностью загрузит каркас страницы без стилей. Это выглядит неприглядно — посетитель сочтёт такое отображение ошибкой и, скорее всего, покинет сайт.
Впрочем, есть несколько действенных мер, которые могут облегчить код и ускорить работу страниц ресурса.
Чтобы не прибегать к ручной правке, можно воспользоваться онлайн-инструментами сжатия файлов стилей. Например, CSScompressor. В нём есть 3 степени сжатия: Light, Normal, Super Compact, и 3 опции сокращения комментариев: не удалять, удалить все, удалить комментарии определённой длины. Доступен Advanced Mode для профессиональных настроек.
Последний вариант сжатия превращает код в строку, что неудобно в случае необходимости его дальнейшего редактирования. Есть смысл прибегать к этой опции в том случае, если вы уверены — файл стилей содержит окончательные данные.
Если вы единственный разработчик, прекрасно ориентируетесь в коде и ваше эстетическое восприятие не перетекает в перфекционизм, то комментарии можно удалить полностью — в зависимости от их размера, это может сильно облегчить файл.
- Сокращение JavaScript
Для такой задачи подойдёт инструмент Online YUI Compressor. Его можно использовать и для облегчения CSS.
Просто вставьте код в окно и запустите сжатие. После процедуры замените код в своих файлах на сайте и проверьте его производительность.
- Загрузка контента из Google CDN
Интернет представляется единым пространством без расстояний, но это не так. На самом деле удалённость серверов играет большую роль. CDN реализует функционал перемещения контента сайта — скриптов, стилей или изображений в специальную сеть.
Пользователь не должен ждать, если он находится в одной точке мира, и его обслуживает один сервер, а сервер вашего сайта располагается в нескольких тысячах километров. CDN делает так, что посетитель подгружает контент с сервера, ближе всего расположенного к нему. Файлы ранее оказались там благодаря особому кешированию в данной сети.
GZIP сжатие
GZIP — это тип сжатия, концептуально схожий с обычным сжатием файлов на компьютере, но в вебе. Файлы, обеспечивающие отображение страницы, загружаются с сервера в сжатом виде. Существует целый перечень алгоритмов сжатия, но gzip наиболее применим и популярен в интернете. Его поддерживают любые современные браузеры.
Существует 2 типа сжатия gzip: динамическое и статическое.
- Динамическое сжатие
В данном случае файлы архивируются прямо на сервере, отправляются пользователю и разархивируются в браузере. Такой подход эффективен, но создаёт нагрузку на сервер, что может быть неприемлемо для некоторых владельцев сайтов.
Метод реализуется с помощью редактирования файла .htaccess, находящегося в корневом каталоге ресурса, расположенного на сервере Apache. Если сайт работает на Nginx, то подход не сработает. Вам необходимо будет включить в файл соответствующие модули или связаться с администрацией, если ваши возможности в этом вопросе ограничены.
- Статическое сжатие
При статическом сжатии ресурсы сервера не используются, хотя при этом пропадает возможность динамического сжатия HTML — метод работает со статическими скриптами и CSS.
Суть подхода состоит в ручном архивировании файлов методом gzip и последующем размещении сжатых копий на сервере. Таким образом, пользователь при загрузке сайта будет сразу обращаться к сжатым файлам без затрат мощностей сервера.
Использование кеша
Как и при сжатии, для внедрения кеширования существует небольшой нюанс — сервер должен работать под Apache. В противном случае вам так или иначе придётся связываться с администрацией хостинга.
Суть кеширования заключается в том, что файлы, за счёт которых работает сайт, уже не подгружаются пользователем с сервера ни в каком виде. Вместо этого он хранит файлы у себя на компьютере, вследствие чего кратно вырастает скорость загрузки страниц.
Для реализации функционала кеширования вам опять предстоит работать с .htaccess. Найдите этот файл в корне и откройте для редактирования. Если он не отображается, в настройках FTP-клиента используйте функции отображения скрытого содержимого. Найдя .htaccess и открыв его, внесите в него директивы для кеширования статических элементов в браузере пользователя.
С помощью заголовков Last-Modified и ETag обеспечивается обновление кешированных файлов на устройстве пользователя. Браузер отправляет GET-запрос при загрузке сайта и получает ответ 304 — что означает отсутствие изменений и разрешение использования контента с устройства. Также следует прописать период хранения файлов через Expires или Cache-Control.
Чаще всего хранятся на пользовательской машине файлы изображений, стилей и скриптов.
Стоит ли пользоваться Google Pagespeed Insights
Ответ на этот вопрос положительный, с тем условием, что вы не придаёте данному инструменту чрезмерного значения. Он удобен для проверки конкретной страницы на предмет оптимизации её составляющих, но не годится в качестве инструмента сравнения page speed разных страниц. Для больших проектов имеет смысл пользоваться более глубокими инструментами аналитики.
Сквозная аналитика
Подробные отчеты от вложений до прибыли по каждому рекламному каналу
- Учитывайте все типы обращений: звонки, заявки, чаты, корзины, колбеки
- Получайте данные из CRM и рекламных площадок
- Стройте воронку от показов рекламы до сделок
- Более 30 показателей эффективности в отчетах
Следуя рекомендациям Pagespeed Insights, уделяйте внимание главным методам оптимизации:
- Оптимизация JavaScript и CSS;
- Оптимизация изображений;
- Сжатие gzip;
- Кеширование в браузере.
blog.calltouch.ru
Проверить скорость работы сайта, google pagespeed insights
Google PageSpeed — инструмент который позволяет проверить скорость работы сайта. Он позволяет оценить скорость загрузка для стационарных ПК и для мобильных устройств и выдает рекомендации, которые могут быть использованы для оптимизации.
Ссылка на ресурс:
https://developers.google.com/speed/pagespeed/insights/
Результат анализа скорости загрузки сайта выглядит так:
После проведения анализа скорости загрузки сайта чаще всего можно получить следующие рекомендации:
Optimize images
Самая часто встречающаяся рекомендация сервиса связана с оптимальным выбором изображений для сайта. Графический контент очень тяжелый и может сильно замедлять загрузку страниц ресурса. Самые общие рекомендации заключаются в выборе правильного формата (чаще всего имеет смысл использовать PNG), размера и качества изображений. Так слишком большое изображение, используемое в качестве фона может в разы замедлить скорость загрузки сайта. Всегда нужно проверять изображения и максимально уменьшать их размер и качество (размер и качество изображений имеет смысл задавать минимальными приемлемыми для конкретного ресурса).
Enable Compression
Сжатие веб-сервером является важным параметром, обеспечивающим быстродействие. Включается за счет модуля mod_deflate в Apache или за счет директивы gzip on в Nginx.
Leverage browser caching
Определяет передается ли заголовок Cache-Control и кэшируются ли данные в браузере пользователя. Кэширование позволяет значительно сократить количество обращений к серверу, что снижает нагрузку на него и увеличивает скорость отдачи статических данных (которых большинство на любом сайте) клиенту
Eliminate render-blocking JavaScript and CSS in above-the-fold content
JavaScript код по умолчанию исполняется по мере того как загружается страница, похожим образом обрабатывается CSS. Т.е. Если JS скрипт подключен в теле документа, его рендеринг каждый раз прерывается до тех пор пока скрипт выполнен не будет. Избежать этого можно добавляя при подключении JavaScript и HTML тело страницы будет рендерится независимо от исполняемого кода.
Например, JS в асинхронном режиме можно подключить так: <script async src=»script.js»>
Minify CSS
Минификация CSS предполагает удаление лишних пробелом и переносов строк, что позволяет сократить время обработки браузером и увеличить скорость загрузки страницы для клиента
Minify HTML
Опция аналогичная предыдущей, но имеет отношение к HTML коду. Для минификации HTML и CSS могут использоваться OpenSource программные продукты, ссылки на которые размещены на сайте сервиса.
Avoid landing page redirects
Определяет используются ли редиректы, любые заданные перадресации с одного домена на другой и с одного сервера на другой означают дополнительные циклы запрос-ответ (запрос к серверу DNS и запрос непосредственно данных), что, естественно, увеличивает время через которое конечный пользователь получит контент сайта. Редиректов по возможности стоит избегать.
Prioritize visible content
В данном случае проверяется размер контента, который должен загружаться при переходе на главную страницу сайта, оптимизация не нужна если объем данных составляет менее 14.6kB сжатой информации, что соответствует размеру congestion window в протоколе TCP и означает, что не требуется повторное установление соединения для передачи информации, которая не может быть передана единовременно.
Reduce server response time
Pagespeed Insights выдает предупреждение о медленном ответе сервера в случае если содержимое страницы отдается менее, чем за 200 мс.
Google PageSpeed является очень полезным инструментом при оптимизации работы сайтов, но не следует доверять ему безоговорочно. Информация, выдаваемая Google PageSpeed не всегда корректна и чтобы понять критерии, которые оцениваются лучше обратиться к документации.
В частности, часто будет отображаться предупреждение, что не используется кэширование, хотя фактически оно используется. Дело в том, что запрос к тестируемому домену происходит исключительно по основному имени, т.е. файлу index.php, а файлы с таким расширением не кэшируются, информация в выводе результатов при этом отображается некорректно.
Несмотря на присутствие подобных моментов, Google PageSpeed широко используется для оптимизации и оказывается очень полезен.
Читайте про то как включить кэширование для Apache или для Nginx
server-gu.ru
Оптимизация на Page-speed.ru: показатель google pagespeed insights
Правда о важности оценки Google PageSpeed
Скорость страницы определяет общее время, необходимое для полной загрузки веб-сайта. При анализе сайта скорость загрузки может иметь решающее значение для SEO. Пользователи быстро покидают страницу, когда загрузка занимает слишком много времени, а поисковые системы игнорируют страницы с низкой производительностью.
Кроме полезности для SEO есть и другие причины для улучшения скорости страницы. Быстрые веб-сайты имеют бо́льшую конверсию, они намного удобнее для пользователя. Это может привлечь большее количество людей на ваш сайт и заставить их вернуться снова.
Исследования Google
Давайте рассмотрим некоторые недавние исследования: согласно Google среднее время, затрачиваемое на загрузку мобильной целевой страницы, составляет 15 секунд. Учитывая, что в течение трех секунд посетители должны решить, хотят ли они оставаться на вашем сайте – это огромное расхождение.
Исходя из данных, представленных выше, мы видим, что вероятность ухода со страницы во многой степени зависит от времени ее загрузки:
- При времени загрузки от 1 до 3 секунд вероятность отказа увеличивается до 32%
- От 1 до 5 секунд до 90%
- От 1 до 10 секунд вероятность отказа уже 123%
- Не трудно догадаться, какое количество посетителей мы теряем.
Скорость страниц будет важным фактором для ранжирования
Еще в 2010 году Google заявил, что скорость страниц будет ранжирующим фактором, но это было ориентировано только для десктопной версии сайтов.
А не так давно был анонсирован новый фактор ранжирования в мобильном поиске под названием «Speed Update». Обновление вступит в силу в июле 2018 года, поэтому у владельцев сайтов будет время подготовиться.
По заверению компании санкции грозят только страницам, загружающимся медленно и предоставляющим негативный пользовательский опыт.
Так же не стоит забывать, что скорость сайта – это один из многих факторов ранжирования. К примеру, если у вас хорошо оптимизирована страница по Google PageSpeed, но имеет малополезный неуникальный контент – то навряд ли она сможет занять достойные позиции в поисковиках.
Несколько советов по увеличению скорости загрузки
- 1. Используйте кэширование в браузере и сжатие gzip/deflate. В случае, если у вас стоит apache, это настраивается в htaccess.
- 2. Оптимизируйте изображения. Удаление ненужной информации и сжатие картинок способны значительно уменьшить их вес.
- 3. Сократите ресурсы javascript, css, html код. Если сайт находится в стадии разработки, то для удобства редактироватия кода этот пункт лучше оставить на потом.
- 4. Используйте новую версию протокола HTTP/2. Он более эффективен, надежен и подвержен меньшему количеству ошибок.
- 5. Переходите на PHP7. Работает более чем в два раза быстрее, чем его предшествующая версия.
Если вам понадобится помощь квалифицированного специалиста, вы всегда можете заполнить заявку на бесплатный анализ и оценку стоимости работ.
В одной из следующих статей мы поговорим о том, что такое блокирующие скрипты и почему не всегда от них можно избавиться.
page-speed.ru
Как получить 100% в Google Page Speed Insights
Веб-сайт требует для своего создания много дней для работы над дизайном, много недель для работы над программированием и несчетное количество часов для работы над правками. Но тут появляется новая проблема: сайт не такой быстрый, как хотелось бы.
Скорость становится ключевым фактором при выборе, когда дело доходит до создания конверсии и оптимизации сайта для поисковых систем. Но сделать сайт быстрее – достаточно непростая задача. Часто бывает сложно выяснить, что именно делает сайт медленнее, чем он должен быть. Проблема может заключаться как в плохо написанном коде, так и в элементах или изображениях. Выявить и решить эти проблемы нужно как можно скорее.
Если вы проверите ваш сайт через Google’s PageSpeed Insights, согласно которому будет 100%, значит он достаточно быстрый. Google предоставит предпочтительное решение проблемы, чтобы веб-сайт загружался быстрее. Чем быстрее загружается сайт, тем ниже показатель отказов. Если сайт быстрый, у вас есть больше шансов ранжироваться выше в поисковике Google среди медленных сайтов, приводящих к высоким показателям отказов. К счастью, Google предоставляет бесплатный инструмент, позволяющий узнать, что необходимо исправить. Однако они не дают точных инструкций, как добиться 100%. Здесь представлены способы поднятия уровня сайта в Google’s Page Speed Insights до 100%.
Почему необходимо учитывать скорость загрузки страницы
Скорость загрузки становится важным фактором, когда дело доходит до ранжирования сайта выше, основываясь на данных поисковика Google. Если ваш веб-сайт не будет входить в топ-10 лучших страниц, то вы не сможете попасть на первую страницу поисковика.
Кстати подавляющее большинство просто не переходит на вторую страницу. Поэтому ни для кого не секрет, что у первых 10 результатов будет большинство кликов. Итак, расположение на первой странице поисковика имеет первостепенную важность для успешности компании и веб-сайта.
Недавно Backlinko (Сайт Брайана Дина) провели исследование, где было проанализировано более миллиона страниц результатов поисковой системы (SERPs) в Google.
Полная статья-исследование доступна по ссылке (на английском).
Целью исследования было выяснить, какие признаки есть среди первых 10 лучших сайтов по результатам поиска.
Достаточно скоро они обнаружили, что средняя скорость загрузки страницы любого предоставленного сайта была огромным фактором, влияющим на расположение в рейтинге повыше.
В Google позиции, занимающие самое высокое положение, были одинаковыми.
Быстрая скорость прогрузки страниц на сайте. Создатели явно поработали над скоростью, чтобы у них получился хорошо оптимизированный сайт.
Кроме того, у сайтов с высоким рейтингом очень низкий показатель отказов по сравнению со второй или третьей страницей. Есть существенная взаимосвязь между быстрыми сайтами и низкими показателями переходов.
Аналогично показатель отказов был затронут в исследовании Брайна Дина:
Фактор влияния скорости сайта влияет на показатель отказов — и опосредованно — влияет на позицию.
Данная корреляция была недавно поддержана и продолжает поддерживаться до сих пор в инструментах сервиса PageSpeed от Google. Они выяснили, что по мере увеличения загрузки страницы резко увеличивается вероятность поднять сайт в поисковике.
Это значит, что если страница грузится 10 секунд, то кто-то покинет сайт ожидая прогрузки с вероятностью более, чем в 120%! Посмотрите на график от Backlinko сверху, согласно ему все ранжированные сайты на первой странице Google загружают страницы менее 3 секунд. И согласно последнему отчету Google, большинство веб-сайтов крайне медленные.
Среднее время загрузки большинства сайтов составляет 8 секунд, а может превышать и 11 в сфере высокотехнологичной индустрии. Однако самый лучший результат теста был менее 3 секунд. Практически у всех нет сигнала, когда речь заходит о быстрой загрузке сайта. Если вы хотите попасть на первую страницу поисковика Google, то ваш сайт должен грузиться менее чем за 3 секунды. Исследование Backlinko показало, что тестирование от Google еще больше укрепило свои позиции.
В другом исследовании от Big Commerce были выявлены коэффициенты конверсии торговых онлайн-площадок, которые варьировались в среднем в 1-2%. Portent использовали последние данные для собственного исследования. Они выяснили, что ускорение загрузки страницы с двух секунд до одной дает рост дохода за просмотр страницы на 100%. Поднятие скорости до двух секунд может удвоить просмотры и доход.
Что же заставляет загружаться страницу медленно?
Самыми распространенными причинами для медленной загрузки считаются тяжелые изображения и плохо написанный код. Если вы посмотрите на какой-нибудь современный сайт, то заметите, как он до последней капли забит изображениями, и без их оптимизации такие страницы занимают до нескольких мегабайт.
Размер и вес страницы часто измеряется байтами, то есть байты это общий размер для измерения веб-страницы. Согласно сравнительным тестам от Google идеальный размер для страницы составляет менее 500 КБ.
Одна из концепций из отчета Google выражается во впечатляющей цитате: «Так или иначе, быстрее – значит лучше, а меньше — значит больше». Это достаточно веский аргумент, если учитывать, что 70% страниц превышает 1МБ, 36% больше 2МБ, и 12% — более 4МБ. Google выяснил, что страница весом всего в 1,49МБ, что сопоставимо с размером среднего HD-изображения, требует 7 секунд для загрузки страницы. Во время исследования они даже обнаружили веб-страницу с изображениями, каждое из которых в среднем занимало 16 МБ. Google дает понять, что у нас есть возможность улучшить наши сайты.
Как проверить полную и мобильную версию сайта
Осознание того, медленные веб-сайты «убивают» конверсию – только начало. Основные проблемы, лежащие на поверхности – только первый шаг. Большинство сайтов работает медленно из-за больших изображений, но это не обязательно касается всех. Чтобы внести какие-либо поправки для повышения статуса до 100% в Page Speed Insights необходимо точно знать, что именно вызывает медленную загрузку. Для начала работы нужно открыть инструмент Page Speed Insights и ввести адрес своего сайта.
Чтобы начать анализ сайта, необходимо кликнуть на кнопку «Анализировать». Получившийся отчет будет содержать все, что необходимо знать о сайте и что мешает его работе.
Чтобы добиться 100%, необходимо проработать все пункты из Page Speed Insights. Сначала мы хотим начать с верхних пунктов. Затем следует протестировать мобильную версию нашего сайта отдельно. Для этого можно использовать тестировщик мобильной версии от Page Speed Insights, однако, Google выпустил обновленную и более точную версию для проверки. Для этого нужно перейти на сайт Test My Site и ввести адрес своего сайта.
Обработка потребует несколько секунд, после этого у вас будет подробный отчет о том, как работает мобильная версия сайта по сравнению с другими. Он также покажет, сколько посетителей вы потеряете из-за более низкой загрузки сайта.
Помните: рекомендуемая скорость загрузки – 3 секунды или меньше.
4 способа привести показатели к идеальным в Page Speed Insights
Заполучить заветные 100% в Google Page Speed Insights сложная задача, не решающаяся в одночасье, придется потратить много времени, работая над решением ряда проблем.
Поможет в этом информация на https://www.youtube.com/watch?v=youstCMC8oQ
Также существует четыре лучших способа, с помощью которых можно ускорить свой сайт и заполучить заветные 100% с помощью Google. Однако необходимо помнить о важности правильного ведения сайта компании.
1. Сжатие изображений.
Самая большая причина медленной загрузки сайта – это большие изображения. После того, как я исправил эту проблему, я выявил её огромное влияние на скорость. Сжатие изображений одно из лучших способов для оптимизации. Вы сэкономите в среднем на 50% или более на размере изображения, используя простые инструменты сжатия. Если вы работаете на WordPress, то лучшим способом сделать это, не тратя много времени, будет использование плагина. Мой любимый плагин для сжатия изображений WP Smush:
У WP Smush есть множество отличных бесплатных инструментов. Можно сжать изображения автоматически, добавив плагин. Он сканирует медиа-библиотеку на WordPress и находит изображения для сжатия. Можно сжимать тонны изображения, для этого их нужно загрузить сразу в плагин. Единовременно сжимается до 50 изображений. В настройках можно включить автоматическое сжатие изображений при загрузке.
Есть много других плагинов для различных сайтов. В магазине от компании Shopify можно использовать Crush.pics.
Если вы не знакомы с плагинами или не хотите ими пользоваться, то можно обратиться к другим бесплатным инструментам онлайн: Compress JPEG, Optimizilla и другие. Они быстрые и бесплатные, позволяют сжать до 20 изображений за один раз. Например, Optimizilla уменьшил размер файла за 2 секунды на 68% практически без ухудшения качества.
2. Используйте кеширование браузера.
Кеширование браузера оказывает большое влияние на скорость загрузки страницы. Для загрузки ресурсов сайта потребуется больших усилий. Нужно прогрузить каждого элемента и изображения на странице, а также тяжелый HTML и кодинг. Каждый раз, когда кто-то загружает ваш сайт, этот процесс происходит снова и снова, что слишком долго. В этом случае поможет кэширование браузера. Это работает путем «запоминания» ранее загруженной информации, поэтому не нужно перезагружать её каждый при каждом посещении. Когда посетитель переходит на другую страницу вашего сайта, все основные данные (логотипы и футер) больше не нужно загружать, что значительно увеличит скорость. Итак, как это сделать? К счастью, не нужно быть профессионалом в кодировании, поскольку можно воспользоваться плагином W3 Total Cache для сайтов на WordPress. У него более миллиона активных установок, его считают самым популярным плагином для кэширования.
Если верить W3 Tota lCache, он способен увеличить общую производительность сайта как минимум в 10 раз. Кроме того, утверждают, что плагин поможет добиться более высоких результатов в PageSpeed от Google. Инструмент также поможет уменьшить HTML, который будет загружаться в следующий раз, JavaScript и CSS, давая до 80% экономии пропускной способности. Использовать W3 Total Cache можно сегодня, даже если у вас нет опыта в кодировании.
3. Уменьшите свой HTML-код.
Сведите к минимуму пространство, занимаемое HTML-кодом. Минимизация – это процесс удаления или исправления ненужных или продублированных данных, не влияя на то, как браузер будет обрабатывать HTML-код. Это также подразумевает исправление, форматирования и удаления, сокращения ненужного кода в случаях, когда это возможно. Один из лучших инструментов – HTML Minify. Можно скачать этот плагин бесплатно и установить его бесплатно в свою учетную запись WordPress. После установки нужно сделать несколько манипуляций, чтобы изменения вступили в силу. Если вы хотите увеличить скорость, минимизация скрипта будет большой победой.
Вы можете убить одним выстрелом сразу двух зайцев. Поскольку Google Page Speed Insights рекомендует минимизировать HTML, JavaScript и CSS, нужно включить настройки «HTML» и «InlineJavaScript». Самое замечательное в этом плагине то, что он расскажет вам, какое действие подходит для каждого параметра. Если вы не знакомы с тем, как работают эти параметры, выберете следующие параметры. Минимизация кодирования окажет мгновенное влияние на отчет Page Speed Insights.
4. Выполните АМР.
AMP это сокращение от Accelerated Mobile Pages (ускоренные мобильные страницы). Это проект от Google, предназначенный для ускорения загрузки страниц в мобильной версии. Принцип его работы заключается в создании формата с открытым кодом, удаляются тонны ненужного контента, заставляя страницы прогружаться почти мгновенно. Пример страницы с AMP:
Ускоренные мобильные страницы часто относят к лучшим в поисковике Google, поскольку они загружаются мгновенно. У них не так много оформления, что способствует быстрой загрузке контента, которая необходима пользователю в мобильной версии сайта. Когда пользователь выбирает статью на основе АМР , то видит её следующим образом:
Это упрощенная версия реального веб-сайта, которая позволяет пользователю перемещаться по разным историям, не покидая веб-страницу. Например, можно просто прокрутить влево или вправо для прочтения следующей статьи.
Google AMP Viewer Tinder UX для контента.Данная функция работу пользователей на мобильных устройствах. Прошли те времена, когда приходилось ждать 10 секунд загрузки сайта и еще 10 секунд, чтобы вернуться с результатам поиска, а потом еще 10 секунд для загрузки следующего сайта. Вы можете получить доступ к содержимому нескольких статей, не нажимая кнопку «Назад». Это чрезвычайно эффективно для ускорения вашего сайта и снижения вероятности того, что кто-то уйдет. Множество компаний используют AMP.
Компания WIRED начала внедрять AMP, чтобы лучше работать с клиентами:
Они обнаружили, что мобильная версия сайта слишком медленная. Из-за этого конверсии просто не происходило, а также были проблемы с удержанием посетителей.
Инвестирование в AMP оказало большое влияние на компанию. Коэффициент кликабельности из обычного поиска сайта возрос на 25%, а в новостях обнаружили 63% увеличение на рекламе.
Gizmodo AMP и отметили значительные улучшения на своей мобильной версии. Они получили более 100 тысяч посещений страниц каждый день из-за скорости загрузки, которая стала в 3 раза быстрее, чем стандартные мобильные страницы. Конверсия также возросла на 50%. Исходя из этого, можно с уверенностью сказать, что АМР играет огромную роль в повышении Google Page Speed Insights.
Менее опытные пользователи могут воспользоваться плагином для WordPress — AMPforWP. У него около 80000 активных установок, постоянная поддержка и обновления. Плагин включает в себя конструктор страниц, который позволяет легко перетаскивать элементы страниц. Это один из самых простых способов создания AMP-контента. Все, что вам нужно сделать, это загрузить и установить плагин на панели инструментов WordPress и активировать его. Оттуда вы можете использовать конструктор страниц для каждого нового поста, которое вы загружаете. Затем эти страницы создают AMP-версию, которая будет отображаться в результатах мобильного поиска.
AMP — проверенный способ ускорить работу вашего мобильного сайта.Можно воспользоваться рядом других инструментов, которые уже более детально работают над поднятием рейтинга сайта.
Заключение
Создавая веб-сайт, вы тратите много времени, чтобы сделать его совершенным. Каждый элемент и каждое изображение должны быть первоклассными. Когда речь заходит о конверсии и посещении сайта, скорость всегда будет играть важную роль. Люди не хотят ждать 10 секунд, пока будет прогружаться сайт, поэтому они возвращаются к результатам поиска и выбирают другой сайт.
Google предлагает удобный сервис для выявления проблем, тормозящих работу вашего сайта. Потому что на основе скорости загрузки формируется список сайтов в поисковике. Используйте инструмент Google Page Speed Insights, чтобы выяснить проблемы, замедляющие прогрузку веб-страницы. Основной причиной медленной загрузки считают большие изображения, поэтому нужно начать с их оптимизации и сжатия. Затем следует воспользоваться плагинами для кэширования, которые быстрее загружают сайт и делают меньше запросов на сервере.
После этого обратите внимание на код. Ненужный код, замедляющий сайт, удаляется или редактируется на этом этапе. Заключительным шагом станет внедрение AMP. Он позволяет загружать страницы практически мгновенно.
Все эти проверенные инструменты помогают решить проблему медленной загрузки и заполучить заветные 100% в PageSpeed Insights.
marketer.ua
Почему не нужно беспокоиться о показателе Google PageSpeed Insights — Devaka SEO Блог
Как владелец сайта вы знаете, что он должен быть быстрым. И вы уже читали разные статьи о том, как ускорить свой сайт, возможно уже даже что-то внедрили. Дальше становится интересно, насколько же быстро загружается сайт. Тут вы идете в Google PageSpeed Insights, как самый популярный инструмент, получаете оценку и список рекомендаций от гугла. И здесь большинство из нас теряется:
- Важен ли показатель PageSpeed Insights для SEO?
- Почему оценка моего сайта не максимальна?
- Что значат все эти рекомендации?
Ранее вы включили на сайте кеширование и ожидали, что оценка PageSpeed будет почти идеальна, а теперь думаете, почему этот плагин не пофиксил всех проблем со скоростью? Может он не очень хорош? Короткий ответ в том, что:
Показатель Google PageSpeed не имеет значения.
Да, это так… но почему он не имеет значения?
Page speed vs PageSpeed Insights
Скорость (время загрузки сайта) имеет значение и является важной метрикой в SEO, а также влияет на пользовательский опыт. Когда гуглбот индексирует сайт, он не видит показатель PageSpeed, а только знает саму скорость. Знаете ли вы, что Google PageSpeed Insights не измеряет скорость вашего сайта? Да, прочитайте это ещё раз:
Google PageSpeed Insights не измеряет скорость сайта.
Для измерения скорости загрузки вы можете использовать GTMetrix или Pingdom Tools.
Вспомните занятия в школе. Говорили ли хорошие оценки о том, насколько ученик умный? Не обязательно. Они лишь значат, что вы знаете, как проходить тесты. Но большинство умных людей не ладят с тестами. То же самое с Google PageSpeed Insights, эта оценка не показатель скорости загрузки сайта.
Вот, к примеру, несколько сайтов с примерно одинаковой скоростью загрузки, но совершенно разными показателями PageSpeed:
Скорость загрузки здесь менялась от 5.5 сек до 5.7 сек, а показатель PageSpeed Insights от 47 до 81. Ниже пример еще одного сайта, имеющего низкий показатель PageSpeed, но при этом, в 1.5 раза быстрее тех сайтов, что упомянуты выше.
Из этих примеров видно, что Google PageSpeed совсем не индикатор скорости. Гнаться за этим показателем не стоит.
Выжимать максимум индикатора — пустая трата времени
Если вы попытаетесь получить идеальный PageSpeed, внедряя все рекомендации Google, вы быстро потеряете энтузиазм. Нельзя выполнить все рекомендации Google PageSpeed, так как их внедрение часто невозможно. Например, гугл предложит минимизировать или добавить кеширующих заголовков к скриптам, которые хостятся не на вашем сайте. Внедрить это невозможно.
Если гугл снизил оценку из-за изображений, которые можно оптимизировать на пару килобайт, то лучше не заморачиваться.
JavaScript и CSS, блокирующий отображение верхней части страницы
Частая рекомендация в PageSpeed Insights — удалить код JavaScript и CSS, блокирующий отображение верхней части страницы. Давайте рассмотрим подробней.
1. Удалить JavaScript, блокирующий рендеринг
Лучше конечно, когда JavaScript загружается в футере или же асинхронно, чтобы не блокировать рендеринг и не замедлять отображение страницы. Но иногда нереально все подгрузить в футере, особенно если вы не разработчик или используете готовую WordPress-тему. Если просто перенести весь код сверху вниз, то можно сломать какой-то функционал сайта.
2. Оптимизация CSS-кода
Если загружать CSS-стили внизу документа, то страница какое-то время отображается без стилей вообще, и будет выглядеть сломавшейся, может испортить пользовательский опыт. Тут Google подразумевает, что мы можем разделить CSS на две части, и самое важное (стили для элементов первого экрана) подгружать сверху, остальное в футере. Если вы разработчик или у вас есть верстальщик под рукой, то это можно внедрить, но на скорость загрузки такая тактика, практически, не повлияет, а только немного увеличит скорость отображения первого экрана и оценку PageSpeed.
Такой тип тюнинга используют сайты вроде Амазона, где каждые 10мс могут влиять на итоговую сумму. Для большинства малых сайтов это вряд ли на что-то повлияет.
Так в чем же польза Google PageSpeed?
Google PageSpeed полезен, если его не использовать с пристрастием. Этот инструмент укажет вам на проблемные зоны, на что стоит обратить внимание. Например, можно узнать, что некоторый контент на сайте не использует gzip-сжатие, или что есть куча больших изображений, которые можно сжать. Но основной целью должно быть улучшение скорости сайта, а не показателя PageSpeed.
Статья написана по материалам wp-rocket.
devaka.ru