Google PageSpeed Insights кардинально обновился, что изменится? / Habr
12 ноября Google по тихому обновил PageSpeed Insights, изменив в нем практически все. Это станет большой переменой для всей индустрии сайтостроения. Похоже, сейчас настанет некоторая волна паники и хайпа вокруг этого события. В статье — анализ перемен и что они нам принесут.
Что такое PageSpeed Insights
Буквально пару слов для тех, кто не в курсе. Вот уже 8 лет PageSpeed Insights является главной пузомеркой скорости сайтов, в нее можно ввести адрес страницы и узнать ее оценку по шкале от 0 до 100 вкупе с рекомендациями по улучшению.
Конечно, есть много других хороших инструментов для проверки скорости. Но так как этот — от Google, и они заявляли, что скорость сайта влияет на рейтинг в выдаче, для большинства эта оценка кажется самой важной. Особенно для заказчиков и начальников, и как результат — практически все пытаются поднять PageSpeed Score своих проектов, а метрика стала практически самой важной в индустрии.
Что изменилось?
Если коротко — все. Старый PageSpeed отставили в сторону, заменив его оценками и аналитикой Lighthouse, open-source инструмента для аудита сайтов, который помимо прочего встроен в Google Chrome.
Кардинальное отличие подхода — очки теперь присуждаются не за выполнение правил, а за скорость. Загрузка страницы оценивается по нескольким временным характеристикам — через сколько времени после начала загрузки уже что-то видно, когда уже можно кликать, насколько все тормозит, пока прогружается, и когда загрузится все. Эти характеристики сравниваются с показателями лучших сайтов и превращаются в баллы. Ниже мы разберем это подетальней, сейчас важен сам принцип.
Рекомендации есть, как и раньше — но теперь они несут совсем другую нагрузку. Рекомендации никак напрямую не связаны с баллами, и абсолютно не факт, что их воплощение улучшит ситуацию (но запросто может ухудшить при бездумной реализации).
Паника неминуема
Сейчас ночь 13го, и все относительно тихо. Только пару профильных ресурсов выложило короткие заметки об обновлении, только пару клиентов написали взволнованные письма о странном поведении PageSpeed Insights. Кажется, это затишье перед бурей.
Очевидно, что скоро очень много людей бросятся смотреть оценки своих проектов, накрывая сервис международным хабра-эффектом. Все будет работать через пень-колоду, глючить и пугать прыгающими оценками.
Это непросто, но постарайтесь расслабиться и сохранять спокойствие. Первое, что надо помнить — обновление PageSpeed Insights никак не влияет на принципы ранжирования в поисковой выдаче. Второе — понадобится не меньше двух недель, чтобы обновление обкатали, поправили и оно начало стабильно работать.
Размышления и прогнозы
В этих изменениях много позитива. Господство старого PageSpeed Insights с его принудительными рекомендациями наделало немало бед. Во первых, любая рекомендация может быть близка к бесполезной в вашей конкретной ситуации. Во вторых, ее можно реализовать в ущерб более важным вещам, например времени генерации страницы. Но выбора не было — приходилось все это делать, чтобы получить красивую оценку.
Например, чего стоит рекомендация о минификации html кода страницы? В среднем эта операция занимает около 100 мс, и эта задержка в десятки раз перекрывает любую возможную выгоду от уменьшения размера страницы. Единственный вариант, когда это может быть выгодно — если вы выдаете готовые заранее минифицированые страницы из кеша.
В любом проекте последних лет немало усилий уходило на оптимизацию изображений, минификацию и группировку ресурсов, отложенный запуск JavaScript, который бы ничего не сломал. Чаще всего это уводило фокус внимания от сути — скорости работы сайта для посетителей. Интернет был полон как примерами тормозных сайтов с отличными оценками, так и быстрых сайтов, которые оценивались плохо.
Теперь эта мишура будет понемногу отваливаться. На первых тестах оценки с минификацией-группировкой ресурсов и без практически не отличаются. Значимыми становятся реально важные вещи — как быстро сервер отвечает и сколько тяжелого материала на странице. Все свистелки — виджеты социальных сетей, интерактивные карты, чаты и роскошные попапы будут неумолимо бить по оценке, как их не заворачивай.
Вполне вероятно, что это все приведет к действительно быстрым сайтам и пониманию, как их делать. По крайней мере, очень хочется в это верить.
Новые метрики
А для самых стойких — подробный разбор новых метрик, которые влияют на оценку. Всего их 6, и они имеют разный вес в формировании финальной оценки. Пройдемся по ним в порядке уменьшения значимости.
1. Время загрузки для взаимодействия
Это самая важная характеристика — и самая тяжелая. Отметка времени, когда страница становится полностью готова к взаимодействию с пользователем. Этот момент наступает, когда:
- отобразилась страница
- зарегистрировались обработчики событий для большинства видимых елементов
- отклик на действия пользователя составляет менее 50 мс
По сути, страница должна прорисоваться, не тормозить и быть готовой реагировать на действия.
2. Индекс скорости загрузки
Показывает, насколько быстро контент страницы становится доступен для просмотра. Для оценки используется модуль Speedline.
Это время, когда страница в браузере перестает изменяться визуально. Для определения используется покадровое сравнение вида страницы.
3. Время загрузки первого контента
Показатель, который определяет интервал времени между началом загрузки страницы и появлением первого изображения или блока текста.
4. Время окончания работы ЦП
Этот параметр показывает время, в которое основной поток страницы становится достаточно свободен для обработки ручного ввода. Этот момент наступает, когда:
- большинство элементов на странице уже интерактивны
- страница реагирует на действия пользователя за разумное время
- отклик на действия пользователя составляет менее 50 мс
Русский перевод этой метрики немного теряет суть. В оригинале она звучит First CPU Idle — первый простой процессора. Но и это не совсем правда. Подразумевается момент в загрузке страницы, когда она уже в основном может реагировать на действия, хоть и продолжает прогружаться.
5. Время загрузки достаточной части контента
- случилось наибольшее изменение вида страницы
- прогрузились шрифты
6. Приблизительное время задержки при вводе
Это наименее значимая характеристика. Показывает время в миллисекундах, которое занимает реакция страницы на действия пользователя в течение самых занятых 5 с загрузки страницы. Если это время превышает 50 мс, пользователям может показаться, что ваш сайт притормаживает.
Каждая метрика сравнивается с показателями всех оцененных сайтов. Если у вас она лучше, чем у 98% сайтов, вы получаете 100 баллов. Если лучше, чем у 75% сайтов — вы получаете 50 баллов.
На первый взгляд, эти метрики весьма жизненные и обмануть их грязными манипуляциями, которые на самом деле не ускоряют сайт, будет практически невозможно.
Пока что остается загадкой принцип оценки мобильной версии сайта. Вернее, принцип тот же, но часто баллы ощутимо ниже. Непонятно, на какой виртуальной конфигурации мобильного устройства они прогоняются.
habr.com
Проверка скорости загрузки сайта в 2019 и Google PageSpeed Insights
После недавнего обновления компанией Google своего сервиса по оптимизации загрузки веб-страниц произошел настоящий переполох. Результаты измерений скорости большинства популярных ресурсов оказались в три раза ниже, чем были накануне запуска новых настроек в PageSpeed Insights . И если скорость загрузки сайта с лета 2018 года включена в число самых значимых факторов ранжирования поисковой системы Google, то как тут не впасть в панику? И что же это за сервис такой, который за одну ночь лишил покоя специалистов в области SEO-оптимизации по всему миру?
Что такое Google PageSpeed Insights
Этот бесплатный сервис не просто позволяет оценить, насколько быстро загружаются веб-страницы, но и помогает активно улучшать этот показатель. Инструмент создан для диагностики и оптимизации скорости ресурса и давно занял место в копилке каждого уважающего себя сеошника. Он как куратор «по беглости» для сайтов: наблюдает за их работой, анализирует, выявляет слабые места и подсказывает, какие ошибки нужно исправить. При этом сервис PageSpeed Insights не просто советует вам, над чем нужно поработать, но и показывает, сколько времени определенное действие по оптимизации скорости сэкономит при дальнейших загрузках.
Почему ПэйджСпид считают самым важным инструментом измерения скорости ресурса
Это очень удобный и простой в использовании сервис, в котором без труда разберется даже новичок. Притом он многофункционален и по этому параметру опережает большинство своих конкурентов. ПэйджСпид — один из немногих адаптивных сервисов, приспособленных для работы на мобильных устройствах. Большую роль играет и то, что этот инструмент для проверки скорости загрузки сайта тесно связан с одной из крупнейших поисковых систем в мире и заточен под нее. Чтобы начать работу, нужно лишь ввести URL-адрес сайта. Результаты предлагаются в двух вариантах: для загрузки страниц на компьютере и на мобильном устройстве. Оценка происходит по стобалльной шкале. Те, кто говорит, что 100 баллов — недостижимая планка, обманывают. Не верьте.
Стоит ли равняться на этот сервис
Мы не призываем выбирать те или иные инструменты, оптимизация — дело добровольное. Но если хотите, чтобы сайт хорошо ранжировался в Гугл, то PageSpeed Insights — действительно важный инструмент. Однако не забывайте, что балл — это лишь субъективная оценка сервиса, а не непреложный факт. Тем не менее, реальную скорость ресурса он показывает, раскладывая все по полочкам.
Есть и другие сервисы для измерения и оптимизации скорости, но не стоит выбирать себе «идола» и слепо поклоняться ему. Ни один из них, включая PageSpeed, не является эталоном. Эти инструменты созданы не для того, чтобы стремиться получить в них высший балл, как на экзамене, а для того, чтобы найти идеальную точку пересечения функциональности, юзабилити и скорости ресурса. А значит разумнее оптимизировать только то, что можно улучшить без ущерба другим характеристикам сайта, и не пытаться «подогнать под 100» все рекомендованные пункты. Не забывайте, что конечная цель — обеспечить максимально положительный опыт пользователю.
Обновление алгоритмов Google PageSpeed Insights
В июле Гугл запустил новый алгоритм — Speed Update, благодаря чему скорость загрузки стала фактором ранжирования поисковика. Ноябрьские обновления PSI (PageSpeed Insights) кардинально изменили сервис. Теперь он работает на базе аналитики Lighthouse , встроенного в браузер Google Chrome. Это инструмент с открытым исходным кодом, созданный для улучшения и контроля качества веб-страниц. Если раньше PSI оценивал ресурс по соблюдению определенных условий и выполнению задач, то теперь для получения высокого балла принимается во внимание только скорость. Важно, за какое время на странице появляется первый контент и его основная часть, сколько секунд нужно для полноценного взаимодействия пользователя с ресурсом, общий индекс скорости и другие характеристики.
В PageSpeed Insights добавлена функция раскадровки, состоящая из десяти слайдов, на которых вы можете увидеть очередность появления контента страницы. Кроме того, теперь сервис дает советы по использованию на ресурсе новых форматов картинок, — JPEG 2000, WebP и JPEG XR — которые весят меньше своих предшественников. Это важный параметр, особенно сильно он отражается на скорости загрузки сайтов, где значительную часть контента занимают различные изображения.
Что делать, если показатели Google PageSpeed Insights упали после последнего обновления
Ближайшие недели разработчики будут тестировать обновленный сервис на баги, которые уже успели обнаружиться, и устранять их. Сейчас при проверке скорости загрузки одного и того же сайта сервис может показать разные результаты, а то и вовсе объявить, что страница недоступна. В первом случае нужно делать 5-6 замеров подряд и ориентироваться на средний показатель, потому что сайты не статичны и их скорость тоже. Второй вариант — критичный, если такое происходит, нужно срочно ставить сайт на мониторинг доступности. В то же время не забывайте, что для наладки бесперебойного функционирования PSI нужен определенный срок, и чтобы сайт потерял высокую позицию в поисковой выдаче — тоже. За один день такие вещи не случаются. Поэтому паниковать не нужно, как и предпринимать необдуманные шаги — возможно, через пару недель придется их исправлять.
А вот что сделать следует:
сфокусируйтесь на мобильной версии — к ней Гугл предъявляет более серьезные требования и ставит ее в приоритет.
Отключите ненужные библиотеки и плагины, они сильно замедляют скорость загрузки сайта, но при этом даже не задействованы в отображении его контента. Тут есть тонкий момент: это работа только для опытных специалистов, иначе можно вовсе «сломать» сайт.
Сосредоточьтесь на достижении моментальной загрузки первого экрана: по новым условиям поисковой системы он должен быть готов к работе и взаимодействию с пользователем максимально быстро.
Переместите в футер (нижняя часть страницы) js, которые не участвуют в отображении страницы или, по крайней мере, первого экрана. Некоторые советуют и css перенести туда же, но делать так нельзя ни в коем случае. Это еще больше будет замедлять подготовку страницы к взаимодействию.
И не старайтесь достичь идеального показателя. Не зная нужных тонкостей, можно вместо улучшения качества ресурса нанести ему значительный урон. Идеальный вариант — попросить помощи у того, кто в этом отлично разбирается. После диагностики будет видно, все ли в порядке или что-то действительно нужно менять.
Как получить 100/100 в Google PageSpeed Insights
Далеко не все рекомендации сервиса способен выполнить среднестатистический владелец сайта и даже специалист по SEO-оптимизации. Иногда такие действия в неумелых руках приносят прямо противоположный результат, и в итоге ресурс начинает терять свои позиции в выдаче. Например, рекомендуемый сервисом PSI перенос JavaScript и css из хедера (верхней части страницы) в футер должен делать опытный программист, который знает, как правильно разместить эти элементы. Иначе блоки ресурса может «перекосить», а скорость упадет вместо того, чтобы улучшиться.
Поэтому, как уже говорилось выше, стремиться к результату 100/100 в PageSpeed Insights не всегда разумно, а если вы твердо решили достичь совершенства, делайте это с осторожностью. Помните, что пользователь важнее оценки PSI и он не должен видеть на вашем сайте куски верстки или съехавший дизайн страницы.
Польза сервиса
Несмотря на все подводные камни в работе с этим инструментом, он все же пользуется огромной популярностью и не просто так. Многие подсказки, касающиеся уменьшения размера скриптов, изображений и других элементов действительно полезны для повышения скорости загрузки сайта. Использование кэша браузера, рекомендуемое сервисом в некоторых случаях, тоже очень важная штука для ускорения ресурса, но совсем непростая даже для веб-мастеров. Поэтому, чтобы не напортачить, лучше поручить эту работу профессиональной команде по оптимизации сайтов. Например, вы можете позвонить нам. 🙂
22 актуальных инструмента для проверки скорости загрузки страниц сайта в 2019 году
Возможно, существует огромное количество инструментов для проверки скорости загрузки сайта, но среди них всего несколько действительно стоящих внимания:
Можно выполнить ту же задачу с помощью полезных инструментов для Chrome — Google Chrome DevTools . А можно и вовсе обойтись без расширений: нажмите Ctrl+Shift+i при открытой вкладке с вашим сайтом в Chrome и в консоли браузера выберите пункт Audits. Затем нажмите Run audits и подождите, пока Lighthouse проанализирует сайт и покажет результаты.
Какие параметры на самом деле важны при измерении скорости сайта в 2019 году
PSI выделяет шесть пунктов, определяющих итоговую оценку сервиса и представляющих реальную ценность при анализе скорости загрузки сайта.
Время загрузки первого контента
Это промежуток с момента открытия страницы и начала ее загрузки до появления на ней первого текста или картинки.
Индекс скорости загрузки
Это показатель скорости загрузки содержимого сайта до того момента, когда страница перестает изменяться визуально. То есть пользователь может видеть контент так, как он должен выглядеть.
Время загрузки для взаимодействия
Этот параметр показывает, сколько секунд нужно подождать пользователю для того, чтобы начать кликать по странице и отдельному ее контенту.
Время загрузки достаточной части контента
Это временной интервал, через который на веб-странице появляется основная часть ее материала. То есть сайт выглядит уже почти полностью готовым к полноценному просмотру.
Время окончания работы ЦП
Этот показатель Google PageSpeed Insights означает, что процессор подгрузил сайт достаточно для того, чтобы давать отклик на действия пользователя за адекватное время. Это может быть, например, ввод текста в поиске или клик на интерактивный элемент. Длительность ответа страницы не должна превышать 50 миллисекунд.
Приблизительное время задержки при вводе
Это время отклика страницы на действия пользователя в самые активные 5 секунд ее загрузки. Если в этот момент сайт реагирует дольше 50 мс, то создается эффект «подвисания» и посетителю кажется, что ваш ресурс «тормозит».
Чего ждать от обновленного Google PageSpeed Insights в этом году
Старая версия PSI зачастую высоко оценивала очень медленные ресурсы, а вот шустрые, наоборот, незаслуженно принижала. Обновленный сервис выводит на пьедестал действительно важные вещи — время отклика сервера и количество «тяжелого» контента на странице. Все громоздкие «украшения и побрякушки» будут только портить оценку и постепенно потеряют свою популярность.
Не за горами эра по-настоящему реактивных сайтов и хороших специалистов, умеющих их делать.
Заходите на loading.express и ускоряйте ваши сайты!
Слушайте наш подкаст про обновленный Google PageSpeed! 🎧
Расскажи о статье друзьям!
ax.digital
PageSpeed Insights теперь работает на Lighthouse. Как сделать новый аудит?
Недавно Google выпустил v5 своего API-интерфейса PageSpeed Insights, который теперь реализует технологию Lighthouse и интегрирует полевые данные, представленные в отчете Chrome User Experience Report (CrUX).Эта новая версия получила неоднозначный отклик у публики: в то время как некоторые люди начали видеть стремительный рост показателей PSI, другие впали в отчаяние, глядя, как их оценки упали.
Мы считаем, что надежный показатель оптимизации веб-производительности не должен зависеть только от PageSpeed Insights.
Но поскольку инструменты Google являются одними из наиболее часто используемых для проведения аудита производительности, давайте вместе посмотрим, что изменилось с новой PageSpeed Insights, и какие ключевые моменты вы всегда должны учитывать при обдумывании его рекомендаций.
CheckOffice – платформа мобильного аудита на основе чек-листов, сервис для автоматизации чек-листов, выявления и устранения нарушений в сетевых компаниях любого размера, подробнее на этом сайте.
Знакомство с Google Lighthouse
До сих пор Google использовал несколько инструментов для оценки производительности веб-сайтов, таких как PageSpeed Insights, WebPageTest, Test My Site, Chrome Developer Tools и Lighthouse.
Основная проблема использования различных инструментов для повышения производительности заключается в том, что они вырабатывают различные рекомендации, что приводит к путанице в процессе оптимизации веб-производительности, который не всегда прост для понимания.
Вот почему, по словам Google, пришло время упростить задачу и позволить разработчикам получать одинаковые рекомендации по производительности везде, независимо от того, какой инструмент Google они решили использовать.
Теперь, когда Lighthouse поддерживает PageSpeed Insights, вы должны получить тот же результат, независимо от того, выбираете ли вы свои рекомендации по производительности из Интернета, командной строки или Chrome DevTools.
Принимая во внимание этот контекст, стоит отметить, что с помощью этого нового инструмента Google нацеливается на очень специфический тип пользователей: разработчиков и технически подкованных людей, которые уже хорошо знакомы с лучшими практиками и решениями в области веб-производительности.
В то же время, если мы сосредоточимся на экосистеме WordPress, мы наблюдаем значительный интерес со стороны Google к тонкой настройке рекомендаций Lighthouse и делаем их более доступными для разработчиков WordPress и владельцев сайтов.
От Альберто Медины (Адвокат разработчиков в Google) :
Мы рассматриваем разработку проекта, называемого WordPress – локализованными пакетами рекомендаций для Lighthouse, с целью предоставления ориентированного на WordPress руководства с использованием Lighthouse. С его помощью разработчики и владельцы сайтов WordPress получат результаты аудита Lighthouse с учетом реалий платформы WordPress.
Теперь, прежде чем углубляться в детали нового API PageSpeed Insight, давайте выясним, что такое Google Lighthouse.
Что такое Google Lighthouse?
Lighthouse – технология, лежащая в основе этого обновления PSI v5. Согласно определению Google :
Lighthouse – это автоматизированный инструмент с открытым исходным кодом для повышения качества веб-страниц. Вы можете запустить его на любой веб-странице, общедоступной или требующей аутентификации. Он проводит аудит производительности, доступности, прогрессивных веб-приложений и многого другого.
Вы можете запустить Lighthouse в Chrome DevTools, из командной строки или в виде модуля Node. Вы даете Lighthouse URL для аудита, он запускает серию аудитов на странице, а затем генерирует отчет о том, насколько хорошо эта страница прошла. Оттуда используйте неудачные аудиты как индикаторы того, как улучшить страницу. Каждый аудит имеет справочный документ, объясняющий, почему аудит важен, а также как его исправить.
Код Lighthouse доступен в общедоступном репозитории Google Chrome GitHub.
Почему PageSpeed Insights обновляет игру?
Отныне новая PageSpeed Insights требует от всех нас корректировать способ чтения показателей производительности и интерпретировать аудиты оптимизации веб-производительности.
Когда вы измеряете страницу с помощью PageSpeed Insights, результат включает как лабораторные, так и полевые данные об этой странице. Вот как Google объясняет разницу между лабораторными и полевыми данными :
Лабораторные данные полезны для устранения проблем с производительностью, так как они собираются в контролируемой среде. Тем не менее, он не может захватить узкие места в реальном мире.
Полевые данные полезны для получения реального, реального пользовательского опыта, но имеют более ограниченный набор метрик.
Лабораторные данные по PSI основаны на различных показателях:
- First Contentful Paint
- First Meaningful Paint
- Speed Index
- First CPU Idle
- Time to Interactive
- Estimated Input Latency
Каждая из этих метрик получает оценку и (в) известный значок PSI: зеленая отметка, когда оценка хорошая (90+), оранжевый кружок для средней оценки и красный треугольник для самой низкой оценки.
Полевые данные, с другой стороны, основаны на наборе исторических статистических данных о том, как конкретная страница работала «в реальном мире»: она учитывает анонимные данные о производительности от реальных пользователей, которые посетили страницу с разных устройств, и в условиях сети.
Эти данные хранятся в наборе данных Chrome User Experience Report и отображаются в пользовательском интерфейсе в качестве классификации скорости: зеленая полоса для быстрых страниц, оранжевая полоса для средних страниц и красная полоса для медленных страниц.
Важно отметить, что не все сайты могут иметь достаточно полевых данных, доступных для отображения.
Почему вы должны читать оценки PSI по-другому
Проще говоря, в то время как лабораторные данные имитируют производительность страницы при фиксированном наборе условий (устройства и сети), полевые данные собирают среднее значение реальной производительности.
Теперь, когда все результаты PSI основаны на Lighthouse, мы должны интерпретировать результаты по-разному и по простой причине: Lighthouse моделирует загрузку страницы в мобильных сетях и устройствах среднего уровня.
Это настоящая революция новой версии PageSpeed Insight!
Каждый раз, когда вы читаете отчет PSI, вы должны помнить, что первый представленный экран – это производительность мобильных устройств: он описывает, как ваш веб-сайт работает в режиме мобильного подключения и, более того, на устройстве среднего уровня.
3 ключевых момента, которые следует помнить при запуске теста PageSpeed
Теперь, когда вы знаете, что для Google приоритет отдан мобильному устройству и его инструменту Lighthouse, давайте рассмотрим три ключевых момента, которые следует учитывать при запуске теста PageSpeed Insight с новым API:
1. Тесты PSI проводятся с использованием дросселированного соединения 3G
Возможно, это будет иметь значение, если ваши посетители используют низкоскоростные сети 3G. Как вы, возможно, знаете, средняя скорость загрузки на мобильных устройствах постоянно увеличивается: наши мобильные сети становятся все более и более мощными и могут работать в четыре раза быстрее, чем скорость соединения 3G.
Этот параметр не так важен, если ваша аудитория основана на странах, где мобильные сети 3G превосходят более быстрые соединения.
2. Местоположение сервера тестирования, используемого отчетами PSI, неизвестно
Это важный момент!
Предположим, ваш сервер находится в Атланте, ближайшей к вашей целевой аудитории, а тестовый сервер, используемый PageSpeed Insights, скажем, в Лос-Анджелесе.
Вы получите результаты, которые не соответствуют реальному сценарию, в котором посетитель, находящийся в Атланте, будет испытывать меньшее время загрузки, будучи географически ближе к вашему серверу.
Вот почему мы всегда предлагаем выполнить аудит производительности с помощью таких инструментов, как Pingdom и GTMetrix, которые позволяют вам выбирать разные расположения серверов (для GTMetrix вам необходимо создать учетную запись для доступа к списку расположений серверов).
3. Мобильное устройство (или эмулятор мобильного устройства), используемое PSI, представляет собой Moto G4 среднего уровня.
Мобильные устройства значительно различаются по мощности / характеристикам обработки, и это может оказать огромное влияние на время загрузки страницы.
Для загрузки смартфона новейшей технологии потребуется значительно меньше времени, чем в тех же условиях сети, и даже на пару лет старше.
Как справиться с новыми рекомендациями PageSpeed?
Наряду с упомянутым обновлением технологии, лежащим в основе алгоритма PageSpeed, стоит упомянуть несколько новых рекомендаций:
Давайте посмотрим их вместе:
Отложить неиспользованный CSS
Уведомление PageSpeed описывает эту рекомендацию следующим образом:
Удалите неиспользуемые правила из таблиц стилей, чтобы уменьшить ненужные байты, потребляемые сетевой активностью.
Когда вы используете предварительно созданные темы и плагины WordPress, они обычно содержат больше кода, чем необходимо для каждой страницы: это происходит потому, что автор не может предсказать, как конечные пользователи будут создавать свой сайт.
Например, на главной странице могут быть сетки, отображающие последние сообщения, в то время как внутренние страницы могут не содержать их. Но домашняя страница и внутренние страницы часто имеют одну и ту же таблицу стилей.
Это означает, что CSS для другой страницы должен быть загружен на главную страницу и наоборот.
Чтобы по-настоящему удовлетворить эту рекомендацию, вам нужно было бы настраивать свой сайт, а не использовать предварительно созданную тему WordPress и плагины.
Минимизировать работу основного потока
Хорошее объяснение этой рекомендации можно найти в этом руководстве Адди Османи, инженер-инженера из Google: оптимизация запуска JavaScript.
Что говорит PageSpeed, когда показывает примечание о минимизации работы основного потока, так это то, что ваш сайт сильно зависит от JavaScript.
JavaScript имеет высокую стоимость: он влияет на ваш сайт с точки зрения загрузки и исполнения, потому что чем медленнее пользовательское соединение, тем дольше будет загрузка страницы.
Но еще одна большая стоимость JavaScript, которую необходимо учитывать, – это время, необходимое для синтаксического анализа/компиляции кода после его загрузки: чем больше JavaScript вы отправляете, тем дольше процесс синтаксического анализа/компиляции, тем дольше ваши пользователи должны будут ждать начала взаимодействия с вашего сайта, особенно с мобильного.
Чтобы улучшить эту заметку, вам придется сократить использование JavaScript вашего сайта и отправлять его в браузер.
Сократить время выполнения JavaScript
Эта рекомендация строго связана с предыдущей и, опять же, JavaScript находится на пробной версии.
PageSpeed еще раз напоминает вам, что ваш сайт должен использовать меньше JavaScript, чтобы улучшить время выполнения страниц. Каждый раз, когда вы видите эту заметку, спрашивайте себя: « Неужели я посылаю слишком много JavaScript?».
Вероятно, ответ будет «Да!»
Есть много способов уменьшить использование JavaScript, и это не лучшее место для изучения этих безграничных возможностей, но хорошей отправной точкой могут быть ресурсы, перечисленные в разделе « Возможно, вам не нужен JavaScript».
Общим знаменателем этих трех новых рекомендаций является то, что все они требуют расширенной оптимизации, подтверждая то, что мы упомянули ранее: реальная цель PageSpeed Insights в этом контексте – эксперты, которые могут погрузить свои пальцы в собственный код.
Завершение
Многие владельцы вебсайтов увидели, что их оценки PageSpeed на мобильных устройствах упали.
Если вы один из них, помните, что для понимания новых результатов PageSpeed Insights вы должны рассмотреть различную природу Lighthouse.
Использование управляемого по умолчанию 3G-соединения, мобильного устройства среднего уровня и тот факт, что местоположение сервера не указано, являются слепыми пятнами нового инструмента PageSpeed Insight: лучше всего учитывать его результаты с учетом этого дополнительного контекста. максимально использовать его предложения.
Дополните отчеты отчетами других инструментов измерения производительности, таких как Pingdom и GTMetrix, и вы получите наиболее точную и реалистичную картину эффективности вашего веб-сайта!
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
andreyex.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/100 в Google Page Speed Test Tool
50% интернет-трафика уже сейчас приходится на долю мобильных устройств, и их пользователи ожидают, что страницы сайта будут загружаться практически мгновенно. Поэтому в этой статье мы рассмотрим, как при проверке скорости загрузки страниц бесплатным инструментом Google PageSpeed Insights Tool получить 100/100 баллов как для мобильной, так и для десктопной версии сайта.
Как увеличить скорость загрузки страниц
Прежде чем перейти непосредственно к советам, стоит обратить внимание, что Google PageSpeed Tool лишь предоставляет рекомендации, следуя которым можно достичь более высокой производительности сайта. Итоговый результат зависит, в первую очередь, от вашей серверной инфраструктуры, ресурсов и выбранных настроек.
Для применения некоторых советов требуются глубокие технические знания, для других — достаточно общего понимания принципов работы сайта. Все рекомендации подходят для использования в любой CMS системе.
Шаг #1: Оптимизируем изображения
PageSpeed Insights Tool проверит изображения на вашем сайте, и если скорость их загрузки окажется недостаточно высокой, Google предложит их оптимизировать. Вы можете увеличить скорость загрузки изображений, уменьшив их вес и размер. Чтоб решить эту задачу достаточно выполнить два шага:
- Для начала, сожмите все изображениями инструментами типа Compressor.io или TinyPNG. Оба инструменты бесплатны, но крайне эффективны. В некоторых случаях они сжимают картинки на 80% без потери качества.
- Уменьшите размер изображений до минимально возможного. Допустим, вы хотите, чтоб размер отображаемой на сайте картинки составлял 150x150px. В таком случае фактический размер изображения, хранящегося на вашем сервере, не должен превышать размеров отображаемого изображения, то есть он также должен составлять 150x150px. Не стоит подгонять размер картинки с помощью CSS или HTML кода.
Вы можете выгрузить все изображения, сжать их и изменить размер. Неплохо взять за правило оптимизировать каждое новое изображение перед добавлением на сайт. То есть все изображения должны быть правильного размера и сжаты без потери качества.
Google предложит сразу загрузить оптимизированные изображения на сайт.
Шаг #2: Максимально сократите CSS и JavaScript код
Google может попросить вас сократить JavaScript и CSS код.
Под сокращением в первую очередь подразумевается удаление лишних пробелов, пустых строк, ненужных комментариев и так далее, которые разработчики оставляют при написании кода. Все вместе эти нежелательные элементы могут увеличить размер JavaScript и CSS файла в два раза.
Например, код в документе, приведенном ниже,
может быть сокращен до:
Чтобы быстро решить эту задачу можно установить на свой сервер инструмент, который называется Gulpjs. На основе вашего файла он автоматически создает новый CSS файл, в котором удалены все ненужные пробелы. Фактически, этот инструмент может помочь сократить размер файла в два раза. Еще больше информации о том, как удалить лишние элементы кода, можно почерпнуть в официальном справочном руководстве Google.
А для сайтов на WordPress рекомендуется установить плагин Autoptimize.
Шаг #3: Используйте кэш браузера
Для многих сайтов пункт об использовании кэша браузера — настоящее испытание. Для решения этой проблемы можно использовать сеть CDN.
CDN — это сокращение от content delivery network, то есть “сеть доставки контента”. Чаще всего это множество серверов со специализированным ПО, которые ускоряют доставку (“отдачу”) контента конечному пользователю. С её помощью можно кэшировать и сохранять многие элементы сайта, такие как изображения, CSS и JavaScript файлы. CDN хранит копии содержимого сайта на серверах. Если пользователь заходит на сайт, контент для него загружается с ближайшего к нему сервера.
Допустим, главный сервер вашего сайта расположен в Техасе, если вы не используете CDN, то пользователь, который находится в Амстердаме, будет вынужден ждать, пока ваш американский сервер загрузит для него контент, а это может занять немало времени. В то же самое время использование CDN позволяет загружать сайт из точки, расположенной к пользователю максимально близко. А в данном случае, максимально близко к Амстердаму.
Как результат, сайт загружается значительно быстрее.
Если вы переместите все изображения, файлы JavaScript и CSS на сеть CDN, то ваши удаленные пользователи сразу заметят ощутимое увеличение скорости загрузки страниц. Но даже использование CDN не гарантирует, что вы пройдете тест Google. Google также обращает внимание на все внешние ресурсы, которые вы используете на своем сайте.
Эту проблему можно решить, заменив счетчики изображениями, которые вы можете спокойно хранить с помощью CDN. Вместо того чтобы размещать сторонние скрипты, которые получают информацию о количестве подписчиков из Twitter, Facebook, Google Plus и других соцсетей, можно хранить эти данные самостоятельно, снизив, таким образом, скорость загрузки страниц.
Если ваш сайт интегрирован с Google Analytics и вы не хотите отказываться от интеграции, то решение проблемы может потребовать дополнительных усилий.
Google редко меняет код Analytics, как правило, не более пары раз за год, поэтому можно создать скрипт, который будет проверять Analytics на наличие изменений раз в сутки. Новый код будет загружаться только, если были обнаружены изменения. В таком случае, вы сможете спокойно хранить JavaScript код Analytics, не скачивая его при этом с серверов Google каждый раз при обращении к ним.
Если скрипт обнаружит изменения, то новая версия автоматически скачается и сохранится в вашей сети CDN.
Та же самая операция будет повторяться каждый раз, когда происходит обновление кода. Новая версия скачивается и сохраняется на CDN. Этот же скрипт можно использовать и для других сторонних ресурсов.
Шаг #4: Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы
Удаление кода, блокирующего отображение верхней части страницы — один из самых сложных моментов при оптимизации скорости загрузки страницы, поскольку требует глубоких технических знаний. Обратите внимание, что код JavaScript следует всегда размещать в конце файла.
Если ваш сайт на WordPress, то решить задачу вам может помочь тот же самый плагин Autoptimize. Зайдите в настройки, уберите галочку возле “Force JavaScript in Head” и поставьте рядом с “Inline all CSS.”
Шаг #5: Включите сжатие
Включить сжатие можно прямо в настройках вашего сервера. Если вы не знаете, как это сделать, обратитесь к вашему системному администратору и попросите включить GZIP сжатие на сервере.
Шаг #6: Оптимизируйте сайт для мобильных устройств
То, насколько удобно пользователям мобильных устройств работать с вашим сайтом, зависит от многих факторов, в первую очередь от того, оптимизирован ли дизайн сайта под мобильные устройства, как он отображается у пользователя, насколько хорошо подобран фон, удобно ли продумана навигация по сайту и так далее.
Google Chrome позволяет проверить, как ваш сайт будет отображаться при просмотре на разных мобильных устройствах. Нажмите на контекстное меню в правом верхнем углу, после этого выберите пункт “Дополнительные инструменты”, а затем “Инструменты разработчика”. В выпадающем меню вы можете выбрать тип устройства и проверить, как выглядит ваша страница при просмотре с каждого из них.
Заключение
В статье перечислены только самые основные шаги, которые можно предпринять чтобы оптимизировать скорость работы сайта. Обратите внимание, что не стоит останавливаться на оптимизации только главной страницы, необходимо также уделить внимание внутренним страницам.
Ниже кратко перечислены три основных шага, которые помогут добиться более высокой производительности сайта:
- Используйте сеть CDN (content delivery network).
- Удалите код, блокирующий отображение верхней части страницы. (Не размещайте JavaScript в середине файла. Код JavaScript должен находиться в конце документа).
- Оптимизируйте размер изображений и сожмите их.
Ставили ли вы перед собой задачу оптимизировать скорость работы сайта? Если да, то какие шаги вы предпринимали?
(перевод и адаптация статьи Felix Tarcomnicu How to Achieve 100/100 with the Google Page Speed Test Tool)
spark.ru
Обновленная версия Google PageSpeed Insights
Содержание:
- Что использует обновленная версия Google Pagespeed Insights?
- Какие данные доступны в обновленном инструменте?
Что использует обновленная версия Google Pagespeed Insights?
Google выпустил 5 версию своего инструмента Google Pagespeed Insights. В этой новой версии Google стал использовать реальные данные пользователей для измерения скорости загрузки сайта.
Обновленная версия использует инструмент скорости от Google — Lighthouse (автоматизированный инструмент для улучшения качества веб-страниц с открытым исходным кодом).
Какие данные доступны в обновленном инструменте?
Раньше инструмент выглядел так (рис. 1).
Рисунок №1 — Google Pagespeed Insights до обновления
Как выглядит инструмент теперь (рис. 2).
Рисунок №2 — Обновленная версия Google Pagespeed Insights
- Данные наблюдений: показывает данные о первой отрисовке контента(FCP) — время от начала загрузки до момента загрузки первого изображения и данные о первой задержке ввода(FID) — момент, с которого пользователь начинает взаимодействовать с сайтом.
- Имитация загрузки страницы: показывает данные анализа страницы с помощью Lighthouse, которые имитирует, как мобильное устройство загружает страницу. Он вычисляет набор показателей производительности для страницы (например, время загрузки первого контента (FCP) и время загрузки для взаимодействия — Time to Interactive) и суммирует эти показатели с оценкой производительности от 0 до 100. Оценки подразделяются на три уровня.
- Оптимизация: показывает способы оптимизации конкретной страницы, включая описание проблемных областей, и насколько они замедляют страницу.
- Диагностика: представляет собой отчет о производительности вашего сайта: кэширование, размер DOM, нагрузка, JavaScript и многое другое.
- Успешные аудиты: показывает перечень успешных аудитов.
Это обновление инструмента PageSpeed Insights значительно улучшило данные и показатели по измерению скорости вашей страницы. Это даст возможность для более точного анализа того, что нужно исправлять, где и как сможете улучшить свои страницы и тем самым увеличить скорость своих страниц.
Автор Ирина Старченко
практикующий Seo-специалист
и программист любитель
seolab.dp.ua
Google: обновление PageSpeed Insights
После 12 ноября Интернет уже не будет прежним — Google кардинально изменил принципы работы PageSpeed Insights (PSI). Главным критерием оценки стала скорость.
Было/стало
В старой версии PageSpeed Insights баллы присуждались сайту за выполнение определенных правил. 95-98 из 100 считались серьезной заявкой на лидерство и получить их можно было за сжатие изображений, оптимизацию CSS, JacaScript и видимого контента и пр.
В обновленном PSI упор делается исключительно на временные характеристики работы сайта, изменилась шкала оценки. Если до ноября 2018 г. нижняя граница зеленой зоны начиналась с 80 баллов, то сейчас поднялась до 90. Для середнячков нижняя граница, наоборот, опустилась с 60 до 50, а несоответствующими требованиям считаются ресурсы в диапазоне 0-49 против старых 0-59 балов. Для наглядности мы сделали таблицу, но сравнивать старую и новую оценки, на самом деле, некорректно — они определяются по разным параметрам.
|
Оценочная шкала |
Зеленая зона |
Желтая зона |
Красная зона |
|
Старая (качественная/балльная) |
Good, 80-100 |
Medium, 60-79 |
Low, 0-59 |
|
Новая (скоростная) |
Fast, 90-100 |
Average, 50-89 |
Slow, 0-49 |
В обновленном PSI к балльному методу оценки прибавились числовые характеристики скорости. Теперь можно увидеть, сколько длится каждый этап загрузки сайта.
Метрики нового PageSpeed Insights
Вернемся к показателям скорости. Их 6:
- Время загрузки первого контента. Период до появления на странице первых изображений или текста.
- Индекс скорости загрузки. Промежуток, когда страница перестает визуально меняться. Модуль Speedline определяет этот промежуток, проводя покадровую съемку и сравнение данных.
- Время загрузки для взаимодействия. По сути это time to interactive — период времени, который требуется для того, чтобы сайт начал отзываться на действия пользователя.
- Время загрузки достаточной части контента. Секунды, за которые на странице подгружаются шрифты и появляются основные элементы.
- Время окончания работы ЦП. К моменту окончания работы ЦП подгружаются и готовы отвечать на действия пользователя пусть не все, но базовые интерактивные элементы.
- Приблизительное время задержки при вводе. Время, за которое страница реагирует на действия посетителя в течение 5 с после загрузки.
У показателей разная значимость. Time to Interactive — ключевой. Estimated Input Latency — наименее важный.
Как теперь оптимизировать сайт под Google
«После изменений оценка скорости стала более адекватной и полезной. В прошлом показатели, которые оценивались GPI, зачастую не отражали реального положения дел. Сейчас же оценивается именно скорость загрузки сайта. В аудит добавили новые параметры, и теперь рекомендации из разделов оптимизация и диагностика могут помочь улучшить отображение сайта не только для поисковой системы, но и для пользователя. На мой взгляд, удачное обновление».
Хрусталева Екатерина, Специалист отдела маркетинга Nowmedia
Сервис работает не очень стабильно — идет отладка и обкатка, но первые опыты показали, что на основные параметры скорости негативно влияют:
- всплывающие окна;
- интеративные карты, автоматом подгружающиеся при открытии страницы;
- виджеты ВКонтакте, Facebook, Одноклассников;
- чаты онлайн-консультантов;
- подгружающиеся на всей странице, а не на видимой ее части, картинки.
PSI дает рекомендации по улучшению скорости загрузки. Удобно, что сразу прогнозирует экономию времени в секундах.
Пробуем убрать интерактивную мишуру и выигрываем несколько баллов вкупе с приятной прибавкой скорости по основным показателям… Тенденция ясна.
На лицо стремление Google к аскезе. Минимум примочек, ненужных красивостей, отвлекающих деталей. Главное — быстрота и полнота ответа за запрос пользователя.
Запросить коммерческое предложение
на техническую поддержку сайта
Заявка на расчет
nowmedia.ru