Реально ускорить сайты WordPress [#2]

Реально ускорить сайты WordPress [#2]
Добро пожаловать обратно в раздел «Как ускорить сайты на WordPress». В первой части нашей серии мы рассмотрели важность правильного решения для веб-хостинга. При этом мы ответили на вопросы о том, какие преимущества дает хостинг на SSD и почему важно, чтобы на сервере был активирован HTTP/2. В этой части мы займемся Prefetch и Preconnect, а также эффективной оптимизацией изображений и графики. Узким местом оптимизации производительности являются особенно изображения, и на этом этапе большинство пользователей терпят неудачу и прекращают оптимизацию, поскольку просто не знают, как продолжать. Мы также поговорим о правильном использовании объявлений Google Adsense.

Ускорение веб-сайтов WordPress

1 — Предварительная выборка и предварительное подключение

Использование обоих методов выгодно, если необходимо загрузить много внешних файлов и сценариев. Сюда входят рекламные блоки Google Adsense, а также все другие файлы, которые необходимо загружать с внешних серверов. Они просты в использовании и имеют ощутимые преимущества. Решающим фактором является то, что разрешение DNS и так называемое рукопожатие уже выполняются на начальных этапах загрузки веб-сайта, а не в последний момент, когда запрашивается файл.

DNS — предварительная выборка

rel="dns-prefetch" href="//fonts.googleapis.com" />

Эта ссылка на внешний ресурс, который вы хотите запрашивать, находится в шапке сайта. Эта строка кода заставляет браузер выполнять разрешения DNS в начале загрузки, чтобы позже ресурс мог загружаться быстрее. DNS (система доменных имен) переводит IP-адреса вашего сервера в доменные имена. Введите домен в строке браузера, и DNS преобразует домен в IP-адрес сервера для браузера. В среднем этот процесс занимает от 20 до 250 миллисекунд. Элемент Prefetch позволяет сократить это время.

Предварительное подключение

rel="preconnect" href="//fonts.googleapis.com" />

Элемент Preconnect отличается от DNS Prefetch только одним аспектом. Здесь делается еще один шаг, и выполняется рукопожатие TCP и TLS. Это также важные процессы, которые обычно занимают некоторое время. Объединение обоих элементов имеет смысл, так как загрузка внешних ресурсов может выполняться быстрее по запросу. Поскольку все файлы, которые не нужно отображать в видимой области, расположены в нижнем колонтитуле для профессиональной оптимизации скорости, это приводит к более быстрой загрузке данных в нижнем колонтитуле. Таким образом, я рекомендую добавлять оба элемента в шапку для всех внешних файлов, однако позволять им загружаться только там, где это имеет смысл. Для большинства файлов это будет только в области статьи, но не на целевой странице.

Таким образом, мой заголовок выглядит так:

Предварительная выборка и предварительное подключение

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

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

В этой области нам нужно глубоко проникнуть в наш набор хитростей. Это уже начинается с сохранения его для Интернета. В фотошопе нужно убедиться, что JPEG-файлы сохраняются постепенно. Использование нескольких изображений частично большого формата снижает производительность. Однако это не означает, что он не может работать. Вам нужно только немного настроить и, к сожалению, потратить деньги! Давайте взглянем на целевую страницу моего веб-сайта «Демократическая почта». Есть 26 изображений на посадочной странице, один из них в формате 1000 х 420 пикселей, пять в формате 740 х 315 пикселей. Кроме того, я активировал виджет «Лучшие сообщения» Jetpack. Это, по меньшей мере, настоящий вызов. Вот подход, который я использовал для оптимизации:

Плагин WordPress для оптимизации изображений: Optimus HQ

В настоящее время Optimus — лучший плагин для оптимизации изображений. Поверьте мне; нет лучшего. Optimus не бесплатен, так как это плагин премиум-класса. Конечно, есть и бесплатная версия Optimus, но она не дает того, что нам нужно. Покупки нельзя избежать при использовании большого количества изображений на вашем веб-сайте, как это делаю я. Optimus HQ в настоящее время предлагается по сниженной цене и стоит 19 евро на один год. Не обязательно сумма, которая опустошает ваши карманы.

Сжатие изображений без потерь Optimus HQ является выдающимся. Кроме того, этот плагин предлагает преимущество перед всеми другими плагинами для оптимизации изображений. Он может создавать графику WebP. Именно этот формат файла делает веб-сайты с большим количеством изображений такими быстрыми, если этот формат поддерживается браузером. Однако он также достигает наилучших результатов и без поддержки WebP.

Штаб-квартира Die Optimus Einstellungen

Optimus рекомендует использовать подключаемый модуль Cache Enabler для интеграции поддержки WebP. Я не советую этого делать, так как Cachify по-прежнему является самым быстрым плагином кэширования, когда он настроен на создание статических HTML-страниц, но об этом позже. После покупки и установки Optimus HQ следует использовать массовый оптимизатор для оптимизации всех изображений, которые уже сохранены в медиатеке.

Защита поддержки WebP с помощью .htaccess

Самый интеллектуальный и быстрый способ доставки правильных форматов изображений в разные браузеры — это запись в файл .htaccess. Это обеспечит мгновенную перезапись формата JPG в формат WebP в поддерживаемых браузерах. Просто поместите следующий код в самый верх файла .htaccess:

Один клик открывает суть на GitHub
htaccess-fuer-webp

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

HTML-Quelltext

Однако, копнув немного глубже в инструменты разработчика Google Chrome, в области «сеть» мы быстро увидим, что графика отображается браузером не как JPEG, а как WebP.

Als WebP и браузер с улучшенной графикой

Здесь более наглядно:

Die als WebP ausgelieferte JPEG-DateiОграничения: Генерация форматов изображений WebP работает только для форматов изображений предварительного просмотра, которые были правильно зарегистрированы в WordPress с помощью функции эскизов сообщений.

Результат убедителен

Разница в размере файла между JPEG и WebP бросается в глаза. Первое большое превью моего сайта в разрешении 1000 x 420 пикселей имеет размер файла 168 КБ в формате JPEG, а его размер всего 98,7 КБ как WebP. В этом случае браузер имеет 69,3 КБ меньше грузить. При добавлении всех других изображений это приводит к огромному уменьшению размера файла вашего веб-сайта. Таким образом, браузеры, поддерживающие формат файлов WebP, могут загружать и отображать свои веб-сайты намного быстрее.

Браузерная поддержка графики WebP

Поддержка браузера WebP

Для Firefox есть патч, добавляющий отсутствующую поддержку WebP.

3 — Объявления Google Адсенс

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

а — AdSense Ads не имеет ничего общего с целевой страницей!

Ни в коем случае не размещайте их там. Они замедлят процесс создания страницы примерно на 800 миллисекунд. Это соответствует почти целой секунде времени загрузки рекламного блока размером 300 x 250 пикселей. Рекламные объявления, которые там размещаются, также приносят всего пару центов в день, даже при большем трафике.

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

б — интегрировать Google Adsense только в содержание статей

Одно объявление, размещенное непосредственно в содержании статьи, может принести много денег. Гораздо больше, чем любое другое размещение. По моему опыту, одного этого объявления достаточно, чтобы получить желаемую прибыль и максимально сократить время загрузки. Здесь, в Noupe, эта реклама привязана над первым абзацем, я (в Демократической почте) поместил ее под первым абзацем. Для меня там все отлично работает.

c — функция WordPress для автоматической интеграции рекламы

WordPress может автоматически размещать контент после первого абзаца статьи. Вам необходимо добавить следующий код в свой рекламный блок Google Adsense, а затем либо добавить его в файл functions.php вашей темы, либо в плагин пользовательского сайта.

Один клик открывает Gist на GitHub
AdSense в содержании

Ускорение веб-сайтов WordPress: заключение второй части

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

Ссылки по теме

(дпе)