Улучшаем производительность сайта с помощью PageSpeed от Google
Всех приветствую! Присаживайтесь поудобнее, налейте вкусного чаю и давайте обсудим довольно популярную и животрепещущую тему: оптимизацию производительности сайта.
Одним из инструментов для анализа качества и usability страницы с составлением отчёта является PageSpeed Insights (далее просто PageSpeed).
Какие вопросы я затрону в статье:
- что такое PageSpeed;
- как измеряется и оценивается производительность;
- лирическое отступление: critical render path;
- способы оптимизации PageSpeed;
- для чего это нужно?
- оценить производительность;
- оценить доступность для людей с ограниченными возможностями;
- определить, насколько сайт оптимизирован для SEO;
- получить рекомендации по повышению этих показателей.
При анализе мы получаем два результата: для десктопной и мобильной версий, где значения от 0 до 49 являются низкими, от 50 до 86 — средними, и от 87 до 100 — высокими.
С выходом 8-го релиза PageSpeed, на примере мобильной версии главной страницы ДомКлик (актуальной на момент написания статьи) мы можем увидеть значения ниже, чем, например, в 5-м релизе (см. дальше), что доказывает рост пороговых показателей и ужесточение требований к производительности сайтов.
Очень важно брать в расчёт производительность мобильной версии, потому что с июля 2018-го позиция мобильного сайта учитывается в том числе при ранжировании страниц, предназначенных для десктопа, тем более что большинство пользователей сейчас ищет информацию с мобильных устройств.
На текущий момент в основном используются: имитация мобильного устройства Nexus 5 на Android, сеть 3G со скоростью 8 мегабит/с., задержка 150 миллисекунд, рендерится на европейских серверах и применяется троттлинг процессора.
Показатели с каждым запуском анализа могут колебаться из-за A/B-тестов, изменений маршрутизации интернет-трафика, дополнительных активных расширений браузера, которые добавляют или изменяют сетевые запросы, и антивирусов.
Если говорить о критериях оценки, то основные представлены ниже:
First Contentful Paint — первичная отрисовка контента; показатель, определяющий интервал между началом загрузки страницы и появлением первого видимого блока, текста или изображения. Иными словами, время от ответа сервера до отрисовки, белый экран. Ответ сервера при этом не входит в этот показатель.
Speed Index — индекс скорости загрузки, который показывает, как быстро загружается содержимое.
Largest Contentful Paint — время отрисовки крупного содержимого, находящегося на первом экране. Под крупным содержимым мы понимаем картинки, видео или текст.
Time to Interactive — время, в течении которого страница становится полностью готова к взаимодействию с пользователем.
Total Blocking Time — сумма всех периодов от первой отрисовки содержимого, когда скорость выполнения задач превышала 50 мс. Измеряется в миллисекундах.
Cumulative Layout Shift — процентная величина, на которую смещаются видимые элементы области просмотра при загрузке.
Прежде чем описывать способы улучшения этих показателей, важно вспомнить, что такое Critical Render Path. Схематично шаги по отрисовке сайта выглядят следующим образом:
- запрос на сервер;
- получение HTML-документа;
- построение DOM-дерева;
- запрос на получение критических ресурсов (JS, CSS);
- построение CSSOM-дерева;
- получение и отработка JS-кода;
- построение render-дерева;
- отрисовка страницы
Как можно улучшить метрики?
Актуальная версия HTTP
Использование актуальной версии HTTP позволяет оптимизировать запросы к серверу. Если сравнивать версию HTTP/1.1, которая поддерживается до сих пор, и версию HTTP/2.0, то изменения ярко заметны и влияют на работу сайта в целом в HTML/2.0:
- используется мультиплексирование;
- служебные заголовки передаются в сжатом виде;
- повышается безопасность.
Оптимизация изображений
Используйте правильные размеры изображений. На странице не должно быть изображений, размер которых больше, чем можно отобразить на экране пользователя. С помощью «отзывчивых» изображений можно создать несколько версий каждой картинки, а затем через, к примеру, @media-запросы указать нужную для отображения. Также можно воспользоваться ресайзерами: thumbor, npm sharp, imagemagick или любым другим на ваш вкус.
Вне первого экрана важно использовать для всех изображений «ленивую загрузку», она позволяет подгружать картинки по мере необходимости.
Использование критического CSS
Прежде чем браузер отрисует содержимое страницы, он должен получить и обработать всю информацию о макете и внешних стилях для неё. Внешний CSS — это код, загружаемый через внешнюю таблицу стилей. В теории, он может считаться блокирующим, потому что, как сказано выше, браузер не сможет отрисовать страницу, пока этот код не будет обработан. Критический CSS отвечает за стили первого экрана сайта, такой код необходимо заинлайнить внутри <hеad> прямо в HTML-документе, это снижает нагрузку на сервер.
Уменьшайте bundle.js
Минифицируйте JS и CSS, это ускорит анализ скриптов и сократит объём полезной сетевой нагрузки.
Откажитесь от тяжёлых библиотек и асинхронной/отложенной загрузки скриптов
Для сокращения расхода трафика необходимо поддерживать код в актуальном состоянии, своевременно удалять неиспользуемый код. Чтобы не блокировать основной поток, по возможности загружайте сторонние скрипты асинхронно (атрибут async или defer в тегах script , или приоритизация загрузки основного содержимого, к примеру, рекламу грузим после), и при их выборе отдавайте предпочтение более легковесным библиотекам. Если в подгружаемой библиотеке используется менее 10-ти методов, можно рассмотреть вариант самостоятельной реализации этих методов в проекте, но такой подход должен быть хорошо обдуман.
Уменьшайте Critical Render Path
Включает в себя совокупность предыдущих пунктов. Сюда можно добавить «ленивую загрузку» DOM-элементов.
Использование SSR
Server Side Rendering — рендеринг страницы на сервере. В этом случае поисковые роботы получают готовый код сайта, что важно в условиях новых правил ранжирования.
Это основные моменты, которые работают на практике и которые мы применяем у себя в ДомКлик при разработке сервисов.
Для чего нам нужно улучшать метрики?
При грамотном использовании этих рекомендаций мы решаем основополагающие задачи: улучшение позиций, увеличение конверсии и снижение нагрузки на сервер. И, как следствие, пользователи довольны, а компания получает прибыль.
Очень ёмко и кратко смысл оптимизации описывает цитата из твиттера Википедии:
First Contentful Paint: Why You’re Losing Customers & How to Fix it
Did you know that the speed at which your website loads can negatively impact your customer acquisition?
We’re not just talking about how much traffic you can bring in — we’re talking about how much money you can make. In fact, a recent study by Google showed that a delay of just one second can result in a 7% reduction in traffic.
So what’s the key to keeping your website loading quickly and keeping those customers coming back?
It’s all about First Contentful Paint (FCP). But what is it, and why should you care?
Keep reading to find out!
1. What is First Contentful Paint?
First Contentful Paint (FCP) is the moment at which a browser can first render text or other content on the screen.
That sounds simple enough, but because there are so many factors that go into website performance (and because you need to be able to work backward from FCP in order to determine why it’s happening) it can be complicated to nail down.
But don’t worry, we won’t leave you hanging! We’ll go through the basics of what contributes to a good First Contentful Paint and how you can use that data to optimize for maximum performance.
2. Why does First Contentful Paint Matter?
It matters because, as we mentioned above, it can impact your bottom line.
For example, if people spend less time on your site because of slow load times (and therefore fewer pages are viewed), you’re likely to see a drop in revenue.
Plus, Google recently included FCP as part of its search rankings.
So the sooner your content is visible, the more likely it will receive search traffic.
3. How can I Improve First Contentful Paint?
In order to improve FCP, you need to make sure your content is rendered as quickly as possible. This means you should focus on using simple strategies for optimizing delivery.
Here are a few you should focus on:
Reduce File Sizes: The smaller your code is, the faster it will load. Websites like TinyPNG or ShortPixel are great resources for this function. With this trick, you may reduce picture sizes by 50–80%, saving a lot of time during the load process.
Use a CDN: Content Delivery Networks use data centers strategically placed around the globe to ensure that content loads as fast as possible from the server closest to your user.
Minimize Redirects: As we mentioned above, speed matters for SEO. And one of the best ways to make your site seem faster is by minimizing redirects, which tell Google that you moved some content rather than serving it from multiple locations.
Optimize Server Response Time: The speed of your server is one of the biggest factors when it comes to FCP. If your server is slow, it will take longer for your content to load. You can test the speed of your server by using a tool like Pingdom or GTmetrix.
Webpage Size: The size of your webpage is another important factor when it comes to FCP. The larger your page, the longer it will take to load. You can use a tool like PageSpeed Insights to measure the size of your page and find ways to reduce it.
Browser Cache: When a user visits your website, they’ll typically have a copy of your HTML, CSS, and JavaScript stored in their browser cache. If this is the case, you can bypass loading it from your server and deliver your content faster.
Reduce Third-party Content: Have you ever visited a website that takes forever to load — and then when it finally does, you discover that 90% of the page is ads? This happens because many ad networks use JavaScript to load ads dynamically. So not only does your browser have to navigate through all that code to get to your actual content, but it also has to process every single ad. The result is a slower FCP.
4. How can I test my First Contentful Paint?
There are a few different ways to test your FCP, but the easiest is by using Google’s Lighthouse. This tool provides insight into what your website does well and where it could be improved. All you have to do is open up Chrome dev tools and click on the Audits tab.
If you scroll down, you should see a list of different audits you can take. Click on “First Contentful Paint” and then run the test again.
You should get an FCP improvement score, which is easier to understand if you read Google’s own explanation.
It’s great if your score is higher than 70 (anything over 80–90 will be great). If your score is lower, don’t panic. You can still improve your FCP! Just follow the tips mentioned in this article and rerun the test until you see an improvement.
Once you’ve made some progress, run another test to see how far you’ve come!
3. Risks of ignoring first contentful paint optimization
There are many disadvantages of ignoring FCP. These include:
1. Your load times and pageviews decrease and you lose customers to other competitors who serve content quickly.
2. Google can penalize your rankings for slower-than-optimal speed, which means that future visitors might not be able to find your site when they search for it.
3. Your page is less likely to be shared, which is a valuable SEO ranking factor. If people can’t access your site when sharing from their mobile devices, they may avoid doing it altogether in the future. They might also share a competitor’s website instead of yours if they can get useful information faster.
4. There is a risk that users will abandon the page before it loads, especially if there is insufficient communication about what they’re waiting for. If this happens, Google might penalize you in its search rankings because the site isn’t meeting user expectations.
The bottom line… When you send consumers to a website that they abandon before ever seeing what you intended to show them, it’s like throwing money down the drain.
First Contentful Paint is an important metric to optimize in order to increase a company’s bottom line. By following the tips in this article, you can improve your FCP and see a positive impact on your website’s speed, SEO ranking, and user experience.
10 проверенных способов улучшить First Contentful Paint (FCP) в WordPress
В начале 2019 года Google объявил, что будет оценивать рейтинг скорости веб-сайта, сосредоточив внимание на двух показателях производительности: First Contentful Paint (FCP) и First Input Delay (FID) .
Веб-сайты оцениваются как быстрые, умеренные или медленные по следующим критериям:
FCP и FID – единственные факторы, которые имеют значение
Проверка скорости вашего сайта с помощью PageSpeed Insights выдаст примерно следующие результаты:
Статистика FCP и FID известна, и ее трудно не заметить
Новая панель управления отчетом о скорости в Google Search Console также использует показатели FCP и FID для оценки URL-адресов. Это все еще рекламируется как экспериментальная функция (пока).
Панель отчетов о скорости в Google Search Console
Интересно, что этот рейтинг основан не только на тесте скорости, но и отражает фактическую скорость вашего сайта для пользователей по всему миру. Статистические данные для этого собираются от реальных пользователей через Отчет о пользовательском опыте Chrome (CrUX) .
First Contentful Paint дает более реалистичную метрику пользовательского опыта. Ваш веб-сайт может загружаться менее 2 секунд в тесте скорости, но если это не так для большинства вашей аудитории, Google все равно будет наказывать вас.
First Contentful Paint (FCP) – это ориентированная на пользователя метрика для измерения воспринимаемой скорости загрузки страницы. FCP измеряет, как пользователи воспринимают производительность веб-сайта, а не то, что измеряет инструмент для проверки скорости.
FCP встречается во втором кадре и отмечен оранжевым прямоугольником (Источник: Google)
Первая Contentful Paint отличается от First Paint, которая представляет собой точку на временной шкале загрузки страницы, где в браузере обнаруживается любой тип визуализации. С другой стороны, FCP требует отрисовки некоторого контента. Это может быть текст, изображения (включая фоновые изображения, логотипы) или небелые элементы <canvas>.
Первая Contentful Paint на вкладке “Тайминги” GTMetrix
Чтобы не усложнять задачу, вы можете думать о FCP как о времени, которое требуется пользователю, чтобы увидеть любой контент в своем браузере. Таким образом, быстрый FCP убеждает пользователя в том, что что-то происходит, и удерживает его привязанным к сайту.
FCP можно измерить с помощью лабораторных испытаний и реального опыта использования (полевые данные). Вот несколько инструментов, которые вы можете использовать для измерения FCP:
Google измеряет 75-й процентиль загрузки страниц вашего сайта, сегментированный как для мобильных, так и для настольных устройств. Это гарантирует, что это точное представление о пользовательском опыте.
Google измеряет 75-й процентиль загрузки страниц вашего сайта, сегментированный как для мобильных, так и для настольных устройств. Это гарантирует, что это точное представление о пользовательском опыте.
ЧТО ТАКОЕ ХОРОШИЙ РЕЗУЛЬТАТ FCP?
Согласно Google, FCP должен произойти в течение 1 секунды . Это обеспечивает удобный пользовательский интерфейс для посетителей вашего сайта.
Если FCP вашего сайта занимает более 3 секунд, это считается медленным. Согласно исследованиям , более 53% мобильных пользователей покидают сайт, если загрузка занимает более 3 секунд. Отнеситесь к этому показателю серьезно.
Время ответа сервера или время до первого байта (TTFB) – это время, которое требуется браузеру для получения первого байта содержимого веб-страницы.
Уравнение TTFB
FCP зависит не только от TTFB, но это первый шаг к достижению этой цели.
FCP = TTFB + время загрузки контента + время рендеринга
Поскольку FCP сильно зависит от TTFB, это наиболее важный фактор, который необходимо оптимизировать для улучшения FCP.
Выберите провайдера быстрого хостинга
Вы можете обратиться к статье WP Rocket о веб-хостинге, чтобы узнать, какие факторы необходимо учитывать, чтобы выбрать отличное решение для веб-хостинга. В идеале выберите хост с серверами, расположенными близко к вашим пользователям.
Используйте качественный CDN
Качественный CDN может помочь ускорить доставку статических ресурсов вашего сайта, таких как изображения, видео и скрипты. Это значительно сократит сетевую задержку между вашим сервером и вашими пользователями.
Включите кеширование для своего веб-сайта
Кэширование помогает уменьшить TTFB за счет уменьшения времени обработки сервера. Большинство ведущих хостинг-провайдеров WordPress имеют кеширование на уровне сервера, поэтому узнайте у них, что они предлагают.
Веб-страница отображается браузером после объединения многих элементов, таких как HTML, таблицы стилей CSS, сценарии JavaScript и импорт HTML.
Сам документ HTML включает в себя различные теги, но все они быстро анализируются большинством браузеров. Но это не относится к синтаксическому анализу CSS и JS.
Обычно браузер пытается сначала загрузить все элементы веб-страницы, проанализировать их все, а затем отобразить веб-страницу. Чаще всего размер HTML-документов намного меньше, чем у таблиц стилей CSS и сценариев JS. Количество ресурсов CSS и JS также обычно выше.
Таким образом, когда пользователь запрашивает веб-страницу, браузер уже получил бы HTML-контент, но все равно будет ожидать загрузки всех других ресурсов перед визуализацией страницы. В результате их называют ресурсами, блокирующими рендеринг.
Такое поведение значительно снижает FCP. Следовательно, чтобы улучшить FCP, вам необходимо устранить эти ресурсы, блокирующие рендеринг. Сделать это можно следующими способами:
Встроенные критические ресурсы
Во-первых, определите важные сценарии и стили, которые необходимы для отображения FCP вашей веб-страницы. Вот простое руководство от Google о том, как определять важные ресурсы.
После того, как вы определили критические сценарии, вам необходимо удалить их из ресурса, блокирующего рендеринг, а затем встроить их в свою HTML-страницу с помощью тегов <script> и <style> .
Сделав это, вы убедитесь, что на веб-странице будет все необходимое для работы с ее основными функциями при загрузке.
Отложить некритические ресурсы
Для некритических ресурсов вам необходимо пометить URL-адреса атрибутами async или defer .
Рекомендуется добавлять атрибут defer к URL-адресам некритических сценариев. Это указывает браузеру выполнить файл сценария только после того, как HTML-документ будет полностью проанализирован.
Вот как можно отложить файл сценария:
Для некритических таблиц стилей рекомендуется добавить к их URL-адресу атрибут async . Это указывает браузеру загружать стили асинхронно, в то время как остальные элементы страницы продолжают загружаться без прерывания.
Поскольку таблицы стилей загружаются с тегом <link> , нет прямого способа применить к ним атрибут async . Но есть обходной путь, и вот как вы можете его реализовать:
Удалить все неиспользуемое
При определении критических ресурсов вы можете обнаружить код, который не используется на веб-странице. Удаление неиспользуемого кода поможет вам еще больше оптимизировать вашу веб-страницу.
Если вам неудобно работать с кодом, вы можете использовать такой плагин, как WP Rocket, чтобы отложить некритические файлы JavaScript всего за несколько кликов.
Отложите JavaScript без усилий с WP Rocket
Вы также можете оптимизировать доставку CSS с помощью WP Rocket, чтобы удалить таблицы стилей, блокирующие рендеринг. Следующий пункт касается этой особенности.
3. Создайте CSS Critical Path и встроите его.
Если вы настроили асинхронную загрузку CSS, браузер будет показывать пользователям нестилизованный контент до загрузки требуемых стилей. Такое поведение известно как Flash of Unstyled Content (FOUC) и доставляет неудобства пользователям.
Чтобы предотвратить FOUC, вам необходимо сгенерировать CSS Critical Path и встроить его прямо в свой HTML-файл.
Загрузка страницы с помощью CSS, блокирующего рендеринг (вверху) и встроенного критического CSS (внизу) (Источник: Google)
Но что такое Critical Path CSS?
Critical Path CSS – это минимальный набор CSS, необходимый для отображения первой части веб-страницы (в верхней части страницы) для пользователя.
Анализировать критический путь рендеринга браузера вручную и затем создавать CSS критического пути – утомительный процесс. Это выходит за рамки данной статьи.
Однако вы можете использовать бесплатные онлайн-инструменты, такие как Pegasaas, для создания CSS Critical Path. Он отлично работает для большинства случаев использования. Ознакомьтесь с Google Анализируя критическую производительность пути рендеринга, чтобы узнать больше.
После того, как вы сгенерировали CSS Critical Path, вам необходимо встроить его в HTML-документ. Теперь браузер может немедленно отобразить первую часть веб-страницы, не дожидаясь асинхронной загрузки таблиц стилей CSS. Это значительно улучшает FCP.
Кроме того, вы можете использовать WP Rocket для автоматизации этого процесса.
WP Rocket легко устраняет блокировку рендеринга CSS
Включение параметра « Оптимизировать доставку CSS» в WP Rocket сгенерирует CSS Critical Path для всех типов страниц WordPress и встроит их. И если вам случится внести какие-либо настройки или изменить свою тему, он также автоматически обновит CSS Critical Path.
Независимо от того, насколько хорошо вы оптимизируете JavaScript, он все равно медленнее по сравнению с обработкой простого HTML. Все, что требует JS, может отрицательно повлиять на FCP.
Хотя вы можете встроить критически важные сценарии, их все равно нужно загрузить и проанализировать. Когда дело доходит до улучшения FCP, на счету каждая миллисекунда. Это драгоценное время загрузки ухудшает ваш рейтинг FCP.
Слишком много скриптовых элементов портят FCP
Многие темы включают необычные элементы в верхней части страницы, в которых используется множество скриптов. То же самое можно сказать и об использовании конструкторов страниц, которые добавляют много ненужных стилей и скриптов. Следовательно, выбирайте тему вашего сайта с умом. Использование хорошо закодированной, быстрой темы, такой как GeneratePress или Astra, может помочь значительно сократить FCP.
Ленивая загрузка изображений – один из самых простых способов ускорить работу вашего сайта , особенно если у вас есть сайт с большим количеством изображений.
Технически отложенная загрузка – это сценарий, который откладывает загрузку изображений и фреймов, которые еще не видны в области просмотра браузера. Когда пользователь прокручивает страницу вниз, изображения загружаются по мере их появления.
WP Rocket помогает легко включить отложенную загрузку изображений
Поскольку ленивая загрузка требует использования JavaScript, прежде чем браузер сможет отображать какие-либо изображения, это может задержать ваш FCP.
Следовательно, вам нужно исключить изображения, находящиеся в верхней части страницы, из отложенной загрузки.
Большинство популярных плагинов отложенной загрузки уже включают эту функцию. В идеале ищите плагин отложенной загрузки, который позволяет исключать изображения не только по именам файлов, но и по другим тегам, таким как класс, идентификатор, атрибут или изображения из определенного домена.
WP Rocket поддерживает отключение отложенной загрузки определенных изображений . Вы можете отключить его для изображения, класса изображения, по источнику изображения и даже для аватаров.
Примечание. Ленивая загрузка изображений была добавлена в ядро WordPress и станет встроенной функцией начиная с WordPress 5.5. Он также поддерживает фильтры для настройки ленивой загрузки.
6. Встроенные важные изображения
HTML и CSS предоставляют возможность встроить изображения с помощью форматов Base64 или SVG. Они называются URI данных .
Встраивая все изображения в верхней части страницы, браузеру не нужно делать дополнительные HTTP-запросы для их загрузки. Это может помочь улучшить FCP.
Удалите ресурсы, блокирующие рендеринг, наверху, чтобы улучшить FCP
Вот некоторые из наиболее распространенных изображений в верхней части страницы, которые можно встроить:
- Логотип
- Иконки (поиск, социальные сети и т. Д.)
- Изображение баннера
- Задний план
Что такое изображения Base64 и SVG?
Base64 – это алгоритм кодирования, который преобразует любой тип данных, включая изображения, в текст. Вы можете встраивать изображения в кодировке Base64 непосредственно в файлы HTML или CSS. Это отличный способ ускорить загрузку небольших изображений.
Встроенные критические изображения с помощью кодировки Base64
Добавление изображений в кодировке Base64 в HTML:
Вы также можете использовать изображения в кодировке Base64 в CSS:
Масштабируемая векторная графика (SVG) – это формат изображений для векторной графики. Изображения SVG имеют меньшие размеры файлов, масштабируются до любого размера без потери качества и отлично выглядят на всех устройствах. Если ваше изображение имеет простые формы, кривые и очертания (например, логотипы и значки), то его почти наверняка можно сохранить как SVG.
Примечание. Использование изображения SVG в качестве источника внутри тега <img> отличается от встраивания изображения SVG напрямую через тег <svg> .
Вот как можно встроить SVG в HTML:
Это хорошая идея , чтобы компресс или преуменьшать (если SVG) изображений , прежде чем встраивание их. Если ваши изображения в растровом формате (JPEG или PNG), используйте Base64. Если их можно преобразовать в векторный формат, используйте SVG.
Везде, где вы можете использовать URL-адрес в качестве источника изображения, вы можете вставить туда изображение в кодировке Base64.
Если какие-либо изображения или значки жестко запрограммированы внутри вашей темы или плагинов, вам необходимо найти их вручную и заменить их исходные URL-адреса встроенными изображениями. Такой плагин, как Search & Replace, может помочь вам в этом легко.
7. Оптимизируйте размер DOM вашего сайта
Объектная модель документа (DOM) – это представление всех объектов, составляющих веб-страницу. Графически это представлено в виде дерева с ветвящимися узлами и объектами.
Структурированное представление DOM позволяет легко изменять его элементы с помощью языка сценариев, такого как JavaScript.
Дерево HTML DOM с его объектами
Все элементы HTML в дереве DOM называются узлами . Узлы могут разветвляться на несколько элементов, каждый из которых может далее разветвляться, и так далее. Насколько глубоко они разветвляются, называется глубиной узла . Глубина узла всего дерева DOM называется глубиной дерева . Все непосредственные элементы ветвления узла называются дочерними элементами .
Избегайте большого размера DOM для оптимизации FCP
Google помечает веб-страницы деревьями DOM, на которых есть:
- Всего более 1500 узлов
- Глубина более 32 узлов
- Родительский узел с 60+ дочерними узлами
Как уменьшить размер DOM?
В общем, вам нужно создавать узлы DOM только при необходимости и уничтожать узлы, которые не нужны. Однако этот совет не относится к большинству сайтов WordPress, поскольку создание DOM обычно осуществляется с помощью тем, плагинов, компоновщиков страниц и самого ядра WordPress.
Вот несколько советов, которые помогут вам уменьшить размер DOM:
- Разделите большие страницы на более мелкие.
- Ленивая загрузка как можно большего количества HTML-элементов, а не только изображений.
- Пагинайте комментарии, сообщения, продукты и т. Д.
- Ограничьте количество сообщений, отображаемых на вашей домашней странице и страницах архива.
- Не скрывайте нежелательный контент с помощью CSS. Вместо этого удалите его полностью.
- Избегайте использования раздутых конструкторов страниц, которые вставляют ненужные теги <div> .
- Выбирайте хорошо оптимизированные темы (например, GeneratePress или Астра).
Не используйте плагины, которые добавляют слишком много тегов <div> (например, плагины мегаменю).
8. Убедитесь, что текст остается видимым во время загрузки веб-шрифта.
Шрифты обычно представляют собой файлы большого размера, и для их загрузки требуется много времени. Возможно, вы столкнулись с такой ошибкой в Lighthouse:
Lighthouse помечает URL шрифтов, которые приводят к появлению невидимого текста (Источник: Google)
Есть причина, по которой Google отмечает такое поведение. Некоторые браузеры не отображают текст, пока не будут загружены все шрифты. Это вызывает так называемую вспышку невидимого текста (FOIT).
Вы можете исправить это, заставив браузер временно отображать системный шрифт во время загрузки пользовательских шрифтов. Просто добавьте font-display: замените свой стиль @ font-face, чтобы избежать FOIT почти во всех современных браузерах.
Вот пример того, как это можно применить:
Если вы импортируете шрифты непосредственно из CDN (например, Google Fonts), вы можете добиться того же, добавив параметр & display = swap в конец URL-адреса.
9. Используйте подсказки ресурсов
Когда пользователь посещает веб-сайт, браузер запрашивает HTML-документ с сервера, анализирует его, отправляет отдельные запросы для любых других ресурсов, на которые есть ссылки, и после загрузки и анализа их всех визуализирует веб-страницу.
WP Rocket упрощает добавление всех внешних доменов в предварительно загруженные .
Предварительная выборка DNS-запросов в WP Rocket
Если вы используете много стороннего кода, добавление параметра dns-prefetch очень полезно для ускорения загрузки страницы. Вы можете использовать бесплатную предварительную выборку! онлайн-инструмент, чтобы узнать, какие внешние домены вы можете добавить в список предварительной выборки.
Предварительное подключение
Preconnect работает так же, как предварительная выборка DNS, за исключением того, что не останавливается только на разрешении DNS. Он также продолжит и установит рукопожатие TCP и согласование TLS (если есть).
Имейте в виду, что предварительное подключение может занять драгоценное время обработки, особенно для безопасных подключений.
Предварительная выборка
Если вы уверены, что ресурс будет использоваться в будущем, вы можете предложить браузеру сразу же выполнить его предварительную загрузку и сохранить в браузере. В отличие от предварительной выборки DNS, здесь вы говорите браузеру немедленно начать загрузку ресурса.
Вот как вы можете указать браузеру для предварительной загрузки ресурса:
Как работает предварительная выборка (Источник: KeyCDN)
Предварительная выборка может игнорироваться браузером, если запрошенный файл слишком велик или скорость сети низкая. Например, Firefox выполняет предварительную выборку ресурсов только тогда, когда браузер находится в режиме ожидания .
Prerender
Это самый мощный ресурсный совет. Добавление параметра prerender к ресурсу заставляет браузер загружать все свои ресурсы, анализировать их, создавать дерево DOM, применять стили, выполнять сценарии, отображать веб-страницу и держать ее готовой к обслуживанию. Если вы позже посетите URL-адрес, указанный в href , страница загрузится мгновенно.
Предварительный рендеринг вашей главной целевой страницы – отличный способ увеличить количество конверсий.
Предварительная загрузка
В отличие от предварительной выборки, которая действует больше как предложение для браузера, подсказка ресурса предварительной загрузки указывает браузеру загружать ресурсы независимо от того, что он думает. Браузер не может игнорировать директиву предварительной загрузки.
Чем раньше браузер начнет запрашивать объявленные ссылки предварительной загрузки, тем быстрее могут загружаться ваши страницы.
Подсказки о ресурсах мало помогут, когда пользователь впервые заходит на ваш сайт. Но каждая последующая страница, которую они посещают, будет отображаться значительно быстрее. Поскольку Google использует реальные данные об использовании для оценки рейтинга скорости веб-сайта, подсказки по ресурсам помогут улучшить FCP вашего сайта.
10. Избегайте множественных перенаправлений страниц.
Когда вы посещаете URL-адрес, который был перенаправлен на другой URL-адрес, сервер вернет ответ с кодом состояния перенаправления HTTP 301. В консоли вашего браузера это будет выглядеть примерно так:
Ответ перенаправления заставляет браузер сделать еще один HTTP-запрос в новое место. Обычно это задерживает загрузку веб-страницы на сотни миллисекунд.
Если ваша страница имеет более одного редиректа, это может значительно замедлить работу FCP.
Избегайте переадресации нескольких страниц (Источник: Google)
Lighthouse отмечает страницы с двумя или более редиректами.
Чтобы избежать множественных перенаправлений, указывайте помеченные ресурсы прямо в конечный пункт назначения. Кроме того, если ресурс является частью критического пути рендеринга вашей страницы, то полностью устраните все исходящие от него перенаправления.
ЗАКЛЮЧЕНИЕ
Улучшение FCP больше не выбор, а необходимость. Google уже начал ранжировать веб-сайты на основе их оценок FCP. Более того, более быстрый FCP также улучшает взаимодействие с пользователем.
И скоро появятся лучшие вещи! Google планирует ввести еще одну метрику производительности, ориентированную на пользователя, под названием First Meaningful Paint (FMP). В то время как FCP измеряет время рендеринга для любого контента (например, логотипов, слоганов, фоновых изображений), FMP будет запускаться только после того, как контент, желаемый пользователем, загружен (например, заголовки, изображения обложек, основной текст). FMP еще не стандартизирован, но вы можете узнать о нем подробнее здесь .
How To Improve Your First Contentful Paint (under 1 second!)
FCP stands for First Contentful Paint. Without getting too deep into tech stuff, it’s the time at which the first element or piece of content on your page shows to the visitor.
We want this timing ideally at or under 1 second and on almost all sites the logo is the first element drawn on the page. While this isn’t a “core web vital”, Google wants to see this under 1.8 seconds.
Most content around the web on this topic is written by content writers who’ve never optimized a site and are just copying what everyone else is saying. In this post we’ll share our exact process we use that to get this metric under 1 second.
This is a somewhat technical topic so we’ve included an audio version below and also a short video walking through Autoptimize settings that will help improve this timing.
Table of Contents
What Is FCP or First Contentful Paint Time?
First contentful paint (FCP) time is a period needed for the first part of a webpage to appear in the browser. In other words, it’s a time interval between the visitor opening a page and actually seeing something such as text, image, video, etc. actually appearing on the screen.
Why Is FCP Time Important?
While FCP is not a core web vital (it probably should be), FCP timing has a huge impact on the first impression your site makes because it answers the visitor’s initial question:” Is the page loading or not?”. This makes it an important speed metric.
What Should My FCP Timing Be?
Your first contentful paint time depends on the page itself and the geographical locations of both the hosting and the visitor. Ideally, this timing should be under 1 second. Google’s metrics will say that anything around 1.5 seconds or below is good FCP time, but if you follow this guide, you should be able to significantly reduce it for almost any site.
If you have good hosting, by using the technique from this article you should cut your FCP time down to the 0.6 – 0.8 seconds range in the country your site is hosted in, and probably around 1 second internationally.
Keep in mind that first contentful paint time is going to vary from location to location, meaning that the further away the visitor is from the host location, the slower the page is going to load. Normally, it’s expected for the page-load to be between 0.5 – 1 second slower for a visitor from a different continent. The reason for this is that the international visitor’s load has to travel a long distance through cables under the ocean.
Step by Step Guide – How to Improve First Contentful Paint Time
Below, you’ll find the process we use to squeeze the FCP time under that 1 second mark.
Test FCP Before Doing Anything
Before doing anything, make sure you test FCP time so you can compare the results from before and after the work is done. There are a lot of different tools that you can use to test FCP time, but we suggest you use our tool SiteSpeedBot.
SiteSpeedBot will give you detailed, plain english site speed optimization recommendations
SiteSpeedBot allows testing from a bunch of different locations, so it will bring you a more exact indication of the issues. Google PageSpeed Insights is also useful, but keep in mind that it only tests from the US, so in case your site is hosted elsewhere, it will not give you accurate numbers of FCP time from other locations.
Another important tip here is to always run several tests because the internet kind of functions like a highway – the speed and the amount of data sent to you heavily depend on how busy the internet connection is. You will probably notice that if you run a test at 9 pm, the speed might be a little faster than during the daytime when there’s a lot more load on the internet. Different times of day and different locations are going to cause the timing to move up and down, so before making changes make sure to run a few tests and find an average result.
Step 1 – Reduce TTFB First
To fix FCP time, you will need to improve the time to first byte (TTFB). TTFB, also known as “server response time” in tools like Google Pagespeed Insights. That metric represents the time the server takes to deliver the first byte to the browser after the user makes a request.
FCP time heavily depends on the TTFB timing, because TTFB comes first. As a target, TTFB or server response time should be sitting around 0.1 – 0.2 seconds in the country where the site is hosted, and around 0.2 – 0.5 seconds internationally.
In case your TTFB is above those ranges, you should do some work on reducing it. In the following paragraphs, we are going to list the most important factors that influence TTFB. Keep in mind that this article is mainly focused on improving WordPress performance, but the same principles apply to any other CMSs, including Shopify.
Cloudflare can dramatically improve your site speed even on the free plan. If site speed is important we recommend at their APO service at $5/month
Use a Good DNS Host Like Cloudflare
The first step is having a good DNS host and we use Cloudflare because they’re typically the fastest DNS host in the world as per https://dnsperf.com
DNS hosting is the service responsible for translating web addresses to IP addresses. This means that each time you type an address into your browser’s URL bar, the browser first does a DNS lookup that converts a web address into an IP address, and by doing so locates the server that hosts the website.
Use Page Caching and Edge Caching
The next important feature that your site should have is called page caching. Website pages are HTML files and page caching prebuilds these HTML files in advance so they’re ready to go when the visitor hits the website.
This reduces TTFB dramatically as the pages are prebuilt. Without page caching on every visit the web hosting has to do the database lookups and PHP processing from scratch which typically takes 1-3 seconds and even longer for some pages.
The plugin we usually recommend for page caching services on WordPress sites is WP Rocket.
If you are targeting an international audience, Cloudflare’s APO service is a no-brainer too.
WPRocket is what we use and recommend for WordPress Page Caching
It provides another level of caching called edge caching. This feature stores entire HTML pages at Cloudflare’s edge nodes, on their servers around the world, so when a visitor requests to open a page, it gets served to him from the geographically nearest server. This is similar to page caching except that pre-built HTML file is sitting on Cloudflare’s infrastructure and closer to the visitor.
With site speed, geography and location matters a lot, so the shorter the distance that data has to travel is, the better the TTFB and FCP timings will be.
Because edge caching does a lot of the work it also reduces a lot of load off the web hosting which can also help improve your site’s performance. Cloudflare has its servers in more than 160 locations worldwide, and their APO service costs only $5 a month.
To learn more about improving TTFB, read our How To Reduce Server Response Times (aka TTFB) article here which goes into more detail.
Step 2 – Disable Lazy Loading On the Logo
In most cases, the logo is the first element that appears on the page, so here are a few simple techniques that will speed up its loading.
What Is Lazy Loading
Lazy loading is a speed optimization technique that delays the loading of some images until the user scrolls down to the point of the page where those images appear. The problem with lazy loading is that when it’s turned on, it lazy loads all the images. This means that lazy loading tags will be assigned to all of the images on the page, including those at the top that are immediately visible to the user.
That creates an issue where those images “above the fold” have to waiting for the lazy load JavaScript library to execute before the images at the top of the page load. Essentially the lazyload javascript library becomes “render blocking”.
Disabling lazy loading on the logo file name or file names is an easy way to fix this problem. Keep in mind that sometimes different logos display on different devices, so you might have to disable lazy loading on multiple file names. There are different ways to exclude files from lazy loading, depending on the lazy loading plugin or method you use.
How to Disable Lazy Logo Loading
In case you are using a plugin such as WP Rocket or Autoptimize, the process is fairly easy: open the image or copy the URL, put it in the tool, and select the setting that will exclude the lazy loading of this particular image, in this case the logo. This action alone can reduce your first contentful paint time to under 1 second.
There’s another step that you can take here which will speed up your FCP even more. It’s something called a preload directive or preload browser hint.
The preload browser hint is a snippet of HTML code that go in the header section of the site to tell the browser to overwrite the default loading order of files on the page.
By implementing a preload tag that contains the logo you are instructing the browser to load the logo earlier than it normally would therefore improving the FCP even further.
The video below walks through this process in a little more detail. Although not shown in the video, right now we use Autoptimize to drive lazy loading and add the image filename into the “Exclude images” section on the images tab and also exclude the first 4 images from lazy loading which also helps LCP timings.
Step 3 – Other Speed Optimizations That Help FCP
Compress the Logo Image
Always make sure to run the logo through some sort of compression so its file size is as small as possible and adjust the dimensions so the size fits its placement on the screen.
Usually, the size of a logo is around 5-10 KB, but in some cases it can be a lot bigger. We’ve even seen logos as wide as 500-1000 pixels which then makes the filesize 100-300kb (0.1-0.3mb) which is enormous if you consider the placement on the page. Most logos are usually around 100 or 200 pixels wide.
Fix 404 Errors
Making sure there are no 404 errors on the page can also help. When a browser encounters a 404 error, such as a file that doesn’t load or doesn’t exist, it will cause a delay in rendering the page. SiteSpeedBot will help you detect any 404 errors happening under the bonnet but generally, it’s worth running an SEO audit tool on the entire website once a month and resolving all 404 errors as they’ll often occur naturally over time.
Optimize JavaScript – Defer, Delay & Move It Further Down The Page
DEFER:
Optimizing the JavaScript can also help you reduce first contentful paint timing. First, you want to make sure that you are deferring as much JavaScript as possible. Deferring JavaScript is a JS-specific optimization and using a plugin such as WP Rocket can help here.
DELAY/PAUSE JS:
Tools like WP Rocket can help you delay or pause JavaScript files, so they don’t load until the user interacts with the page which can dramatically reduce the impact of javascript on site speed. This optimization is particularly useful for live chat plugins and widgets that don’t need to load initially on the page. It usually doesn’t impact FCP timing, but it’s worth doing anyway.
MOVE IT FURTHER DOWN THE PAGE:
JavaScript code gets executed top to bottom so code higher up on the page gets loaded and executed first.
Optimize Your CSS
Optimizing the CSS can also help you reduce the FCP time, although only slightly. Typically this has more impact if your site is using an older theme with less optimized CSS. CSS optimization or settings in plugins such as WP Rocket or Autoptimize will improve things to a certain degree.
Want it done for you?
We’ve optimized over 4000 WordPress sites and can help make yours load lightning fast too! If you’re looking for someone to do this for you, complete the form on our homepage and one of the team will review your site and tell you what’s doable in terms of site speed.
Hey I’m Brendan, Principal Consultant here at WPSpeedfix!
Since we started WPSpeedFix in 2016 as an offshoot of our SEO agency we’ve optimized 4000+ websites.
I’m hope you find the site useful, there’s some resources below in the sidebar that might help too.
If you’re looking to DIY or need help right this second, try our FREE site speed test tool by entering your URL & location to test from below. The tool will give you detailed site speed & SEO recommendations in under 90 seconds.