Слушайте выпуск подкаста про обновленный Google PageSpeed Insights! 🎧

27 мая 2020 года Google снова обновил PageSpeed Insights, а точнее версию движка, на котором работает ПейджСпид на Lighthouse 6. Результаты проверки скорости многих популярных ресурсов оказались в два-три раза ниже, чем были.

Скорость сайта с июля 2018 года включена в число значимых факторов ранжирования поисковой системы Google – как это использовать?

0:40 Алексей Махметхажиев о себе

3:12 Антон Белогордцев пришел к ускорению сайтов

3:57 О dial-up и скорости интернета

5:11 Начало презентации. 6 способов увеличить PageSpeed

5:24 Что такое PageSpeed Insights от Google

5:40 Что измеряет Lighthouse

6:48 Как правильно измерять скорость загрузки сайта

10:19 Как строится итоговая оценка Google PageSpeed Insights и из чего состоит оценка

12:26 Про калькулятор Lighthouse в PageSpeed Insights, где его найти

14:37 Как ускорить загрузку сайта, от чего зависит

15:28 Вопрос от зрителей, как подключать Метрику и Аналитикс. Помогает ли перенос скрипта вниз HTML.

17:15 Параметр скорости сайта FCP (First Contentful Paint), первая отрисовка контента, что это такое и как измеряется

18:52 Зоны допустимости показателя FCP

20:15 Как улучшить показатель первой отрисовки сайта FCP

26:36 Вопрос про плагин для подсветки скорости сайтов в выдаче  

28:05 О Web Vitals плагин для браузера

30:15 Сервис BatchSpeed  

30:54 Параметр TTI (Time to Interactive)  — время до взаимодействия, до интерактивности, для улучшения скорости сайта  

33:43 Про параметры оценки TTI

34:16 Способы улучшения показателя TTI (Time to Interactive)

40:21 Как насчет jQuery Slim

40:32 Чем заменить код jQuery для WordPress

41:31 Ускорение сайтов на популярных CMS и цена услуги ускорения сайтов

45:10 Как увидеть скорость в динамике замера каждые 5 секунд - замер скорости ответа сервера.

46:26 Слайдер на 400Кб много для скорости сайта

47:12 Про рейтинг скорости сайтов застройщиков Петербурга - https://loading.express/developers-spb

50:09 9/10 что означает данный показатель на Loading.express - надо ли ускорять сайт  

52:24 Почему загрузка мобильной версии всегда хуже, чем у десктопной версии сайтов  

54:18 Насколько увеличит показатель скороси сайта CDN (CloudFlare или W.tools): подробный эфир на эту тему - https://youtu.be/IrYD8ZT584c

58:00 Что такое Speed Index и его показатели  

59:00 Как улучшить Speed Index - просто  

59:19 TBT (Total Blocking Time) общее время блокировки сайта - что это? Новый параметр измерения? FID и TBT в чем отличие.

1:03:35 Как воспринимают люди скорость интернета, своего устройства или сайта

1:05:25 Как оптимизировать показатель TBT (Total Blocking Time)  

1:08:34 Оптимизируем long tasks, смотрим примеры из PageSpeed Insights

1:09:26 LCP (Largest Contentfull Paint) самый большой отрисованный элемент на вашем сайте, пример

1:10:08 Про отрисовку крупного контента LCP

1:12:47 Диапазоны показателей LCP

1:13:18 Улучшение LCP на реальном опыте  

1:15:58 А если текст LCP. Почему нельзя включать LazyLoad на первом экране.

1:17:27 HTTP/2 Push Server как работает и для чего нужен (целый эфир про это https://youtu.be/mXrVhH5jcUs)

1:18:06 CLS (Cumulative Layout Shift) последний параметр оптимизации PageSpeed Insights — CLS (Cumulative Layout Shift)

1:20:06 Что такое CLS на языке Google / Смещение элемента  

1:21:50 Допустимые показатели CLS

1:22:24 Как же улучшить CLS?

1:23:39 100% рабочий способ для автоматического ускорения сайта

1:25:23 Статистика из Loading.express.

1:28:16 Наработки из LOADING.express для улучшения показателей (https://scripts.loading.express)

1:36:11 Как бороться с unusedCSS & unusedJS

1:45:16 Все, что было раньше FCP, TTI, SpeedIndex должно грузиться не более 50 мс

1:47:16 Место размещения счетчиков метрики?

1:49:22 Как разбить выполнение js на мелкие задачи?

1:52:37 Как отложить пиксель Facebook?

1:53:05 Цена за оптимизацию сайта начинается от 19 тысяч рублей?

1:59:13 Примеры сайтов, которые Антон с Алексеем реально ускорили

1:59:51 Информация о бесплатном мониторинге

2:00:15 LazyLoad для картинок в вашем пакете скриптов откладывает загрузку всех картинок кроме первого экрана  

2:01:26 Будет ли ваш набор наработок работать в shopscript webasyst? Не будет ли конфликтов с плагинами и темами?

2:04:39 Настроить отложенную загрузку скрытых изображений? Влияет ли на индексацию?

2:11:01 Метрика как замедлитель скорости. Про новую Яндекс.Метрику  

2:11:57 К LСP относится все крупные элементы, которые отрисовываются на первом экране?

2:12:34 Тег picture, и форматы webp, jpeg

Каждая лишняя секунда загрузки уводит клиентов. Ваш сайт загружается быстрее 3 секунд? Проверьте:

Google Webmaster Central Blog говорит

Читайте блог для вебмастеров от Гугл здесь.

Chrome для разработчиков можно скачать на официальном сайте - www.google.com/chrome/dev/.

Что такое Google PageSpeed Insights

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

Почему Гугл ПэйджСпид считают важным инструментом измерения скорости сайта

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

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

Screenshot-at-Aug-16-07-02-23

Стоит ли равняться на этот сервис

Только на него равняться вредно. Нельзя. Это как сходить к нескольким врачам до серьезной операции. Три инструмента проверки смогут дать картину в 3D. Какие три мы советуем и почему:

  1. Loading.express – проверки из России, Украины, Белоруссии и Германии. Работает на технологии Lighthouse, но использует свою калькуляцию теста скорости.
  2. WebPageTest – много технического, сложного, но инструмент актуальный и наиболее прокачан по локациям проверки сайта.
  3. Пейдж Спид от Гугл. Измеряет скорость сайта из Европы.

Кстати, на loading можете сделать замер прямо из этой строки проверки:

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

Screenshot-at-Aug-16-07-51-18

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

Обновление алгоритмов Google PageSpeed Insights

В июле Гугл запустил новый алгоритм — Speed Update, благодаря чему скорость загрузки стала фактором ранжирования поисковика. Ноябрьские обновления PSI (PageSpeed Insights) кардинально изменили сервис. Теперь он работает на базе аналитики Lighthouse, встроенного в браузер Google Chrome. Это инструмент с открытым исходным кодом, созданный для улучшения и контроля качества веб-страниц.

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

В PageSpeed Insights добавлена функция раскадровки, состоящая из десяти слайдов, на которых вы можете увидеть очередность появления контента страницы. Кроме того, теперь сервис дает советы по использованию на ресурсе новых форматов картинок, — JPEG 2000, WebP и JPEG XR — которые весят меньше своих предшественников.

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

Что делать, если показатели Google PageSpeed Insights низкие

Why-your-slow-website-is-losing-business

Для начала важно знать, что нужно делать 5-6 замеров подряд и ориентироваться на средний показатель, потому что сайты не статичны и их скорость тоже.

Фокусируйтесь вот на чём:

Мобильная версия — к ней Гугл предъявляет более серьезные требования и ставит ее в приоритет. А с 2019 года мобильный трафик превысил десктопный в России.

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

Сосредоточьтесь на достижении моментальной загрузки первого экрана: по новым условиям поисковой системы он должен быть готов к работе и взаимодействию с пользователем максимально быстро.

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

И не старайтесь достичь идеального показателя. Не зная нужных тонкостей, можно вместо улучшения качества ресурса нанести ему значительный урон. Идеальный вариант — попросить помощи у того, кто в этом отлично разбирается. После диагностики будет видно, все ли в порядке или что-то действительно нужно менять.

Как получить 100/100 в Google PageSpeed Insights

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

Для того, чтобы скорость загрузки была максимальная, нужно отлично знать CSS, JS и серверную часть. Такие специалисты всегда стоят от 1500 до 5000 рублей за час работы. На средний сайт нужно потратить 10 часов. То есть 20.000 рублей это та цена, от которой начинаются настоящие специалисты.

Если вам предлагают сделать 100/100 за 3000 рублей, то возможно вам сделают костыль, который и правда покажет 100 из 100, потому что Гуглу можно отдать другую версию сайта или просто оптимизированную картинку. Вы ничего и не заметите. Но Гугл видит всё.

Польза сервиса

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

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

12 актуальных инструментов для проверки скорости загрузки страниц сайта в 2020 году

Slow-site-spefgfgted

Мы нашли, протестировали и отобрали для вас эти сервисы. Сверху самые используемые нами, ниже все остальные. Интересные все, наслаждайтесь:

Можно выполнить ту же задачу с помощью полезных инструментов для Chrome — Google Chrome DevTools. А можно и вовсе обойтись без расширений: нажмите Ctrl+Shift+i при открытой вкладке с вашим сайтом в Chrome и в консоли браузера выберите пункт Audits. Затем нажмите Run audits и подождите, пока Lighthouse проанализирует сайт и покажет результаты. Результаты будут именно с вашего устройства и локации. У соседа будут другие показатели.

Какие параметры на самом деле важны при измерении скорости сайта в 2019 году

google-speed-test

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

Largest Contentful Paint (LCP)

Это новейшая метрика, по которой планируется измерять скорость с августа 2019. Информация о ней есть в первых абзацах статьи.

Время ответа сервера

Это ваш хостинг. Замерить время ответа сервера можно здесь -  ping.loading.express.

Время загрузки первого контента

Это промежуток с момента открытия страницы и начала ее загрузки до появления на ней первого текста или картинки.

Индекс скорости загрузки

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

Время загрузки для взаимодействия

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

Время загрузки достаточной части контента

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

Время окончания работы ЦП

Этот показатель Google PageSpeed Insights означает, что процессор подгрузил сайт достаточно для того, чтобы давать отклик на действия пользователя за адекватное время. Это может быть, например, ввод текста в поиске или клик на интерактивный элемент. Длительность ответа страницы не должна превышать 50 миллисекунд.

Приблизительное время задержки при вводе

Это время отклика страницы на действия пользователя в самые активные 5 секунд ее загрузки. Если в этот момент сайт реагирует дольше 50 мс, то создается эффект «подвисания» и посетителю кажется, что ваш ресурс «тормозит».

Чего ждать от обновленного Google PageSpeed Insights в 2020

Старая версия PSI зачастую высоко оценивала очень медленные ресурсы, а вот шустрые, наоборот, незаслуженно принижала. Обновленный сервис выводит на пьедестал действительно важные вещи — время отклика сервера и количество «тяжелого» контента на странице. Все громоздкие «украшения и побрякушки» будут только портить оценку и постепенно потеряют свою популярность.

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

Заходите на loading.express и ускоряйте ваши сайты!

Слушайте наш подкаст про обновленный Google PageSpeed! 🎧