Содержание
- 1 Анализ начального состояния
- 2 1. Настройте файл .htaccess
- 3 2. Оптимизируйте CSS и JavaScript
- 4 Промежуточные результаты
- 5 3. Ресурсы CSS, блокирующие рендеринг — давайте приступим к мелочам
- 6 Удалить таблицу стилей Google Web Fonts из заголовка
- 7 Конечный результат тестовой страницы
- 8 Заключение
- 9 Ссылки по теме
Анализ начального состояния
Для этого теста я выбираю чистую установку 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:
Исходное состояние с Google PageSpeed Insights:
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 показывает влияние этих двух записей на производительность:
С помощью этого инструмента вы можете проверить, работает ли сжатие 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 не будет таким оптимистичным!
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 (символ мусорной корзины в правом верхнем углу приборной панели).
Новый результат Google PageSpeed Insights
Пункт 3: Уменьшите количество 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 в соответствующее поле в 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 баллов. Да, я горжусь этим.
В то же время значительно улучшилось мобильное представление, хотя мы не оптимизировали наш сайт для этого.
Заключение
Единственный момент, который мы еще можем исправить, — это лучшее сжатие JavaScript. Но это сэкономит нам всего 673 байта (1%). Это вообще не имеет отношения к производительности. Продолжать идти означало бы лишь помассировать свое эго. 99 из 100 возможных баллов для десктопного и мобильного просмотра — феноменальный результат. Сайт с таким результатом — исключение. Если вы дойдете до этого момента, вы станете настоящим художником. Надеюсь, моя статья поможет вам стать таким художником и сделает ваш сайт настоящим гонщиком.
Ссылки по теме
(дпе)