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

Google часто ссылается на PageSpeed ​​как на важный фактор ранжирования как для Google Search, так и для Google Ads (например: Скорость теперь является фактором целевой страницы для Google Search и Ads). Но дело не только в хорошем рейтинге — быстро реагирующие веб-сайты имеют огромное значение для показателей сайта показатель отказов и коэффициент конверсии. 47% потребителей ожидают, что веб-страница загрузится в течение двух секунд или меньше. 40 % пользователей будут ждать не более трех секунд, пока веб-страница отобразится, прежде чем покинуть сайт.

Каковы ключевые показатели Google PageSpeed:

  • First Contentful Paint — момент, когда самый первый фрагмент контента доставляется на вашу страницу через браузер.
  • Первая значимая отрисовка — точка, в которой пользователь может увидеть существенный, значимый фрагмент контента в окне браузера.
  • Первый простой ЦП – момент, когда ваше устройство загрузило достаточно содержимого веб-страницы, чтобы иметь возможность обрабатывать вводимые пользователем данные, такие как прокрутка, нажатие кнопок или ввод данных в поля.
  • Время до интерактивности — момент, когда сайт полностью загружается и пользователь может взаимодействовать с ним.
  • Расчетная задержка ввода – показатель того, насколько хорошо код javascript преобразуется в адаптивную веб-страницу (т. е. без задержек в браузере).

Каждая метрика имеет различный вес:

Факторы, которые обычно снижают показатель скорости страницы веб-сайта:

  • Использование изображений большого размера: все изображения, загруженные на ваш сайт, должны соответствовать размеру пикселей, который они отображают в браузере. Обычно эта практика идет наперекосяк при использовании WordPress или других продуктов CMS, и ответственность за загрузку изображений возлагается на неопытного или нетехнического сотрудника.
  • Медленный хостинг-провайдер: часто компании наивно выбирают дешевый хостинг у бюджетной компании, не понимая важности высокопроизводительного хостинга веб-сайтов. Многие из наших клиентов имеют болезненный опыт работы с высококлассными бюджетными хостинг-провайдерами, которые ужасно не могут предоставить эффективный хостинг.
  • Несжатые ресурсы: файлы и изображения JavaScript можно сжимать с помощью таких инструментов сжатия изображений, как gzip.
  • Некэшированные конечные точки/запросы на стороне сервера: часто сайты, использующие API на серверной части, не обеспечивают кэширование конечных точек, что может сократить время загрузки.

Переход к клиентским приложениям

Традиционно подавляющая часть обработки веб-страницы происходила на стороне сервера с использованием таких языков, как PHP, Ruby, Java, .Net или Python. Однако в последние годы произошел значительный технологический сдвиг в сторону современных фреймворков javascript на стороне клиента, таких как React, Angular и Vue.

Фронтенд-фреймворки javascript разрушили традиционную парадигму программирования для веб-приложений, переопределив структуру веб-приложений. Теперь гораздо больше контента веб-сайта загружается на внешний интерфейс (с использованием файлов javascript). Это включает исторические функции на стороне сервера, такие как: поиск данных, управление состоянием (сеансами), управление URL-адресами, бизнес-логика и правила проверки данных.

Перенос такого большого количества функций с сервера на клиент часто приводит к проблемам со скоростью загрузки страниц, затрагивающим многие новые приложения сборки. Медленная загрузка веб-страниц является ключевой проблемой. Критерии Google «первое содержательное рисование» и «первое осмысленное рисование», важные показатели ранжирования, как правило, имеют низкий рейтинг в современных JS-фреймворках. Браузер вынужден ждать загрузки всех ресурсов, затем файлы javascript обрабатываются для рендеринга приложения — более сложный и медленный процесс, чем рендеринг на стороне сервера.

Структура React и SSR

Поскольку React является нашим предпочтительным интерфейсным инструментом, мы решили исследовать решения для рендеринга на стороне сервера для платформы, стремясь повысить производительность и предоставить оптимизированное для производительности решение для наших клиентов.

Рендеринг на стороне сервера — это попытка объединить преимущества современных JS-фреймворков, таких как React (богатый интерфейс, удобная работа в браузере), с некоторыми преимуществами рендеринга на стороне сервера, такими как более быстрое время загрузки и поисковая оптимизация (SEO). через легко индексируемый контент.

SSR с Next.js предлагает разработчикам жизненно важную функцию, а именно возможность отображать различные аспекты приложения, такие как основные вызовы API, на стороне сервера. Представьте себе страницу блога, способную эффективно захватывать содержимое сообщений, отображать его на стороне сервера браузера, а затем завершать отображение контента с более низким приоритетом на стороне клиента после первоначальной загрузки страницы. В таком сценарии метрики Google PageSpeed ​​(например, «первая содержательная отрисовка» и «первая содержательная отрисовка») учитываются, поскольку быстро загружается важный «значимый» контент. Менее значимый контент загружается браузером последовательно и ненавязчиво.

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

Один из основных недостатков современных фреймворков javascript, который мало кто понимает, заключается в том, что интерфейсные визуализированные приложения не приводят к легко индексируемому исходному коду. Код приложения остается в файлах javascript, обрабатываемых клиентом, значимый файл исходного кода html не создается.

Внедрение рендеринга на стороне сервера с помощью Next.js позволит вашему приложению генерировать исходный HTML-код, удобный для поисковых систем. По умолчанию приложения React включают только корневой элемент, в который загружается исходный файл javascript. Javascript отображает содержимое страницы только на стороне клиента (как виртуальный DOM), поэтому индексация зависит от индексации javascript поисковой системы в зависимости от совместимых методов кода разработчика.

Next.js в производственном режиме также обеспечивает сжатие файлов javascript и объединение кода для клиента, что значительно ускоряет начальную загрузку.

Еще одна оптимизация на стороне клиента, которая должна быть основным элементом развертывания любого веб-сайта, — это сжатие файлов CSS. Такие инструменты, как SASS и Gulp, которые можно комбинировать с React, позволяют разработчикам минимизировать/сжимать свои правила стилей в один файл или даже создавать отдельные файлы, такие как таблица основных стилей для базовых стилей и файл необязательных стилей, загружаемых после первоначального рендеринга, чтобы максимизировать производительность скорости страницы.

Обычно разработчики полагаются на сторонние решения для общих инструментов, таких как вездесущий Twitter Bootstrap.js для CSS или API карт Google. Чтобы повысить производительность, разработчикам следует по возможности загружать эти активы из удаленной CDN. Удаленные CDN облегчают нагрузку на внутреннюю серверную инфраструктуру сайта по доставке ресурсов и позволяют браузеру клиента извлекать ресурсы из нескольких мест, сводя к минимуму задержки блокировки в конвейере ресурсов.

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

Перестроив наш сайт с помощью Next.js и внеся некоторые оптимизации на стороне сервера, мы смогли сдвинуть показатели скорости страницы нашего сайта (построенного на React) с 75 и 65 до приличных 100 для скорости страницы на рабочем столе и 99. для скорости мобильной страницы.

Нажмите на ссылку здесь, чтобы проверить PageSpeed ​​вашего сайта: https://developers.google.com/speed/pagespeed/insights/

Полезные ссылки:

Марк Райс — независимый консультант по стартапам и инженер-программист, основатель Inspire Digital, веб-агентства в Великобритании, предлагающего современные высокопроизводительные веб-приложения в сочетании с цифровым маркетингом, хостингом и решениями CRM.

📝 Читайте эту историю позже в Журнале.

👩‍💻 Просыпайтесь каждое воскресное утро и слушайте самые примечательные новости недели в области технологий, ожидающие в вашем почтовом ящике. Читать информационный бюллетень Noteworthy in Tech.