4 простых шага для улучшения оценки WordPress Pagespeed Insights

1. Теория и практика оценки скорости проникновения в суть страницы
2. Меры по улучшению значения скорости страницы
3. Уменьшить размеры изображений в WordPress
4. Установить кеширование
5. Уменьшить количество запросов
6. Включить кеширование в браузере
7. Причины, по которым значение Pagespeed плохое
8. Оценка скорости страницы 100
9. Не просто посмотрите на значение скорости страницы
10. Позвольте специалисту Pagespeed Insights быть оптимизированным в WordPress специалистом

Наша команда-партнер Artmisto

Google Понимание скорости страниц Оценка была у всех на устах в течение некоторого времени, когда речь заходит о производительности сайта. Конечно, это относится и к веб-сайтам WordPress. Кто управляет веб-сайтом WordPress, которые, как правило, важны для хорошего ранжирования и, конечно, для Google. Кроме того, значение скорости страницы находится в зеленом диапазоне. Итак, как вы получаете WordPress для того, чтобы показатель скорости страниц быстро переходил с красного на зеленый?

Теория и практика оценки скорости проникновения в суть страницы

Если клиенты обращаются ко мне и хотят повысить показатель скорости страниц своего веб-сайта WordPress выше 90, чтобы сайт загружался быстрее, я обычно сначала немного замедляю проект. Почему? Потому что есть 2 проблемы со счетом скорости страницы:

1. Он действительно ничего не говорит о скорости веб-сайта (вот больше Pingdom подходит): Оценка генерируется с помощью автоматического анализа веб-сайта. Используются различные параметры, которые проверяются. Например, если изображения загружаются больше, чем они отображаются. То, что для некоторых веб-дизайнеров является нормальным, чтобы всегда видеть четкие изображения на дисплеях сетчатки, для Google - просто повод вычесть несколько пунктов. Т.е. Google не делает исключений в оценке в пользу желаемого внешнего вида. Это не всегда практично.
2. Google дает рекомендации или критикует вещи, которые нельзя изменить вообще. Например, если кто-то встраивает рекламу Google AdSense на свой веб-сайт WordPress, Google Pagespeed Insights предупреждает, что сценарии препятствуют отображению сайта, поскольку их необходимо сначала загрузить. Но это не может быть предотвращено, потому что реклама загружается извне. Кроме того, эти сценарии не могут быть объединены с другими сценариями для меньшего количества запросов. Даже кеширование в браузере невозможно. Но жалуется на.

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

Меры по улучшению значения скорости страницы

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

Уменьшить размеры изображений в WordPress

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

Теперь не каждый оператор сайта может редактировать свои фотографии с помощью программы для редактирования изображений. Если да, то, пожалуйста, сделайте это! Если возможно, загружайте изображения только в тех размерах, в которых они затем установлены и необходимы. Если вы не знаете, как это выяснить, я думаю, что в любом случае это уже перегружено (это не уничижительно, но все же серьезно).

Изображения всегда должны быть уменьшены в качестве сети. Кто использует Photoshop, может перемещаться в диапазоне от 60 до 80% с JPEG. Для PNG без прозрачности вы можете обойтись без 24bit.

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

compressor.io

Compressor.io - отличный онлайн-инструмент для сжатия изображений (но уже в нужных размерах). Это означает, что информация и детали удаляются за счет качества и размера файла. Очень хорошо для нескольких фотографий.

Able Batch Converter

Able Batch Converter отлично подходит для автоматического уменьшения количества изображений (как по размеру, так и по размеру файла). С небольшой пробой и ошибкой у вас в руках будет оригинальный инструмент. Например, в WordPress вы можете загрузить все изображения из папки wp-content / uploads на свой компьютер, отредактировать их с помощью Able Batch Converter и затем загрузить их снова. Я уже свел к минимуму загрузку данных для части различных веб-сайтов здесь.

Imsanity

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

WP Smush

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

Вот несколько инструментов, чтобы узнать, насколько велики ваши фотографии на вашем собственном сайте WordPress:

• Инструменты разработчика Chrome: запущенные с помощью Ctrl + J, вы можете увидеть размер загруженных элементов в области «Сеть». Сортировка по размеру вы можете увидеть выбросы на каждой странице.
• Кричащая лягушка С «Кричащей лягушкой» вы можете просмотреть весь веб-сайт. Помимо прочего, все изображения могут отображаться и сортироваться по размеру. Поскольку здесь рассматривается весь веб-сайт, это полезный инструмент для быстрого всестороннего обзора изображений, подлежащих оптимизации. Для большинства веб-сайтов, изображения размером более 100 КБ должны быть проверены на возможность оптимизации.
• Просмотр информации об изображении в Chrome: в Chrome вам нужно дополнительное приложение для просмотра размеров изображения. Например, в Firefox это находится в разделе «Правая кнопка мыши -> Отображение графической информации».

Ленивая нагрузка

И последний совет: если вы не контролируете количество и размер изображений на 100%, и Google удовлетворен, у вас все еще есть шанс поработать с плагином для отложенной загрузки. Изображения не загружаются, пока посетитель не прокручивает рядом с изображением. Особенно с большими веб-сайтами имеет смысл, так что первоначальная грузоподъемность поддерживается как можно ниже. Однако это не всегда работает отлично: искажения, такие как пустые блоки изображений или темы, которые предотвращают отложенную загрузку, не делают решение работоспособным для всех. Здесь простое тестирование например Ленивая нагрузка ».

Установить кеширование

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

• Мой фаворит: WP-Rocket (предлагает минификацию, lazyload изображений, загрузку скрипта в нижний колонтитул, предварительную сборку кэша, ...)
• W3 Total Cache (также предлагает кеширование в браузере, минификацию, использование сервера CDN, ...)
• WP Super Cache (также предлагает предварительное кэширование, поддержку CDN, сжатие, ...)
• Cache Enabler (также позволяет устанавливать изображения webP для изображений еще меньшего размера)
• Кеш кометы (легко и быстро настроить)

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

Как кэширование помогает с плохой скоростью страницы?

Веб-сайт WordPress настраивается веб-сервером при вызове. Здесь PHP и различные запросы к базе данных выполняются. Конечно, это занимает больше времени, чем необходимость извлечения только статической HTML-страницы с жесткого диска веб-сервера. Вот где начинается кэширование: при первом вызове динамической страницы ее статическая версия сохраняется на жестком диске веб-сервера. Следующий вызов страницы затем напрямую обращается к статической версии, и, следовательно, страница вызывается намного быстрее.

Конечно, это отражено в ценностях Pagespeed Insights. Здесь среди прочего также тестируется скорость соединения с сервером, которая просто намного выше при кешировании.

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

Какие запросы? Любой файл, необходимый для сборки веб-страницы, будет запрошен сервером. Это может быть файл JavaScript, который загружает определенные динамические эффекты. Это может быть файл CSS, который определяет общий внешний вид сайта (например, style.css в WordPress). Или даже картинки, видео, шрифты, ... Каждый дополнительный запрос требует времени для создания веб-сайта, так как запрос и доставка просто нужно время.

Конечно, Google справедливо рекомендует сохранять как можно меньше запросов и, по возможности, размещать их внизу страницы. Это не всегда возможно, потому что определенные файлы (например, style.css в WordPress) должны быть загружены для правильного отображения сайта перед его отображением. Google критикует это как запрос, который «мешает рендерингу». Хотя это правильно, иногда это можно предотвратить без особых усилий. Таким образом, обычно остается несколько запросов, которые подвергаются критике, теряют очки, но просто экономически бесполезны для обработки по-другому.

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

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

Итак, как вы можете уменьшить количество запросов на веб-сайт WordPress?

Самый простой способ также с плагинами. Вот следующее:

Конечно, вы можете с помощью самодельных плагинов или тем в WordPress загруженные скрипты объединить в один большой файл и изображения в Спрайты конвертировать как можно меньше изображений для загрузки. Но большинство используют упомянутые плагины, чтобы сделать жизнь максимально простой. Обычно это CSS-файлы и JavaScript-файлы, объединенные в большой запрос. Это тогда подвергается критике в Google Pagespeed как запрос "блокировка отображения контента". Но этого вряд ли можно избежать, как я уже сказал. Сокращение все еще добавляет некоторые точки к значению Страницы.

Кстати, использование http / 2 здесь не помогает, которые некоторые веб-хостеры уже предлагают , хозяйничать Press и All-Inclusive Есть 2 из этих веб-хостов, которые делают большую работу по оптимизации производительности. Здесь запросы обрабатываются одновременно, а не последовательно. Это увеличивает скорость загрузки сайта. Google не считает это в своей оценке.

Включить кеширование в браузере

Кэширование в браузере объясняется очень кратко: возможно не только кэшировать веб-страницу на сервере, но также возможно, что браузер хранит элементы веб-страницы (например, изображения и скрипты) в своем кэше. При повторном вызове элемент извлекается не сервером, а локальным компьютером. Это значительно увеличивает скорость серфинга по сайту.

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

Встроить кеширование браузера в файл .htaccess веб-сайта WordPress

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

## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image / jpg "доступ 1 год" ExpiresByType image / jpeg "доступ 1 год" ExpiresByType image / gif "доступ 1 год" ExpiresByType image / png "доступ 1 год" ExpiresByType text / css "доступ 1 неделя" приложение ExpiresByType / pdf "доступ 1 месяц" ExpiresByType text / x-javascript "доступ 1 неделя" приложение ExpiresByType / x-shockwave-flash "доступ 1 месяц" доступ ExpiresByType image / x-icon " 1 год "ExpiresDefault" доступ 2 дня "</ IfModule> ## EXPIRES CACHING ##

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

• W3 Total Cache (Да, плагин может многое сделать - комплексное решение проблем Pagespeed Insights, см. Ссылку выше).
• Кэширование браузера с помощью .htaccess

Несмотря на кеширование в браузере, Pagespeed жалуется

Если вы включаете внешние ресурсы, такие как скрипты или изображения (например, через рекламные баннеры AdSense или Google Analytics), Pagespeed Insights жалуется, что эти ресурсы не могут быть кэшированы в браузере. Это, конечно, полная чушь, потому что ресурс да внешний и обычно не должен кэшироваться. Особенно с AdSense или Google Analytics, Google должен знать об этом. Итак, вы можете видеть снова: оценка не всегда рассчитывается обязательно значимым.

Причины, по которым значение Pagespeed плохое

В заключение, вы можете сделать следующее или спросить себя: почему оценка страниц скорости настолько плоха на некоторых веб-сайтах или в блогах WordPress?

Коротко и ясно:

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

Пример сайта, на котором слишком много запросов, слишком большие картинки и слишком много времени загрузки:

На сайте на скриншоте видно, что слайдер с очень большими картинками увеличивает время загрузки до более чем 14 секунд. Если бы вы оптимизировали только первые 10 изображений, вы могли бы предотвратить загрузку нескольких МБ. Минификация позволит сэкономить около 100 запросов, что абсолютно необходимо, особенно для крупных посетителей. Это снижает нагрузку на сервер и дает пользователю лучший пользовательский опыт.

Оценка скорости страницы 100

Конечно, один или два хардкорных оптимизатора спросят: а как я могу получить 100 баллов в Pagespeed Insights, чтобы получить гораздо лучший рейтинг?

Помимо того факта, что обычно нет смысла проводить оптимизацию до сих пор, потому что есть несколько попыток найти в сети, которые доказали, что увеличение с 85 до 100 пунктов (т.е. с зеленого на зеленый) принесло какой-либо выигрыш в рейтинге: Усилие слишком велико, чтобы понять, какие CSS-операторы для первого просмотра сайта необходимы для их предварительной загрузки, а затем опубликовать остальные.

Кроме того, сам Google уже подтвердил, что быстрый сайт не обязательно имеет преимущества в ранжировании, и, конечно, не очень быстрый сайт по сравнению с быстрым сайтом. И наоборот: если сайт работает ужасно медленно, это мешает пользователю сайта в его пользовательском опыте. Затем он спрыгивает, что, конечно, Google замечает. DAS может оказать негативное влияние в качестве фактора ранжирования. Но не для того, чтобы довести сайт с 2 секунд времени загрузки до 1,5 секунд, а для того, чтобы получить «магические» 100 в балле скорости страниц.

Таким образом, чтобы сказать «да», пожалуйста, реализуйте меры, упомянутые здесь, чтобы привести счетчик страниц в разумных высотах и, в конечном счете, предоставить пользователю лучший опыт при посещении веб-сайта WordPress. Но, пожалуйста, не преувеличивайте и не оставляйте желать даже желтого счета. Все за 70 абсолютно нормально (особенно на мобильном телефоне). Значения между 70 и 90 являются разумными. Каждый час, который необходим для увеличения счета на 1 балл, я считаю личным расходом.

Не просто посмотрите на значение скорости страницы

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

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

Позвольте специалисту Pagespeed Insights быть оптимизированным в WordPress специалистом

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

Последняя версия от 10 декабря 2018 года, автор Netzgänger René Dasbeck