Десять способов улучшить время загрузки вашего сайта и Google Core Vitals

Что такое основные веб-жизненные показатели

В начале этого года Google ввел новый набор критериев, определяющих стабильность, скорость и отзывчивость любого веб-сайта. Три основных критерия следующие:

• Совокупное смещение макета определяет, насколько структура веб-страницы должна смещаться и менять положение. Эталоном для этого является 0,1.
• Наибольшая отрисовка содержимого измеряет, сколько времени требуется для загрузки основного содержимого страницы. Наилучшие результаты должны быть 2,5 секунды или меньше.
• Задержка первого ввода — это время между открытием веб-страницы и моментом, когда она впервые становится интерактивной. Наиболее часто запрашиваемый таймфрейм составляет около 100 миллисекунд.

Имея в виду эти основные термины, давайте посмотрим, как вы можете использовать Core Vitals, чтобы сделать свой веб-сайт максимально быстрым и эффективным.

1. Оптимизируйте CDN и кеш браузера

Используя этот метод, ваши баллы FID и LCP должны быть улучшены довольно быстро. Раздавайте свои статические ресурсы через CDN или кэшируйте их в сервисе, таком как Cloudfront, от AWS. После этого браузеры будут получать необходимые результаты гораздо быстрее.

Кроме того, динамические страницы могут кэшироваться в CDN с уже примененными правильными значениями TTL в зависимости от того, как ведут себя ваши приложения.

2. Используйте точный размер для всех объявлений и медиа

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

Объявления также влияют на CLS, и вам необходимо тщательно проверить их высоту и размеры, чтобы убедиться, что они не вытесняют контент из-за неправильного отображения. Для этого может потребоваться связаться с вашим поставщиком рекламных услуг или поискать несколько различных вариантов, если ваш CLS постоянно подвергается воздействию.

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

3. Ленивая загрузка изображений с правильным разрешением в зависимости от типа используемого устройства

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

Также важно установить разрешение для каждого ресурса в зависимости от типа устройства, используемого для просмотра вашего сайта. Загрузка разрешения в качестве универсального решения сделает сайт намного медленнее на небольших или менее мощных устройствах и самым неблагоприятным образом повлияет на ваш LCP.

4. Используйте SSR и CSR разумно

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

Актуальный контент должен быть в верхней части страницы, а другие функции сайта должны быть скрыты, чтобы улучшить SSR. Этот стиль асинхронной загрузки отнимает много времени у ваших оценок загрузки и рендеринга.

5. Разбейте все на части, разделив код

Использование наиболее значимых размеров файлов для ресурсов (особенно файлов JS), как правило, плохая идея. Вместо этого вы должны разрешить протокол h2 и использовать его для повторной асинхронной загрузки ресурсов отдельными частями.

Кроме того, вместо того, чтобы использовать один огромный файл HTML, вы можете разделить сайт на несколько файлов меньшего размера и, таким образом, уменьшить нагрузку на загрузку.

6. Используйте методы сжатия Brotli для уменьшения размера статических ресурсов

Что касается сжатия, Brotli кажется лучшим вариантом с точки зрения скорости загрузки. Однако более высокие коэффициенты сжатия увеличат время упаковки и сборки с точки зрения DevOps.

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

7. Сделайте контент ответа и запрос API максимально эффективным

Несомненно, самый важный элемент с точки зрения скорости загрузки, даже самые незначительные изменения, могут дать огромные результаты с API. Ответы и запросы API следует часто проверять в целях оптимизации.

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

8. Сократите общий размер ваших страниц и документов

Целевые страницы с тяжелым кодом (все, что превышает 75 КБ, вероятно, будет серьезным) очень нежелательны, поскольку они резко увеличивают время загрузки и время выборки.

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

9. Замените миниатюры видео изображениями-заполнителями

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

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

10. Выберите самый быстрый доступный сервер

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

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

Заключение

Приведенные выше советы помогут вам встать на правильный путь, чтобы добиться лучшего показателя Page Speed ​​и основных жизненно важных функций. Тем не менее, вы можете оказаться на раздутой платформе или теме, что часто будет означать лучший способ действий для создания нового, более чистого и легкого сайта.

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