Как ускорить загрузку сайта на мобильных устройствах (2022 г.)

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

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

По данным StatCounter, более 50% интернет-пользователей во всем мире используют мобильные устройства. При этом только немногим более 47% используют десктопы.

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

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

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

Быстрая загрузка вашего сайта на мобильных устройствах улучшит SEO, снизит показатель отказов и повысит конверсию.

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

Тестирование скорости вашего сайта

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

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

Существует множество инструментов для тестирования мобильных устройств, но я предпочитаю тест Google Test My Site для тестирования скорости мобильных устройств.

Просто зайдите на ThinkWithGoogle и введите URL своего сайта. Вы должны иметь возможность проверить, насколько быстр ваш сайт.

Для меня достаточно сайта, который загружается в течение 3 секунд. Но Think With Google рекомендует не менее 2,4 секунды.

Как ускорить загрузку сайта на мобильных устройствах

Вот лучшие практики для ускорения вашего сайта на мобильных устройствах:

Используйте адаптивную тему

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

Обслуживание десктопной версии веб-сайта для мобильных пользователей замедлит время загрузки. И это ужасно для пользовательского опыта.

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

Используйте быстрый веб-хостинг

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

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

Я рекомендую Cloudways и Kinsta для установленных веб-сайтов. TargetTrend размещается на Cloudways. Для начинающих сайтов я рекомендую Bluehost.

Используйте AMP

Accelerated Mobile Pages (AMP) — это проект Google, направленный на ускорение работы веб-сайтов на мобильных устройствах.

AMP оптимизирован для мобильного просмотра и может значительно ускорить загрузку веб-сайта. Согласно исследованию, это также может сократить количество запросов более чем на 77%.

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

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

Ленивая загрузка изображений

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

Если вы пытаетесь протестировать свой веб-сайт с помощью PageSpeed ​​Insight или Web.dev и получаете предупреждение «отложить закадровые изображения», это означает, что изображения замедляют время загрузки, и вам следует рассмотреть возможность их ленивой загрузки.

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

Существует множество плагинов для обработки ленивой загрузки. Большинство плагинов кеша и плагинов оптимизации изображений имеют параметры отложенной загрузки.

Устранение ресурсов, блокирующих рендеринг

Устранение ресурсов, блокирующих рендеринг, может ускорить загрузку вашего веб-сайта на мобильных устройствах.

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

Устранение этих ресурсов может ускорить время загрузки. Существуют плагины, такие как Autoptimize, которые могут помочь устранить ресурсы, блокирующие рендеринг.

У меня есть полезная статья на эту тему, вы должны прочитать: Как устранить ресурсы, блокирующие рендеринг, в WordPress.

Удалить неиспользуемый CSS

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

Существуют плагины, такие как Perfmatters и Asset CleanUp, которые могут помочь удалить неиспользуемый CSS.

Я написал простое руководство по этому поводу: Как удалить неиспользуемые CSS и JS в WordPress.

Создать критический CSS

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

Существуют плагины, которые могут помочь в создании Critical CSS. WP Rocket может это сделать, LiteSpeed ​​Cache и WP Performance также могут генерировать критический CSS.

Иметь хорошую систему кэширования

Кэширование — очень надежный способ ускорить сайт. Вы должны использовать эффективный плагин кеширования, чтобы предоставлять кешированное содержимое вашим мобильным посетителям. WP Rocket — очень эффективный плагин кэширования премиум-класса. Кэш W3 Total при правильной настройке может быть очень эффективным.

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

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

Оптимизация изображений

Убедитесь, что вы сжимаете изображения. Я предпочитаю полностью сжимать изображения перед их загрузкой. Однако существует множество плагинов, таких как optimole и другие, которые помогают сжимать изображения внутри WordPress.

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

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

Сократить код

Минификация — это процесс сжатия кода веб-сайта от большего размера к меньшему. Чем меньше, тем лучше, если ничего не ломается.

Вам следует подумать о минимизации JS и CSS.

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

Свести к минимуму редиректы

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

Убедитесь, что у вас не слишком много редиректов. Если да, то уменьшите их настолько, насколько сможете.

Включить сжатие

Сжимайте файлы, чтобы сделать ваш сайт быстрым на мобильных устройствах. Чем меньше вещей, тем быстрее будет ваш сайт.

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

Существуют также плагины, которые могут помочь вам включить сжатие, если решение плагина вам больше подходит.

Уменьшить количество AdSense на странице

Google AdSense — один из самых популярных способов заработать на блогах, но также известно, что он значительно замедляет работу веб-сайтов.

По моим наблюдениям, если вы деактивируете AdSense, вы сразу заметите очень большую разницу во времени загрузки.

Но деньги очень важны, как и скорость. Так что придется идти на компромисс. Google рекомендует размещать 3 рекламных блока на странице. Если вы придерживаетесь этого, то вы должны быть в порядке.

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

Используйте CDN

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

Если вы не используете CDN, вы многое упускаете!

Ознакомьтесь с лучшими провайдерами WordPress CDN.

Использовать шрифт системного стека

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

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

Некоторые темы упрощают переход на системный стек. Просто переключитесь на системный стек.

Используйте более новые версии PHP

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

Не только для скорости, но и для безопасности.