Ускорение работы сайта WP

В данной статье будут собираться материалы по ускорению работы сайта на движке WordPress и работы сайта в целом.

Минимизация кода (css, script)

Сокращение и упрощение кода скриптов и стилей и html.

Плагин Better WordPress Minify

Простой в настройке и действии плагин. После активации в настройках нужно поставить галки в первых 3-х пунктах.
Во вкладке Enqueued files регулируются какие скрипты и стили подгружать (в хедере, в подвале), какие игнорировать.
После внесения изменений нужно обновлять окно браузера Cntr+R чтоб все изменения были видны в основных окнах.

Еще один отличный плагин по минимизации кода (css, script и html) — Autoptimize (200 000 скачиваний). Из настроек выбираем что минимизировать: css, script, html и все! Он просто работает, без нареканий. C WP Super Cache работает также стабильно.

Ошибка была связана с настройкой сжатия css:
Aggregate all linked CSS-files? If this option is off, the individual CSS-files will remain in place but will be minified.

Но возможно это было также связано с новой методикой подключения стилей.

Дополнение: это проблема возникает из-за метода подключения стилей. В данном случае, плагин Autoptimize наоборот решает проблему, т.к. он фактически заранее погружает стили в сжатом виде, а не получает напрямую. т.е. проблема нового метода подгрузки стилей в Firefox и IE.

Сервисы проверки скорости загрузки сайта

http://tools.pingdom.com/ — показывает сколько времени загружались различные элементы

PageSpeed Insights — комплексный сервис Google с рекомендациями по ускорению загрузки сайта. На самом деле, далеко не все рекомендации ведут к непосредственно ускорению, а скорее к быстрейшему распознаванию браузером контента (в любом виде).

Минимизация кода (html)

С cжатием кода html отлично справляется плагин GMT HTML Minify. Скачать можно здесь.

Сжатие изображений

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

Обработка, обрезка и сжатие в PhotoShop’e не дают 100% результата.

Нужно поставить плагин WP Smush он будет сжимать изображения при загрузке на сайт. При этом он также может сжать уже загруженные изображения.

В целом размеры изображений на сайте является наиболее весомым аргументом в Google PageSpeed Insights, т.к. они имеют существенный «вес». Необходимо задавать такие размеры изображениям (миниатюрам), которые физически выводятся на экран (без запаса). Критерий оценки не только в самом весе файла (в любом случае требуется сжатие и оптимизация), но и в соотношении того, что мы видим с фактическим размером файла, т.е. лучше увеличить визуальную область изображения.

Уменьшение изображений

Задаем максимальный размер загружаемых на сервер изображений по высоте и ширине. Для этого используем плагин Imsanity (200 000 скачиваний). В настройках плагина выставляем максимумы по высоте и ширине.

Можно пересохранить уже загруженные изображения. Нужно понимать что плагин сканирует текущие загруженные изображения не соответствующие заданным размерам по 250 шт. т.е. нужно сканировать неоднократно.

Используем кэш браузера

Вставляем в .htaccess

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 7 days"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/html "access plus 7 day"
ExpiresByType text/x-javascript "access 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 year"
</IfModule>

Сжатие файлов

Вставляем в .htaccess

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
</IfModule>

Убираем лишнее из WordPress

// REMOVE EMOJI ICONS
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' ); 
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); 
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
add_filter( 'tiny_mce_plugins', 'disable_wp_emojis_in_tinymce' );
function disable_wp_emojis_in_tinymce( $plugins ) {
    if ( is_array( $plugins ) ) {
        return array_diff( $plugins, array( 'wpemoji' ) );
    } else {
        return array();
    }
}

//Отключить виджет события WP
function dweandw_remove() {
	remove_meta_box( 'dashboard_primary', get_current_screen(), 'side' );
}
add_action( 'wp_network_dashboard_setup', 'dweandw_remove', 20 );
add_action( 'wp_user_dashboard_setup',    'dweandw_remove', 20 );
add_action( 'wp_dashboard_setup',         'dweandw_remove', 20 );

// Rest wp_head()
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'wp_shortlink_wp_head', 10, 0 );
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );
remove_action( 'wp_head', 'wp_generator' );
remove_action( 'wp_head', 'feed_links', 2 );
add_filter( 'feed_links_show_comments_feed', '__return_false' );

// Отключить поддержку dashicon (во фронтенде)
add_action( 'wp_print_styles',     'my_deregister_styles', 100 );
function my_deregister_styles()    { 
   wp_deregister_style( 'dashicons' ); 
}

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

Подключение скриптов, стилей и шрифтов

Проверено на личном опыте (и подтверждено PageSpeed Insights), что быстрее генерируется страница которая скрипты, шрифты и стили берет со своего сервера, нежели страница подгружающая их со сторонних серверов, например google. Не смотря на то, что серверы у google конечно мощнее текущего, но странице при формировании приходиться делать внешний запрос. И при данном запросе получаемые файлы запрашиваются при переходе на каждой странице, тогда как файлы полученные со своего сервера запрашиваются в первый раз, а далее кэшируются.

Время ответа сервера

Время ответа сервера одна из частых причин снижения коэфициента скорости сайта. Но данная составляющая сложна в понимании. Время ответа сервера зависит от таких факторов как:

• Качество самого сервера
• Количество запросов к БД (скорость работы БД). Если при пользовательском выводе вклинится в основной запрос, то запросов к БД будет меньше.
• Количество HTML кода на странице

Количество запросов можно легко отследить специальной функцией:

function wpusagecode() {
	
  echo '<span id="wp_usage"><i class="fa fa-wordpress"></i>';
  printf( ('SQL: %d за %s сек. '), get_num_queries(), timer_stop(0, 3) );
	if ( function_exists('memory_get_usage') ) echo round( memory_get_usage()/1024/1024, 2 ) . ' mb ';
  echo '</span>';
  
}
add_action( 'get_footer', 'wpusagecode' );

Вторая функция — это оформление вывода данных:

function wpusagecode_style() {
print '<style>

#wp_usage {
    position: fixed;
    background-color: rgba(0,0,0,0.9);
    color: #fff;
    font-size: 10px;
    z-index: 99;
    padding: 10px 15px;
    left: 25px;
    bottom: 25px;
    border-radius: 3px;
}
#wp_usage .fa {margin-right: 7px; color: #F44336;}	
@media screen and (max-device-width:480px) { #wp_usage {display: none;}	}

</style>';
}
add_action('get_footer', 'wpusagecode_style');