Правда о производительности WordPress [#1/2]

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

Введение – о чем эта статья

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

В этой первой части серии из двух частей я покажу вам важные настройки производительности загрузки. Затем, во второй части, мы применим на практике то, что узнали здесь. Я выберу тему, которая ссылается на несколько файлов CSS и JavaScript. Если вы можете быстро создать такую ​​тему, вы можете сделать это с любой другой темой.

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

Инфографика: как время загрузки влияет на вашу прибыль

Два примера превосходно оптимизированных и быстрых веб-сайтов

1. The Highflier: Smashingmagazine.com

У Smashing Magazine есть команда, которая заботится о производительности веб-сайта, и эта команда внесла все возможные коррективы, поскольку у них есть 100 баллов для мобильных и настольных компьютеров. 100 баллов – это абсолютное совершенство. Поздравляю, ребята, вы отлично поработали! Исходный код — фантастическая среда, чтобы научиться делать это правильно.

Ссылка на сайт: SmashingMagazine.com

2. «Нормальный» веб-сайт — TechBrain

Мой сайт TechBrain пока оптимизирован только для настольной версии. 93 из 100 возможные точки, однако, потрясающие. Конечно, есть еще возможности для улучшения. Насчет мобильной версии пока не заморачивался, так что на мобильные точки можно не обращать внимания.

Высокая производительность загрузки — оптимизация скорости страницы Google

Google Page Speed ​​является эталоном, и большинство рекомендуемых оптимизаций — однако не все — легко понять. Мы рассмотрим их пункт за пунктом и применим в следующей статье этой мини-серии, чтобы сделать ваш сайт настоящим гонщиком, а посетителей и Google — счастливыми.

Кстати, Google Page Speed ​​Score колеблется от 1 (ужасно и медленно) до 100 (джекпот) баллов.

1. Уменьшите или укоротите HTTP-запросы

Каждый вызов файла, связанного с HTML-документом (CSS, изображения и JavaScript), вызывает HTTP-запрос, или, другими словами: чем больше ссылок на файлы CSS и JavaScript у вас есть на странице, тем медленнее будет загружаться веб-сайт. Итак, вашим главным приоритетом должно быть уменьшение файлов.

2. Используйте только один JavaScript и один файл CSS

У вас не должно быть больше одного файла CSS и одного файла JavaScript для загрузки, так как каждый дополнительный файл вызовет еще один HTTP-запрос и, следовательно, более длительную загрузку.

Примечание. Поместите файл CSS в верхний колонтитул, а файл JavaScript — в нижний колонтитул.

Но: Встроенный JavaScript, который часто используется для внешних причудливых вещей, таких как Facebook Like Box или кнопки «Поделиться», должен быть либо помещен в нижний колонтитул страницы, либо включен в «асинхронныйэлемент. Таким образом, он не будет мешать быстрому отображению веб-сайта, но может быть загружен, если браузер сочтет это целесообразным.

Большие внешние и связанные файлы JavaScript могут оставаться в заголовке, если вы присвоите им «откладыватьатрибут. Это заставит браузер загружать JavaScript только после загрузки документа. По сути, JavaScript будет приостановлен и загружен в последнюю очередь.

3. Оптимизируйте изображения и графику

Если в вашей теме используется много графики, обобщите их в CSS Sprites, чтобы вызвать только один графический файл. Изображения всегда должны быть оптимизированы для Интернета, что означает их обрезание до необходимого разрешения и уменьшение размера файла. Для этого есть хорошие плагины. Но вы также можете использовать Photoshop или Gimp.

Было бы идеально, если бы изображения и все другие статические ресурсы доставлялись по сети доставки контента (CDN). Есть несколько хороших провайдеров, таких как MAXCDN или KeyCDN. Бесплатный плагин — это плагин Jetpack, где настройка называется «Протон». Если вы активируете этот параметр, все изображения статей будут доставляться довольно быстрыми серверами WordPress. Это приносит заметное улучшение производительности.

Но, как и в реальной жизни, работа с изображениями на веб-сайте означает: меньше значит больше. Чем меньше изображений, тем выше скорость загрузки.

4. Настройки .htaccess: использовать сжатие (Gzip или Deflate)

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

Вы заметите сжатие в блогах или веб-сайтах с более чем одним абзацем контента.

5. Настройки .htaccess: активировать кеширование браузера

Активация кеширования браузера важна не только для Google Page Speed ​​Online, но и потому, что несколько компонентов веб-сайта — изображения, CSS и JavaScript — будут загружаться только один раз при первом вызове. Поскольку компоненты хранятся в кеше, веб-сайт будет загружаться быстрее при повторном вызове.

6. Оптимизируйте доставку CSS — выше сгиба

Вы получите сообщение в верхней части страницы (см. без прокрутки), когда Google Page Speed ​​Online обнаружит, что один или несколько файлов блокируют отображение веб-сайта и, как следствие, задерживают отображение контента. Браузеры блокируются файлами CSS до того, как содержимое может быть отображено.

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

7. Уменьшите размер контента в верхней части страницы — CSS-доставка, часть 2

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

Поместите остальную часть файла CSS в нижний колонтитул, а не в верхний колонтитул, как обычно.

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

Затем проверьте скорость загрузки обоих методов (связанный CSS и встроенный). Не имеет смысла, если Google Page Speed ​​перестала раздражать за счет производительности вашего сайта.

8. Используйте плагин кэширования

Хороший плагин кэширования генерирует статические HTML-страницы из динамических (PHP) страниц вашего сайта. Их можно загрузить быстрее, потому что интерпретатору PHP не нужно генерировать соответствующую страницу при каждом вызове. Есть много плагинов для этой работы. Некоторые из них хороши, некоторые очень хороши и, по крайней мере, один выдающийся — с некоторыми трюками.

Рекомендуемые плагины кэширования:

9. Не используйте переадресацию 301

301 переадресация замедляет работу браузера, так как ему приходится использовать новый URL-адрес. Таким образом, вам лучше избегать таких редиректов.

10. Выберите хорошего хостинг-провайдера

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

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

Больше причин для хорошей работы веб-сайта

Крупные веб-сайты, такие как Google, Amazon и Yahoo, изучили влияние производительности загрузки на поведение пользователей. Вот результат:

Заключение

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

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

(дпе)