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

В этой небольшой серии мы поговорим о вещах, которые действительно ускоряют работу сайтов на WordPress. Google Page Speed ​​Insight для нас не актуален, так как речь идет исключительно о скорости. Мы хотим, чтобы наш веб-сайт вошел в миллисекундную область. Мы заложили основу для этого в первой, второй и третьей части. Сегодняшний выпуск посвящен доставке файлов CSS и JavaScript.

CSS и JavaScript играют важную роль, когда дело доходит до скорости

Помимо изображений и графики, файлы CSS и JavaScript и их правильная доставка являются определяющим фактором того, насколько быстрым может быть веб-сайт. Количество файлов, которые необходимо загрузить, также влияет на время загрузки. Я могу только порекомендовать отключить все плагины, которые вам на самом деле не нужны. Большинство плагинов имеют свои собственные накладные расходы на данные, и вскоре тема должна предоставить от 15 до 25 файлов CSS и JavaScript.

Особенно от этой болезни страдают многоцелевые темы. Хорошим примером может служить популярная премиальная тема Enfold от Kriesi, так как ей нужно 17 файлов JavaScript самостоятельно. Эти темы также могут стать довольно быстрыми, но они не могут войти в область миллисекунд. Тема с несколькими файлами и только необходимыми плагинами — лучшее условие для настоящей скорости.

Веб-сайты WordPress очень быстрые: идея сегодняшней статьи

Сегодняшняя статья о «правильной» доставке статических данных. JavaScript можно обрабатывать автоматически, в то время как для файлов CSS требуется ручная работа. Мы удалим все данные CSS из автоматической загрузки и позволим им загружаться вручную, что важно для скорости сайта. Файл style.css будет загружен в шапку после его освобождения от ненужного хлама. Все остальные файлы CSS будут загружены в нижний колонтитул.

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

Какие файлы куда загружаются?

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

Таким образом, внимательно отметьте, где необходим каждый файл. Потому что мы будем интегрировать их только там, где они нужны.

Внешний CSS против прямой реализации CSS в HTML

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

CSS и JavaScript. Часть 1. Удаление строк запроса

WordPress связывает статические ресурсы в конце файла (?ver=4.5) через так называемые строки запроса. Как правило, это хорошая идея, которая должна гарантировать, что эти статические ресурсы, такие как CSS и JavaScript, могут быть кэшированы и не должны загружаться заново каждый раз при доступе к веб-сайту.

http://server.example/wp-content/themes/hemingway/style.css?ver=4.1

Тем не менее, параметр всегда критикуется как проблема для эффективного кэширования инструментами тестирования скорости, такими как Pingdom, потому что статическое содержимое URL-адресов с параметрами не всегда хранится в кеше, а каждый раз должно быть получено с сервера. Мы избежим этой проблемы позже, с правильным управлением версиями. Но сначала мы удалим строки запроса из файлов. Введите следующий код в файл functions.php вашей темы:

Один клик открывает Gist на Github

CSS и JavaScript. Часть 2. Безопасное добавление JavaScript в нижний колонтитул

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

Один клик открывает Gist на Github

CSS и JavaScript — Часть 3: Удаление из очереди и удаление всех файлов CSS

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

После этого нам нужен фрагмент кода, который удаляет все файлы CSS. Однако первый фрагмент работает не со всеми файлами, поэтому я добавил фрагмент версии B. Один из двух определенно удалит CSS. Сначала попробуйте версию А, а затем, если она не работает, попробуйте версию Б.

Эти фрагменты также принадлежат файлу functions.php темы или плагину пользовательского сайта.

Один клик открывает Gist на Github

CSS и JavaScript. Часть 4. Правильное управление версиями CSS-файлов

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

Для чего вам нужны версии файлов

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

/wp-content/themes/democraticpost-1.3.0/style.1457278063.css

Один клик открывает более высокое разрешение.

Часть 1: Код для functions.php

Один клик открывает Gist на Github

Часть 2: Код для файла .htaccess

Файл .htaccess, который находится в корневом индексе WordPress, необходимо настроить. Пожалуйста, сделайте резервную копию файла перед настройкой! После этого область WordPress заменяется следующей.

Один клик открывает Gist на Github

Часть 3. Ручное сжатие всех файлов CSS

Поскольку эту задачу нельзя выполнить с помощью плагина кэширования, нам нужно сделать это самостоятельно. Пожалуйста, сделайте резервную копию каждого файла, прежде чем начать этот процесс. Сделав это, откройте файлы CSS с помощью редактора HTML, скопируйте весь контент и добавьте его в предоставленное поле компрессора CSS. Правильной настройкой для этого является «самая высокая». После того, как инструмент сжал код CSS, мы вводим его в файл style.css и сохраняем.

Чтобы автоматическое управление версиями работало, мы должны настроить небольшой фрагмент кода для вывода файлов CSS. Следующая настройка относится к области ссылок (href=»»):

">

Например, правильный путь может выглядеть так:

/wp-content/themes/democraticpost-1.3.0/style.css

Часть 4: Интеграция файлов в нужные места

Во-первых, Style.css реализован в шапке. Самый простой способ сделать это — открыть файл header.php вашей темы, а затем ввести ссылку в области заголовка. Обратите внимание на правильность написания пути к данным. Если это не на 100 процентов правильно, браузер не найдет файл, что вызовет ошибку 404.

Стиль.css

Один клик открывает более высокое разрешение.

Все остальные файлы CSS

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

Один клик открывает более высокое разрешение.

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

Один клик открывает более высокое разрешение.

На снимке экрана видно, что соответствующий файл CSS реализован только в сообщении с идентификатором 4368 и нигде больше не загружается.

Кодекс WordPress: Правильное использование условных тегов

Лечение JavaScript

Это самая легкая часть. Если мы хотим быть точными, как в случае с CSS, и позволять файлам загружаться только там, где это необходимо, нам нужен небольшой премиальный плагин. Он называется Gonzales и в настоящее время стоит 19 долларов США. Плагин размещается на панели инструментов, которую вы видите, когда входите в систему и получаете доступ к своей странице. Плагин позволяет регистрировать каждый ресурс на каждой странице или только на определенных. Приложив немного усилий, вы сможете точно определить, какой файл JavaScript и где загружен.

Скриншот:

Один клик открывает более высокое разрешение.

Объединение и сжатие JavaScript с помощью Autoptimize

После этого файлы JavaScript собираются и сжимаются. Бесплатный плагин «Autoptimize» идеально подходит для этой задачи. На скриншоте показаны необходимые настройки:

Заключение

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

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

Реально ускорить сайты WordPress: серия

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

(дпе)