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

Правда о производительности WordPress [#2/2]
В первой статье этой серии мы рассказали обо всех важных моментах для идеальной оптимизации производительности на странице. Теперь вы знаете, что вам нужно настроить, чтобы ускорить работу вашего сайта WordPress. Хотя в теории это звучит довольно просто, на практике это может быть довольно сложно. Поэтому мы вместе пройдемся по всем пунктам, чтобы убедиться, что вы применяете все правильно. Для ясности: в этой статье рассказывается, как ускорить сайт WordPress и получить высокий рейтинг Google PageSpeed.

wordpress-производительность-частьдва-тизер

Анализ начального состояния

Для этого теста я выбираю чистую установку WordPress с импортированными данными модульного тестирования темы, чтобы имитировать всеобъемлющий блог. Моя любимая тема WordPress — Baskerville от Андерса Норена, потому что она требует довольно много CSS и JavaScript. Кроме того, я присвоил каждой статье изображение статьи. Это имитирует давно существующий ухоженный блог. Кроме того, я установил плагин Jetpack и активировал точно такие же баллы, как и на своем веб-сайте (TechNick, у которого 93 из 100 баллов Google Page Speed). Это имеет то преимущество, что оптимизация веб-сайта аналогична обычной реальной установке, поскольку в исходном коде HTML можно найти больше файлов CSS и JavaScript. Мы не хотим, чтобы оптимизация была слишком простой.

Активен на Jetpack:

  • Фотон
  • Опубликовать
  • Обмен
  • Встраивание шорткода
  • Проверка сайта
  • Подписки
  • Короткие ссылки WP.me
  • Статистика WordPress.com

1. Прежде чем начать: создайте дочернюю тему

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

Загрузите CSS правильно через functions.php детской темы. Вот как это сделать:


function enqueue_parent_theme_style() {
      wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style');

Таблица стилей CSS дочерней темы также должна быть загружена правильно и не должна быть связана в заголовке. Код нужно включить в functions.php дочерней темы и добавить в шапку.

/**
 * Proper way to enqueue styles and scripts
 */
function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Папка дочерней темы должна содержать файл CSS с именем стиль.css и файл с именем functions.php. Скриншот поможет легко найти дочернюю тему. Теперь загрузите свою свежую дочернюю тему через (S)FTP в wp-контент/темы папка на сервере. Перейдите в интерфейс администратора WordPress и активируйте дочернюю тему. Если вы все сделали правильно, исходный код HTML должен содержать три файла CSS:

  • родительский стиль CSS
  • стиль-CSS
  • jetpack_css-css

2. Проверьте производительность и баллы Google PageSpeed

Чтобы понять последствия изменений, вам нужно будет проанализировать начальное состояние. Используйте Pingdom Tools и Google Page Speed ​​Insights, чтобы протестировать сайт без какой-либо оптимизации. Не забудьте нажать на Амстердам (если это ближайший к вам город), который вы можете найти под адресной строкой в ​​настройках.

Исходное состояние с Pingdom Tools:

pingdom-tools-ergebnisИсходное состояние с Google PageSpeed ​​Insights:

pagespeed-insights-ergebnis

68 из 100 возможных баллов — это плохо. Так что места для оптимизации предостаточно.

1. Настройте файл .htaccess

Прежде чем мы начнем, давайте быстро взглянем на файл WordPress .htaccess и добавим несколько строк кода. Вы можете найти файл .htaccess в основной папке WordPress на сервере, где находятся папки wp-контент, wp-админи т. д. находятся. Загрузите .htaccess на рабочий стол и вставьте следующее ниже «End WordPress»:

################### Activate compression ######
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

################# Activate browser caching ######
ExpiresActive On
ExpiresDefault "access plus 1 month 1 days"
ExpiresByType text/html "access plus 1 month 1 days"
ExpiresByType image/gif "access plus 1 month 1 days"
ExpiresByType image/jpeg "access plus 1 month 1 days"
ExpiresByType image/png "access plus 1 month 1 days"
ExpiresByType text/css "access plus 1 month 1 days"
ExpiresByType text/javascript "access plus 1 month 1 week"
ExpiresByType application/x-javascript "access plus 1 month 1 days"
ExpiresByType text/xml "access plus 1 seconds"

Тест Google PageSpeed ​​показывает влияние этих двух записей на производительность:

Bildschirmfoto-2014-12-12-um-14.57

С помощью этого инструмента вы можете проверить, работает ли сжатие Gzip. Инструмент REDBot проверяет правильность работы кэша браузера.

2. Оптимизируйте CSS и JavaScript

Прежде чем приступить к серьезным изменениям в CSS, вы должны сначала попробовать небольшие изменения, такие как сводка и сжатие. Сначала я проверяю, должен ли jQuery оставаться в заголовке (как это обычно делается из соображений совместимости). Итак, я добавляю код в functions.php дочерней темы, который помещает все файлы JavaScript в нижний колонтитул.

/**
*
* Puts all JavaScript into the footer
*
*/
add_action( 'wp_enqueue_scripts', 'evolution_print_jquery_in_footer' );

function evolution_print_jquery_in_footer() {

if ( ! is_admin() )

remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
}

Загрузка и установка Autoptimize

автооптимизировать

Autoptimize — небольшой мощный плагин для сжатия, суммирования и минимизации файлов CSS и JavaScript. Кроме того, у него есть встроенная функция «CSS в верхней части страницы», которая нам понадобится позже. После установки и активации Autoptimize переключитесь на «Настройки => Автооптимизация» на панели инструментов WordPress и выберите все три параметра: «Оптимизировать HTML», «CSS» и «JavaScript». Когда вы это сделаете, исходный код HTML будет выглядеть сжатым, но аккуратным. Количество включаемых файлов резко сократилось. Я могу найти только два файла CSS (тема и Google Fonts) и два файла JavaScript (тема и Jetpack) в исходном коде дочерней темы Baskerville.

Загрузите автооптимизацию с WordPress.org

Загрузка и установка Cachify

кашировать

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

Кэш лучше хранить на жестком диске — из двух вариантов этот более быстрый. Однако вам нужно будет добавить фрагмент кода в .htaccess. Этот и многие другие советы разработчика Сергея Мюллера можно найти на сайте Cachify.

Скачать Cachify с wordpress.org

Промежуточные результаты

тест Эйн-Вейтерера

Инструменты Pingdom добры к нам и уже показывают достойные результаты. Бьюсь об заклад, Google PageSpeed ​​Insights не будет таким оптимистичным!

zwischentest-google

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

Пункт 1. Удалите ресурсы JavaScript и CSS, блокирующие рендеринг содержимого верхней части страницы.

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

Пункт 2: Оптимизируйте изображения. С этой темой проблем не возникает, так как вам нужно изменить код.

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

билд-унтерсухен

Как вы можете видеть на скриншоте, изображение имеет размер 600 x 300 пикселей и масштабируется с помощью HTML до размера 359 x 180 пикселей. Итак, нам нужен правильный размер 359 пикселей на что-то.

Индекс.php отвечает за отображение домашней страницы. Если вы скопируете его из папки родительской темы и откроете в текстовом редакторе, вы заметите, что содержание.php принадлежащий index.php загружен. Скопируйте его также на рабочий стол и добавьте следующую строку:

пост-миниатюра

Замените эту строку, например:

Кроме того, вам нужно будет добавить следующее в functions.php вашей дочерней темы:

/**
* Image sizes
*
*/
if ( function_exists( 'add_theme_support' ) ) {

add_theme_support( 'post-thumbnails' );
add_image_size( 'post-image', 945, 9999 );
add_image_size( 'post-thumbnail', 600, 9999 );

add_image_size( 'front-thumb', 359, 9999 );
}

Чтобы убедиться, что ваши изменения не потеряются при следующем обновлении темы, загрузите отредактированный содержание.php вместе с functions.php в папку дочерней темы на сервере. Теперь изображения на главной странице необходимо назначить заново, чтобы WordPress мог правильно масштабировать миниатюры сообщений. Давайте снова протестируем наш сайт с помощью Google PageSpeed ​​Insights. Не забудьте: предварительно удалите кэш Cachify (символ мусорной корзины в правом верхнем углу приборной панели).

cachify-cache-loeschenНовый результат Google PageSpeed ​​Insights

weiterer-pagespeed-тестПункт 3: Уменьшите количество JavaScript.

javascript-редузиер

Что я могу сказать? Этот запрос бессмыслен, так как JavaScript уже превосходно сжат. Просто игнорируйте это — это не сделает ваш сайт быстрее. Особенно с учетом того, что JavaScript загружается в конце и плагину присваивается атрибут defer (даже если это не имеет смысла, поскольку он находится в нижнем колонтитуле).

Теперь осталось сделать еще одну корректировку, если нас не устраивают 93 балла Google PageSpeed ​​Insights:

3. Ресурсы CSS, блокирующие рендеринг — давайте приступим к мелочам

Я надеюсь, что вы с удовольствием пробуете новые вещи и любите делать кропотливую работу, потому что нам нужно попробовать некоторые вещи, чтобы найти лучшее решение. На этом этапе нам нужно найти весь контент CSS в таблице стилей, которая отвечает за отображение контента в верхней части страницы. Загрузите Style.css из родительской темы «Baskerville» на рабочий стол и откройте файл в текстовом редакторе. Не забудьте таблицу стилей Google Fonts; большинство тем используют Google Fonts для обеспечения приятной типографики.

Кроме того, создайте новый файл CSS и назовите его «test.css» или что-то в этом роде. Это необходимо только для скопированных битов CSS из файла Google Font и файла CSS темы Baskerville.

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

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

Я выбрал такой способ: сначала я скопировал содержимое файла Google Web Font. Это важно, чтобы избежать заиканий при отображении шрифтов. Затем я скопировал точки CSS от 0 до 7 из таблицы стилей.cc темы Baskerville (строки с 37 по 1240). Этот CSS (Google Web Fonts и style.cc от 0 до 7) теперь должен быть максимально сжат с помощью CSS-компрессора.

css-компрессор

Затем я добавил сильно сжатый CSS в соответствующее поле в Autoptimize и сохранил его. Если вы активируете дополнительные параметры, вы получите подпункт «Встроить и отложить CSS» пункта «CSS». Нажмите на него и вставьте сжатый CSS. Не забудьте сохранить его.

Удалить таблицу стилей Google Web Fonts из заголовка

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

/**
* Deregister and Dequeue Google Webfonts
* These fonts are now in the inline CSS
*
*/
function baskerville_remove_scripts() {

wp_deregister_style( 'baskerville_googleFonts' );
wp_dequeue_script( 'baskerville_googleFonts' );

}
add_action( 'wp_print_styles', 'baskerville_remove_scripts', 20 );

Теперь настал момент истины: последний тест с Google PageSpeed ​​Insights.

Конечный результат тестовой страницы

Конечный результат оказывается всего на один балл меньше, чем Smashing Magazine, который имеет невероятные 100 из 100 баллов. Да, я горжусь этим.

endergebnis-google-pagespeed

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

endergebnis-мобильный-ансихт

Заключение

Единственный момент, который мы еще можем исправить, — это лучшее сжатие JavaScript. Но это сэкономит нам всего 673 байта (1%). Это вообще не имеет отношения к производительности. Продолжать идти означало бы лишь помассировать свое эго. 99 из 100 возможных баллов для десктопного и мобильного просмотра — феноменальный результат. Сайт с таким результатом — исключение. Если вы дойдете до этого момента, вы станете настоящим художником. Надеюсь, моя статья поможет вам стать таким художником и сделает ваш сайт настоящим гонщиком.

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

(дпе)