О скорости загрузки, рассказывает Дастин Хайл

423

О скорости загрузки, рассказывает Дастин Хайл:

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

Сначала инструменты анализа. Добавьте их в закладки:

— gtmetrix.com

— webpagetest.org

— pagespeed.web.dev

Первое, что я делаю, это прогоняю сайт через Gtmetrix.

Я смотрю на основные веб-показатели, о которых сообщается здесь.

Отрисовка самого большого элемента (LCP) - это время загрузки самого большого элемента над сгибом. Если у вас есть баннер с "изображением героя" (hero image), то обычно это изображение героя.

Общее время блокировки - это обычно CSS или JS, которые не дают загрузиться чему-то еще, пока не закончится их загрузка.

Кумулятивный сдвиг макета (CLS) - это когда вы заходите на страницу, а во время ее загрузки все перемещается.

Чтобы уменьшить первую отрисовку контента (FCP), я перехожу на вкладку Waterfall и сортирую по размеру файла. Я стараюсь удалить или уменьшить размер самых больших элементов. Мне очень не нравится видеть что-либо размером более 150 кб, но я знаю, что иногда это невозможно обойти.

Виновником этого на большинстве сайтов обычно является размер изображений.

Чтобы оптимизировать ваши изображения, смотрите это видео.

https://www.youtube.com/watch?v=-hHgIEK-T9s

Для общее времени блокировки (TBT) мне нравится использовать основной тест Web Vitals на Webpagetest. Перейдите к просмотру водопада и добавьте иконку, чтобы показать блокирующие элементы в списке. Попробуйте удалить эти элементы или отложить их, чтобы они больше не блокировали рендеринг.

В CLS иногда трудно понять, что именно движется. Для этого я использую тест Core Web Vitals на Webpagetest, а затем щелкните на номере CLS, и вы перейдете к этому разделу отчета. В нем будут выделены элементы на странице, которые перемещаются при загрузке.

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

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

Я также разместил сайт на Cloudflare. Обязательно зайдите в раздел аддонов в WP Rocket и подключите API. Если вы этого не сделаете, Cloudflare не будет обновлять изменения на сайте, когда вы их делаете.

Если вы используете Siteground или Cloudways, используйте их плагины.

Вы на Ezoic? Вам нужно использовать leap.

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

Повторно запустите тесты после того, как вы все настроите, чтобы провести тонкую настройку всех трех показателей сайта.

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

Если ваше мобильное меню не работает, возможно, дело в JS-файле. Под водопадом найдите соответствующий JS-файл и добавьте его в раздел исключения defer JavaScript в WPR.

Эти инструкции не будут на 100% подходить для каждого сайта, но я постарался объяснить те вещи, которые помогут большинству людей.

@MikeBlazerX