Повысьте мобильную скорость вашего сайта WordPress

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

В этом посте я объясню:

• Почему мобильная производительность обычно хуже
• Основная причина медленных мобильных страниц
• Как создать мобильные версии ваших страниц
• Как удалить ненужные файлы с мобильных страниц

Оптимизация для мобильных устройств требует дополнительных усилий, поскольку владельцы сайтов обычно «модифицируют» свои сайты для работы на мобильных устройствах.

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

Почему мой сайт медленно работает на мобильных устройствах?

Во-первых, будьте уверены, это совершенно нормально!
Скорость и результаты на мобильных устройствах по умолчанию будут хуже, чем на настольных компьютерах, потому что:

• Инструмент Google PageSpeed ​​использует медленное соединение 3G для запуска теста. Это сильно отличается от быстрого 4G или Wi-Fi. Более низкая скорость соединения = более медленная загрузка
• Мобильные устройства обычно имеют меньшую вычислительную мощность, чем настольные компьютеры, поэтому для обработки всего кода на вашей странице требуется больше времени. Google использует для тестирования устройство среднего уровня, которое работает медленнее, чем ваш модный iPhone.

Сделать сайт быстрым в оптимальных условиях — это совсем не то, что оптимизировать для плохих условий, например, в мобильном тесте PageSpeed. Если вы хотите оптимизировать свой мобильный сайт, вам потребуется дополнительная работа.

Что владельцы сайтов делают не так

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

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

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

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

Вы можете тратить время и деньги своих посетителей

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

Что тормозит мобильную страницу?

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

Самой большой проблемой обычно является JavaScript, который используется для интерактивных / динамических функций, таких как:

• Слайдеры
• Карусели
• Ящики чата
• Видео
• Виджеты с лентами социальных сетей (например, отображение фотографий из Instagram)
• Анимации и другие эффекты
• Эффекты параллакса

Чтобы понять, насколько сильно ваш сайт использует JavaScript, проведите этот эксперимент. Отключите JavaScript в своем браузере и просматривайте свой веб-сайт. Посмотрите, какая часть его еще видна и пригодна для использования.

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

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

Как ускорить работу моего мобильного сайта на WordPress?

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

PageSpeed ​​сообщает вам, какие плагины являются узким местом

При запуске отчета обратите особое внимание на следующие разделы:

• Уменьшать влияние стороннего кода
• Уменьшить время выполнения JavaScript

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

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

Хорошо, что мне делать с этим надоедливым JavaScript?

Лучшая методика оптимизации — удаление 🙂

Итак, первое, что вам нужно сделать, это проверить все эти функции — действительно ли они нужны вашим мобильным посетителям?

Еще один способ подумать об этом: можете ли вы себе это позволить с точки зрения производительности?

Это будет компромисс, поэтому вам нужно решить, перевешивает ли преимущество функции ее влияние на скорость.

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

Как создать другую домашнюю страницу для мобильных посетителей на вашем сайте WordPress

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

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

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

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

Плагин мобильных страниц

Плагин Mobile Pages от Pootlepress позволяет легко создать мобильную версию любой страницы вашего сайта.

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

Чтобы использовать плагин Mobile Pages:

1. Добавьте новый блок на свою страницу
2. Найдите блок Gutenberg Mobile
3. Щелкните значок Импортировать содержимое страницы кнопка — это переносит ваш существующий контент в блок Gutenberg Mobile.
4. Теперь содержимое вашей страницы разделено между настольными и мобильными устройствами, и вы можете создать отдельную версию только для мобильных устройств.

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

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

Удалите ненужные файлы на мобильном устройстве с помощью Asset CleanUp Pro

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

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

only screen and (min-width: 540px)

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

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

Демо

В качестве доказательства концепции я сделал тестовую страницу со слайдером вверху, затем текст и видео на YouTube. У меня активировано кеширование, но других оптимизаций нет. Эта страница с одинаковым контентом для обоих, набирает от 4 до 9 на мобильных устройствах и около 55 на компьютерах (баллы могут незначительно отличаться в каждом тесте).

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

И с помощью Asset CleanUp Pro я удалил связанные файлы из слайдера для мобильных устройств и пару других файлов плагинов, которые не нужны для страницы.

Мобильный счет поднялся до 22–28 только с этими изменениями.

Конечно, 22 все еще довольно плохо, но это также до того, как я дополнительно оптимизировал страницу со всеми обычными методами, такими как LazyLoad, минификация и т. Д.

Только это простое изменение содержания принесло 18-24 балла.

И чтобы еще немного доказать, что если мы посмотрим на некоторые конкретные показатели PageSpeed, связанные с JavaScript, вы также увидите большие улучшения:

	Исходный контент	Контент для мобильных устройств
Минимизируйте работу с основным потоком	7,3 с	4,9 с
Уменьшить время выполнения JS	5,3 с	3,4 с
Время интерактивного	20,5 с	11,9 с

Если вы не можете удалить JavaScript, вы должны отложить его

Если вы не хотите идти на компромисс в отношении контента, то лучшее, что вы можете сделать для повышения производительности, — это отложить выполнение JavaScript.

Вы можете сделать это с помощью такого плагина, как WP Rocket или Flying Scripts.
Эта оптимизация задерживает загрузку и запуск JavaScript до тех пор, пока посетитель не взаимодействует со страницей, например, не коснется экрана или не прокрутит страницу.

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

Обратная сторона: Если для видимой части вашей страницы требуется JavaScript, и вы откладываете его, посетитель ничего не увидит, пока не начнёт взаимодействовать. Так что в некоторых случаях это может вызвать странный пользовательский опыт.

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

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

Фундаментальные оптимизации все еще применяются

Все другие стандартные оптимизации, такие как сжатие GZIP, минификация, LazyLoad и т. Д., Применимы для мобильных устройств так же, как и для настольных компьютеров.

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

Вывод

Поскольку как индексирование с ориентацией на мобильные устройства, так и Core Web Vitals становятся реальностью, сейчас самое время начать работать над производительностью вашего сайта на мобильных устройствах. Сделайте это приоритетом, а не второстепенным!