Не секрет, что любой сайт, не только на WordPress, помимо визуальных характеристик (оно же юзабилити) — должен обладать и нормальной производительностью. В данное определение и входит показатель скорости работы сайта. Так из чего же она складывается?
Скорость сайта. От чего она зависит?
Прежде всего, хочется отметить, что скорость сайта — это совокупный показатель. На который влияет не только размер и число загружаемых данных (файлы, изображения, видео и т.д.), но и также технические свойства. Среди которых следует выделить следующие основные параметры:
- Производительность сервера (хостинга)
- Число используемых расширений
- Формат и объем передаваемых данных
Иными словами, все то что формирует запросы, а точнее их число, к базе данных — если мы говорим о php системах управления. К которым и относится CMS WordPress. Разберем подробнее некоторые моменты связанные с формированием запросов к базе данных.
Производительность хостинга
Правильность настройки «места», где расположен ваш сайт — один из важных параметров не только для улучшения скорости, но и работоспособности сайта в целом. Типы серверов, версии ПО, настройка кеша и даже нахождение дата-центров — все это влияет на производительность хостинга. Что-же касается WordPress, то следует обратить внимание на: версионность php, скорость выполнения скриптов, ограничение объема передаваемых данных.
Число используемых расширений
В WordPress большое разнообразие плагинов — это и преимущество, и «головная боль» для настройки нормальной производительности сайта. Большой ошибкой также следует считать, что плагины внутренних настроек системы не влияют на работу сайта в целом. Еще раз повторимся, они также формируют запросы к базе данных. И чем больше плагинов, тем больше одномоментных запросов к серверу. И как следствие — излишняя нагрузка при отображении страниц сайта. На самом деле, используемые расширения — это не только плагины, но и собственно оболочка вордпресс, которая также может формировать излишнюю нагрузку — при отсутствии настроек. В качестве примера интеграции собственного решения для данной CMS: Как сделать карту сайта без плагинов в wordpress?
Формат и объем передаваемых данных
Современные требования к передаваемым данным в браузер, достаточно четко обозначают минимизацию «веса» отображаемого контента. И это не только изображения или видео, но и собственно весь исходный html код. Сюда входит и визуальная текстовая часть, и кодовая составляющая, например: js, css, html-теги и микроформатные данные (json и др.). Понятно, что загрузив «красивое» фото, предназначенное для печати размером более 1Mb, вы не также получите нормальной производительности от страницы.
WordPress и скорость сайта
WordPress — это система, которая изначально предназначалась для ведения личных блогов. Какой либо особый функционал для сайтов такого формата не требуется. Но современный вордпресс — это не только блог, а система в которой можно в кратчайшие сроки развернуть полноценный сайт любой направленности. Это можно достигнуть как при помощи готовых тем, так и с использованием плагинов.
Как уже упоминалось выше, wordpress — это достаточно гибкая оболочка для администрирования сайтов, с большим числом плагинов в свободном доступе. Но также следует и понимать, что их наличие не всегда добавят вам как итоговой производительности, так и работоспособного функционала. Несколько раз подумайте прежде, чем устанавливать их на действующий проект — может можно обойтись и без них?
Понятно, что лучшим решением является разработка темы (шаблона) под необходимые задачи. Но что же делать если нет такой возможности?
Избавляемся от лишнего кода
WordPress при отсутствии настроек формирует и излишние запросы, и избыточный код. Если с первым можно разобраться отключив обновления или вообще соединение с внешними серверами cms. То к последнему следует отнестись более тщательно, так как придется внедрить определенный код в конфигурационный файл вашей темы (functions.php). Большинство настроек вы сможете найти в свободном доступе, в данном материале мы остановимся на тех, которые влияют на производительность.
- Убираем избыточный код (настройка functions.php)
//удаление избыточного кода: версии, manifest, shortlink, emoji др. function max_remove_version() {return '';} add_filter('the_generator', 'max_remove_version'); remove_action('wp_head', 'rest_output_link_wp_head', 10); remove_action('wp_head', 'wp_oembed_add_discovery_links', 10); remove_action('template_redirect', 'rest_output_link_header', 11, 0); remove_action ('wp_head', 'rsd_link'); remove_action( 'wp_head', 'wlwmanifest_link'); remove_action( 'wp_head', 'wp_shortlink_wp_head'); function max_disable_feed() {wp_redirect( get_option( 'siteurl' ) );} add_action( 'do_feed', 'max_disable_feed', 1 ); add_action( 'do_feed_rdf', 'max_disable_feed', 1 ); add_action( 'do_feed_rss', 'max_disable_feed', 1 ); add_action( 'do_feed_rss2', 'max_disable_feed', 1 ); add_action( 'do_feed_atom', 'max_disable_feed', 1 ); remove_action( 'wp_head', 'feed_links_extra', 3 ); remove_action( 'wp_head', 'feed_links', 2 ); remove_action( 'wp_head', 'rsd_link' ); function disable_emojis() { 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_emojis_tinymce' ); } add_action( 'init', 'disable_emojis' ); function disable_emojis_tinymce( $plugins ) { if ( is_array( $plugins ) ) { return array_diff( $plugins, array( 'wpemoji' ) ); } else { return array(); } }
А насколько нужен вам на сайте современный редактор блоков Гутенберг, может достаточно проверенного годами TINYMCE. Тогда воспользуйтесь данным кодом.
- Убираем редактор Гутенберг (настройка functions.php)
// Отключаем редактор Gutenberg. add_filter('use_block_editor_for_post_type', '__return_false', 10); // Не загружаем Gutenberg стили. add_action( 'wp_enqueue_scripts', 'remove_block_css', 100 ); function remove_block_css() { wp_dequeue_style( 'wp-block-library' ); // ядро WordPress wp_dequeue_style( 'wp-block-library-theme' ); // ядро WordPress wp_dequeue_style( 'wc-block-style' ); // Для WooCommerce wp_dequeue_style( 'storefront-gutenberg-blocks' ); // Для тем }
А как насчет изображений? Ведь wordpress по-умолчанию генерирует кучу дополнительных файлов. И в большинстве случаев не нужных. Воспользуйтесь функцией отключения генерируемых размеров изображений.
// отключение генерируемых размеров изображений
function max_disable_image_sizes($sizes) {
unset($sizes['thumbnail']); // отключение миниатюр
unset($sizes['medium']); // отключение среднего размера
unset($sizes['large']); // отключение большого размера
unset($sizes['medium_large']); // отключение среднего большого размера
unset($sizes['1536x1536']); // отключение 2x среднего большого размера
unset($sizes['2048x2048']); // отключение 2x большого размера
return $sizes;
}
add_action('intermediate_image_sizes_advanced', 'max_disable_image_sizes');
// отключение масштабируемого размера изображений
add_filter('big_image_size_threshold', '__return_false');
// отключение других размеров изображений
function max_disable_other_image_sizes() {
remove_image_size('post-thumbnail'); // отключение изображений, добавляемых через set_post_thumbnail_size()
remove_image_size('another-size'); // отключение других добавляемых размеров изображений
}
add_action('init', 'max_disable_other_image_sizes');
Теперь проведем необходимые настройки в системе на стороне сервера (хостинга).
Настраиваем файл .htaccess
Hypertext Access или файл htaccess — позволяет настроить производительность и безопасность wordpress. Находится в корне сайта на хостинге, обычно в папке index. Является скрытым конфигурационным файлом для любых систем. В данном случае, с помощью определенного кода — мы настраиваем сжатие и кеширование файлов сайта на стороне сервера. Имеет множество вариантов. Подробный пример приведен ниже.
- Сжатие и кеш (настройка htaccess)
#Browser Cache <IfModule mod_mime.c> AddType text/css .css AddType text/x-component .htc AddType application/x-javascript .js AddType application/javascript .js2 AddType text/javascript .js3 AddType text/x-js .js4 AddType video/asf .asf .asx .wax .wmv .wmx AddType video/avi .avi AddType image/bmp .bmp AddType application/java .class AddType video/divx .divx AddType application/msword .doc .docx AddType application/vnd.ms-fontobject .eot AddType application/x-msdownload .exe AddType image/gif .gif AddType application/x-gzip .gz .gzip AddType image/x-icon .ico AddType image/jpeg .jpg .jpeg .jpe AddType image/webp .webp AddType application/json .json AddType application/vnd.ms-access .mdb AddType audio/midi .mid .midi AddType video/quicktime .mov .qt AddType audio/mpeg .mp3 .m4a AddType video/mp4 .mp4 .m4v AddType video/mpeg .mpeg .mpg .mpe AddType application/vnd.ms-project .mpp AddType application/x-font-otf .otf AddType application/vnd.ms-opentype ._otf AddType application/vnd.oasis.opendocument.database .odb AddType application/vnd.oasis.opendocument.chart .odc AddType application/vnd.oasis.opendocument.formula .odf AddType application/vnd.oasis.opendocument.graphics .odg AddType application/vnd.oasis.opendocument.presentation .odp AddType application/vnd.oasis.opendocument.spreadsheet .ods AddType application/vnd.oasis.opendocument.text .odt AddType audio/ogg .ogg AddType application/pdf .pdf AddType image/png .png AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx AddType audio/x-realaudio .ra .ram AddType image/svg+xml .svg .svgz AddType application/x-shockwave-flash .swf AddType application/x-tar .tar AddType image/tiff .tif .tiff AddType application/x-font-ttf .ttf .ttc AddType application/vnd.ms-opentype ._ttf AddType audio/wav .wav AddType audio/wma .wma AddType application/vnd.ms-write .wri AddType application/font-woff .woff AddType application/font-woff2 .woff2 AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw AddType application/zip .zip </IfModule> <IfModule mod_expires.c> ExpiresActive On ExpiresByType text/css A31536000 ExpiresByType text/x-component A31536000 ExpiresByType application/x-javascript A31536000 ExpiresByType application/javascript A31536000 ExpiresByType text/javascript A31536000 ExpiresByType text/x-js A31536000 ExpiresByType video/asf A31536000 ExpiresByType video/avi A31536000 ExpiresByType image/bmp A31536000 ExpiresByType application/java A31536000 ExpiresByType video/divx A31536000 ExpiresByType application/msword A31536000 ExpiresByType application/vnd.ms-fontobject A31536000 ExpiresByType application/x-msdownload A31536000 ExpiresByType image/gif A31536000 ExpiresByType application/x-gzip A31536000 ExpiresByType image/x-icon A31536000 ExpiresByType image/jpeg A31536000 ExpiresByType image/webp A31536000 ExpiresByType application/json A31536000 ExpiresByType application/vnd.ms-access A31536000 ExpiresByType audio/midi A31536000 ExpiresByType video/quicktime A31536000 ExpiresByType audio/mpeg A31536000 ExpiresByType video/mp4 A31536000 ExpiresByType video/mpeg A31536000 ExpiresByType application/vnd.ms-project A31536000 ExpiresByType application/x-font-otf A31536000 ExpiresByType application/vnd.ms-opentype A31536000 ExpiresByType application/vnd.oasis.opendocument.database A31536000 ExpiresByType application/vnd.oasis.opendocument.chart A31536000 ExpiresByType application/vnd.oasis.opendocument.formula A31536000 ExpiresByType application/vnd.oasis.opendocument.graphics A31536000 ExpiresByType application/vnd.oasis.opendocument.presentation A31536000 ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000 ExpiresByType application/vnd.oasis.opendocument.text A31536000 ExpiresByType audio/ogg A31536000 ExpiresByType application/pdf A31536000 ExpiresByType image/png A31536000 ExpiresByType application/vnd.ms-powerpoint A31536000 ExpiresByType audio/x-realaudio A31536000 ExpiresByType image/svg+xml A31536000 ExpiresByType application/x-shockwave-flash A31536000 ExpiresByType application/x-tar A31536000 ExpiresByType image/tiff A31536000 ExpiresByType application/x-font-ttf A31536000 ExpiresByType application/vnd.ms-opentype A31536000 ExpiresByType audio/wav A31536000 ExpiresByType audio/wma A31536000 ExpiresByType application/vnd.ms-write A31536000 ExpiresByType application/font-woff A31536000 ExpiresByType application/font-woff2 A31536000 ExpiresByType application/vnd.ms-excel A31536000 ExpiresByType application/zip A31536000 </IfModule> <IfModule mod_deflate.c> <IfModule mod_filter.c> AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/bmp application/java application/msword application/vnd.ms-fontobject application/x-msdownload image/x-icon image/webp application/json application/vnd.ms-access application/vnd.ms-project application/x-font-otf application/vnd.ms-opentype application/vnd.oasis.opendocument.database application/vnd.oasis.opendocument.chart application/vnd.oasis.opendocument.formula application/vnd.oasis.opendocument.graphics application/vnd.oasis.opendocument.presentation application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg application/pdf application/vnd.ms-powerpoint image/svg+xml application/x-shockwave-flash image/tiff application/x-font-ttf application/vnd.ms-opentype audio/wav application/vnd.ms-write application/font-woff application/font-woff2 application/vnd.ms-excel <IfModule mod_mime.c> # DEFLATE AddOutputFilter DEFLATE js css htm html xml </IfModule> </IfModule> </IfModule> <FilesMatch "\.(css|htc|less|js|js2|js3|js4|CSS|HTC|LESS|JS|JS2|JS3|JS4)$"> FileETag MTime Size <IfModule mod_headers.c> Header unset Set-Cookie </IfModule> </FilesMatch> <FilesMatch "\.(html|htm|rtf|rtx|svg|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|TXT|XSD|XSL|XML)$"> FileETag MTime Size <IfModule mod_headers.c> Header append Vary User-Agent env=!dont-vary </IfModule> </FilesMatch> <FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|webp|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|_ttf|wav|wma|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|WEBP|JSON|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|_TTF|WAV|WMA|WRI|WOFF|WOFF2|XLA|XLS|XLSX|XLT|XLW|ZIP)$"> FileETag MTime Size <IfModule mod_headers.c> Header unset Set-Cookie </IfModule> </FilesMatch> <FilesMatch "\.(bmp|class|doc|docx|eot|exe|ico|webp|json|mdb|mpp|otf|_otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|pot|pps|ppt|pptx|svg|svgz|swf|tif|tiff|ttf|ttc|_ttf|wav|wri|woff|woff2|xla|xls|xlsx|xlt|xlw|BMP|CLASS|DOC|DOCX|EOT|EXE|ICO|WEBP|JSON|MDB|MPP|OTF|_OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|POT|PPS|PPT|PPTX|SVG|SVGZ|SWF|TIF|TIFF|TTF|TTC|_TTF|WAV|WRI|WOFF|WOFF2|XLA|XLS|XLSX|XLT|XLW)$"> <IfModule mod_headers.c> Header unset Last-Modified </IfModule> </FilesMatch> <IfModule mod_headers.c> Header set Referrer-Policy "origin" </IfModule> # Browser Cache ## GZIP ## <IfModule mod_deflate.c> 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 AddOutputFilterByType DEFLATE application/x-httpd-php AddOutputFilterByType DEFLATE application/x-httpd-fastphp AddOutputFilterByType DEFLATE image/svg+xml SetOutputFilter DEFLATE </IfModule> ## END GZIP Compression ## ## BEGIN Vary: Accept-Encoding Header ## <IfModule mod_headers.c> <FilesMatch "\.(js|css|xml|gz)$"> Header append Vary: Accept-Encoding </FilesMatch> </IfModule> ## END Vary: Accept-Encoding Header ## ## (Expires Caching) ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/x-icon "access 1 year" ExpiresByType application/pdf "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresDefault "access 1 month" </IfModule> ## END (Expires Caching) ##
На этом основные конфигурационные настройки для wordpress можно считать завершенными. Мы указали только основные решения для производительности сайтов на данной системе. Которые используются по принципу скопировал — вставил — сохранил. По сути займет около 10-15 минут. Но несколько плагинов вы уже cможете не задействовать. Далее разберем более точную настройку скорости сайта.
Ускоряем сайт без плагинов
Вам может показаться, что раз требуется столько настроек, то лучше отказаться от WordPress. Но это не так, любая CMS требует дополнительной настройки производительности. И если говорить откровенно, то вордпресс — это еще более менее нормальный вариант. Существуют системы, где такая настройка будет большой проблемой для обычного пользователя. Помимо общей производительности, нам необходимо настроить и производительность темы, а точнее вывод исходной кодировки на страницах.
Сжимаем исходный код
Лишние пробелы, перносы строк, комментарии от разработчиков — увеличивают исходный код и соответственно вес отображаемой страницы. Если исходные статичные файлы стилей и скриптов (CSS, JS) можно сжать вручную, и заменить на оптимизированные варианты, то общий отображаемый код — так исправить не получится. Воспользуемся специальной настройкой functions.php используемой темы. Разверните и используйте приведенный ниже код.
- Сжатие исходного кода (functions.php)
class MAX_HTML_Compression { protected $max_compress_css = true; protected $max_compress_js = true; protected $max_info_comment = true; protected $max_remove_comments = true; protected $html; public function __construct($html) { if (!empty($html)) { $this->max_parseHTML($html); } } public function __toString() { return $this->html; } protected function max_bottomComment($raw, $compressed) { $raw = strlen($raw); $compressed = strlen($compressed); $savings = ($raw-$compressed) / $raw * 100; $savings = round($savings, 2); return '<!--HTML сжат с помощью встроенной оптимизации темы от max-site.ru, на '.$savings.'%. Было '.$raw.' bytes, сейчас '.$compressed.' bytes-->'; } protected function max_minifyHTML($html) { $pattern = '/<(?<script>script).*?<\/script\s*>|<(?<style>style).*?<\/style\s*>|<!(?<comment>--).*?-->|<(?<tag>[\/\w.:-]*)(?:".*?"|\'.*?\'|[^\'">]+)*>|(?<text>((<[^!\/\w.:-])?[^<]*)+)|/si'; preg_match_all($pattern, $html, $matches, PREG_SET_ORDER); $overriding = false; $raw_tag = false; $html = ''; foreach ($matches as $token) { $tag = (isset($token['tag'])) ? strtolower($token['tag']) : null; $content = $token[0]; if (is_null($tag)) { if ( !empty($token['script']) ) { $strip = $this->max_compress_js; } else if ( !empty($token['style']) ) { $strip = $this->max_compress_css; } else if ($content == '<!--wp-html-compression no compression-->') { $overriding = !$overriding; continue; } else if ($this->max_remove_comments) { if (!$overriding && $raw_tag != 'textarea') { $content = preg_replace('/<!--(?!\s*(?:\[if [^\]]+]|<!|>))(?:(?!-->).)*-->/s', '', $content); } } } else { if ($tag == 'pre' || $tag == 'textarea') { $raw_tag = $tag; } else if ($tag == '/pre' || $tag == '/textarea') { $raw_tag = false; } else { if ($raw_tag || $overriding) { $strip = false; } else { $strip = true; $content = preg_replace('/(\s+)(\w++(?<!\baction|\balt|\bcontent|\bsrc)="")/', '$1', $content); $content = str_replace(' />', '/>', $content); } } } if ($strip) { $content = $this->max_removeWhiteSpace($content); } $html .= $content; } return $html; } public function max_parseHTML($html) { $this->html = $this->max_minifyHTML($html); if ($this->max_info_comment) { $this->html .= "\n" . $this->max_bottomComment($html, $this->html); } } protected function max_removeWhiteSpace($str) { $str = str_replace("\t", '', $str); $str = str_replace("\r", '', $str); $str = str_replace( "#\s*?\r?\n\s*?(?=\r\n|\n)#s" , "" , $str ); $str = str_replace("// The customizer requires postMessage and CORS (if the site is cross domain).",'',$str); while (stristr($str, ' ')) { $str = str_replace(' ', ' ', $str); } return $str; } } function max_wp_html_compression_finish($html) { return new MAX_HTML_Compression($html); } function max_wp_html_compression_start() { ob_start('max_wp_html_compression_finish'); } add_action('get_header', 'max_wp_html_compression_start');
Скорость сайта и яндекс метрика
Что же касается внешних скриптов и расширений, в том числе и ЯндексМетрика, то универсального решения для улучшения показателей PageSpeed не существует. Снижение итоговых баллов оценки производительности страниц при использовании подключенной аналитики, в болшей степени программная оценка, а не фактическая. Поэтому каких либо действий с кодом ЯндексМетрика или Google Analytics мы не рекомендуем производить, это может сказаться на оценке посещаемости. В качестве тестирования предлагаем ознакомиться с вариантом внедрения отложенной загрузки через общедоступный CDN. Данный код размещается в файле footer.php вашей темы.
- Счетчик метрики для PageSpeed (footer.php)
<script> ( function () { var loadedTLAnalytics = false, timerId; if ( navigator.userAgent.indexOf( 'YandexMetrika' ) > -1 ) { loadTLAnalytics(); } else { window.addEventListener( 'scroll', loadTLAnalytics, {passive: true} ); window.addEventListener( 'touchstart', loadTLAnalytics, {passive: true} ); document.addEventListener( 'mouseenter', loadTLAnalytics, {passive: true} ); document.addEventListener( 'click', loadTLAnalytics, {passive: true} ); document.addEventListener( 'DOMContentLoaded', loadFallback, {passive: true} ); } function loadFallback() { timerId = setTimeout( loadTLAnalytics, 5000 );//время отложенной загрузки, попробуйте варьировать } function loadTLAnalytics( e ) { if ( e && e.type ) { console.log( e.type ); } else { console.log( 'DOMContentLoaded' ); } if ( loadedTLAnalytics ) { return; } setTimeout( function () { var metricaId = Номер счетчика;(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js", "ym"); ym( metricaId, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, triggerEvent:true }); console.log("ym start");}, 100 ); loadedTLAnalytics = true; clearTimeout( timerId ); window.removeEventListener( 'scroll', loadTLAnalytics, {passive: true} ); window.removeEventListener( 'touchstart', loadTLAnalytics, {passive: true} ); document.removeEventListener( 'mouseenter', loadTLAnalytics ); document.removeEventListener( 'click', loadTLAnalytics ); document.removeEventListener( 'DOMContentLoaded', loadFallback ); } } )() </script>
Пассивные прослушиватели событий
Большинство пользователей не понимает почему при оценке производительности снижаются баллы за отсутствие настройки пассивных прослушивателей событий. Дело в том, что данный показатель основан на возможности передачи действий при прокрутке страницы в браузере. Если коротко, то вам необходимо сообщить браузеру, что никаких препятствий для прокрутки не создается. В WordPress это происходит в основном из-за библиотек jquery, используемых по умолчанию. Что же можно сделать? Необходимо или отключать (править) скрипты или внести некоторые правки в файл header.php, находящийся в папке с темой.
//разместить между тегами <head></head>
<script>!function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){var e,t=["scroll","wheel","touchstart","touchmove","touchenter","touchend","touchleave","mouseout","mouseleave","mouseup","mousedown","mousemove","mouseenter","mousewheel","mouseover"];if(function(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t),window.removeEventListener("test",null,t)}catch(e){}return e}()){var n=EventTarget.prototype.addEventListener;e=n,EventTarget.prototype.addEventListener=function(n,o,r){var i,s="object"==typeof r&&null!==r,u=s?r.capture:r;(r=s?function(e){var t=Object.getOwnPropertyDescriptor(e,"passive");return t&&!0!==t.writable&&void 0===t.set?Object.assign({},e):e}(r):{}).passive=void 0!==(i=r.passive)?i:-1!==t.indexOf(n)&&!0,r.capture=void 0!==u&&u,e.call(this,n,o,r)},EventTarget.prototype.addEventListener._original=e}});</script>
После установки указанного кода ошибка, связанная с пассивными прослушивателями, не определяется.
От чего еще может зависить скорость сайта для WordPress?
К сожалению полноценная оптимизация скорости сайта для wordpress не может проводится однократно. Вы должны уделять внимание не только программной части, но и тому контенту который размещаете на сайте. В данном материале, мы не стали останавливаться подробно о форматах для используемых изображений и видео — это объемная тема для будущих статей.
Но сделаем акцент, на так называемых ревизиях сайта. Это контрольные копии размещенных страниц и постов, которые могут существенно увеличить базу данных. Тем самым вызывая излишнюю нагрузку на проект. Вы можете их отключить полностью, но это не совсем удобно для начинающих пользователей, которым важна возможность «отката» и правки версии материала.
Мы рекомендуем периодически очищать от ревизий базу данных из панели управления. К сожалению специальной и быстрой настройки для этого нет, но вы можете использовать специальные плагины, например: WP-Optimize. И применять его только переодически, включая и выключая после очистки базы.
Выводы: Как становится понятно, полноценного универсального решения для увеличения скорости сайта не существует. Каждый проект индивидуален не только техническими особенностями, но и отображаемым функционалом.
Дальнейшая правильная работа проекта зависит не только от применения указанных средств для WordPress, но и полноценного качественного ведения сайта.
Мы предложили лишь базовые варианты решения частых проблем с оптимизацией скорости, а остальное зависит только от тщательности вашего подхода к ведению проекта.
С уважением, команда МаксСайт.