WordPress: Плагины для ускорения загрузки страниц, поисковая оптимизация

Оптимизация загрузки страниц под поисковые системы

Как вы знаете на данный момент поисковые системы начали уделять большое внимание скорости загрузки сайтов так как все повсеместно используют коммуникаторы , телефоны , планшеты , смартфоны , и на них тяжелые блоги да и вообще сайты как вы сами знаете грузятся очень медленно , так как в основном переполнены разнообразными скриптами тяжелым контентом и прочими приблудами , хорошо если у вас есть арендованный vps , или же собственный домашний выделенный веб сервер  — там вы можете на 1000% процентов раскачать свой сайт — но а вот на виртуальном хостинге все гораздо сложнее — берем что дают , и на этом делаем  но и из говна как вы слышали можно сделать конфетку . Оптимизация wordpress , это не только ускорение загрузки страниц вашего сайта но еще и seo оптимизация это важно знать , при правильной внутренней оптимизации контента , и внешней оптимизацией сайта ( накоплением ссылочной массы ) увеличением ТИЦ и PR вы обязательно попадете в TOP google и yandex. Сейчас же мы в пару кликов с помощью плагинов увидим как работает оптимизация движка на wordpress и то как ускорить работу wordpress. Первое что нам нужно провести проверку  здесь  https://developers.google.com/speed/pagespeed/insights/ — запомнили свои результаты , посмотрели как оценил google speed скорость загрузки страниц,  приступаем к оптимизации  wordpress VPS-WordPress-Site-Speed

 Ускоряем сайт на wordpress с помощью плагинов

1) WP-Optimizeоптимизирует вашу базу данных , удаляет все черновики из базы данных и прочую ересь уменьшая тем самым размер базы данных в несколько раз соответственно бд сайта работает немного быстрее ,  та же рекомендую на хостинге зайти в меню управления базами данных, и там удалить все ненужные таблицы от установленных ранее плагинов  которые  ранее были удалены, и больше не используются — это так же ускорит бд вашего сайта. Но это все несущественно, если на ваш блог идет трафик из небольшого количества посетителей то это особо на производительность не повлияет ( нужно для высоко нагруженных проектов или для очень- очень ограниченного в ресурсах бесплатного хостинга) , но все же на будущее советую это сделать , в каких то особых настройках не нуждается все просто ясно и понятно.

  Оптимизация сайта под Яндекс – Yandex оптимизация

2) WP-HTML-Compression — по названию плагина я думаю вы догадались какую функцию он выполняет , если нет то подскажу что сжимает странички вашего сайта и ускоряет загрузку страниц. Настройки у плагина отсутствуют , если вы будете ставить плагин  Autoptimize то его плагин можно не устанавливать , так как данная функция уже присутствует в автооптимизаторе

3) WP Resized Image Quality —  Изменение уровня сжатия загружаемых изображений и эскизов . — скудные настройки пара строчек все ясно и просто — этот плагин так же важен для ускорения сайта , рекомендую его установить вместе с плагином Regenerate Thumbnails . Установите сжатие картинок в WP Resized Image Quality  на 70% и запустите Regenerate Thumbnails ваши «превьюшки» скинут в весе и доблестные google и яндекс будут этому очень рады, да и посетители тоже ибо скинутые пару мегабайт со страницы помогут быстрее ей открыться в браузере посетителя.

4) Hyper Cache v2.9.1.6 (более новые версии не рекомендую) — плагин кэширования для вашего сайта ,  оптимизации WP блога и снижения его нагрузки на сервер хостинга — этот плагин важен для сайта , я перепробовал множество плагинов и остановился на этом отказался от WP SUPER CACHE  и WP TOTAL CACHE  на трех под-доменах  я поставил три этих плагина и победителем вышел Hyper Cache смотрел в панели google webmaster статистику индексирования сайта ботом google c 800 ms доступ к сайту снизился до 200-300 ms у остальных от 400-800 вроде настроено все было хорошо Hyper Cache использовать лучше в связке с  Autoptimize  два этих плагина ускоряют загрузку страниц и снижают нагрузку на сервер хостинга и потребление выделенной вам памяти. Скриншоты с настройками Hyper Cache — делаем так же как показано на скринах 2014-02-05_193235 2014-02-05_193213

  Уникальный текст статьи для блога , как его сделать уникальным?
кэширование wp
настройки

5) CW Image Optimizer — плагин  оптимизации изображений для wp , уменьшает вес файла изображения не изменяя его размера тоесть пропорции остаются такими какие были до оптимизации просто из файлов удаляется вся ненужная информация , качество изображений  при оптимизации этим плагином не изменяется но вес странички порой уменьшается на пару мегабайт все зависит от того сколько изображений находится на странице , есть один нюанс не все хостинговые провайдеры поддерживают  littleutils  который нужен для работы данного плагина , но если у вас арендованный VPS или KVM VPS  или же свой домашний сервер на ubuntu или debian то вы смело можете поставить данный модуль и воспользоватся этим плагином

6) Autoptimize — оптимизирует и сжимает ваши css и js файлы что существенно влияет на скорость загрузки сайта , так же данный объединяет файлы css в один , и опускает js файлы в footer чтобы те исполнялись после загрузки страницы , там есть еще настройка cdn но она вам не нужна так как ваши основные посетители это русскоязычное население и круг посетителей ограничен определенным количеством стран , хотя если вы настроены завоевать англоязычную часть населения то можете настроить эту опцию (в некоторых случаях полезно для распаралеливания загрузки элементов с разных хостингов) . Autoptimize рекомендовано к установке на ваш блог Настройки autoptimize , делаем так же как показано на скринах one 2

  Как сделать свой сайт быстрее?
авто-оптимизация wordpress
настройки

 

.htaccess Настройка кэша , сжатия в wordpress

7) Добавляем в файл .htaccess который находится в  корне вашего сайта  директивы указаны ниже , будьте внимательны директивы предоставлены для трех видов веб серверов то бишь  APACHE2 и NGINX  или же или же связки APACHE+NGINX  :

#Включаем mod_deflate для gzip  сжатия файлов на серверах apache2
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
<filesmatch ".(ttf|otf|eot|svg)$" >
    SetOutputFilter DEFLATE
</IfModule>

 
#Включаем gzip на серверах nginx или nginx+apache
<IfModule mod_gzip.c>
# Устанавливаем заголовок Vary: Accept-Encoding на nginx
gzip_vary on 
mod_gzip_on Yes
mod_gzip_item_include file .js$
mod_gzip_item_include file .css$
mod_gzip_item_include file .html$
mod_gzip_item_include file .txt$
</IfModule>
 
 
# Устанавливаем заголовок Vary: Accept-Encoding на apache2
<IfModule mod_headers.c>
<filesmatch ".(js|css|xml|gz|html)$">
   Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>
 
# используем mod_expires
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A86400 
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/css A2592000
ExpiresByType image/gif A604800
ExpiresByType image/png A604800
ExpiresByType image/jpeg A604800
ExpiresByType text/plain A604800
ExpiresByType application/x-shockwave-flash A604800
ExpiresByType video/x-flv A604800
ExpiresByType application/pdf A604800
ExpiresByType text/html A900
</IfModule>

И еще url и ресурсы в которых присутствует знак ? не кэшируются, а в wordpress добавляются версии для css и js файлов автоматически pack.js?ver=1.3.4 выглядит это так, page speed рекомендует это исправить, и исправляется это добавлением функции в файл functions.php — в конец файла

function _remove_script_version( $src ){
$parts = explode( '?', $src );
return $parts[0];
}

//Убирает версию файла для js
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
//Убирает версию файла для css
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

 

Wordpress: Плагины для ускорения загрузки страниц, поисковая оптимизация

Wordpress: Плагины для ускорения загрузки страниц, поисковая оптимизация

Теперь можно повторно протестировать ваш сайт  и сравнить результаты — чем выше цифры  тем лучше . Еще хочу добавить что лучше использовать качественные темы для wp без всякого мусора , если вы разбираетесь то вам не составит труда убрать ненужное из вашего оформления тем самым еще немного ускорив ваш блог или сайт.

76 Комментария (ев)

  1. Здравствуйте! Поставила плагины WP Resized Image Quality и Regenerate Thumbnails, выставила 70%, затем запустила процесс сжатия картинок на другим плагине. По завершению скорость не изменилась вообще! Хотя плагин говорит, что все мои картинки (более 4 тыс) были пересозданы.
    Подскажите, в чем может быть дело?

    И еще вопрос, может вы платно оказываете услугу по разгону сайта на вп?
    Заранее спасибо за ответ!

    • Ну тут дело не в скорости а в весе страницы, если интернет канал у провайдера хороший, и на сайте мало посетителей то изменений вы конечно не заметите, если наплыв посетителей огромен, то сокращение размера превьюшек сэкономит вам траик, нагрузка на интернет канал будет меньше, и соответственно грузится будет быстрее если бы вы не оптимизировали.
      Оптимизация изображений идет в комплексе с другими манипуляциями ведущими к уменьшению отклика и ускорению генерации страничек.
      Тут нужно смотреть сколько у вас рекламных блоков, возможность подгрузки различных библиотек типа jquery, bootstrap с cnd , а так же шрифтов типа Fontawesome.
      Отложенная или асинхронная загрузка скриптов
      Уменьшение размера css, js. Если это все оптимизировать то в совокупности вы получите отличный результат. Посмотрите как оптимизирован этот сайт….

      • Благодарю за подробный ответ. Сама не справилась с задачей все же, заказала на кворке работу по ускорению сайта, этот человек тоже не справился :) Указал на возможность того, что проблема в базе данных, что картинки погружаются все равно в неуменьшенном виде.
        Вы не ответили, но все же уточню еще раз, вы платно можете помочь с сайтом?

  2. Облачные сервизы очень дорогие для обычных блогеров.

    Сперва нужно ускорить сам сайт,снизив нагрузку и удалить все то лишнее которые грузит сайт и не имеет право жить

    Вот мой вердикт,ускоряйте внутри а потом уже проверите и можете ускорить из вне через облако!

    • при загрузке кода :

      function my_scripts_method() {
      // получаем версию jQuery
      wp_enqueue_script( ‘jquery’ );
      $wp_jquery_ver = $GLOBALS[‘wp_scripts’]->registered[‘jquery’]->ver; // для версий WP меньше 3.6 ‘jquery’ меняем на ‘jquery-core’
      $jquery_ver = $wp_jquery_ver == » ? ‘1.11.0’ : $wp_jquery_ver;

      wp_deregister_script( ‘jquery-core’ );
      wp_register_script( ‘jquery-core’, ‘//ajax.googleapis.com/ajax/libs/jquery/’. $jquery_ver .’/jquery.min.js’ );
      wp_enqueue_script( ‘jquery’ );
      }
      add_action( ‘wp_enqueue_scripts’, ‘my_scripts_method’, 99 );

      Перестаёт работать возможность добавить фото, в сварить новость, как это исправить,,??

          • у меня так подключен и все работает… и плагин этот работает ) просто возможно причина в другом плагине нужно искать…. а найти можно только посетив админку и все проверив…. А вот поиск при подключении плагина перестает работать, конфликтует одно из дополнений плагина…

  3. Я делаю всё как сказали пока не очень получается, http://www.fotovarka.ru/ посмотрите пожалуйста, что сейчас не так и в мобильной версии в том числе? спасибо большое

    • И при добавлении кода function my_scripts_method() {
      // получаем версию jQuery
      wp_enqueue_script( ‘jquery’ );
      $wp_jquery_ver = $GLOBALS[‘wp_scripts’]->registered[‘jquery’]->ver; // для версий WP меньше 3.6 ‘jquery’ меняем на ‘jquery-core’
      $jquery_ver = $wp_jquery_ver == » ? ‘1.11.0’ : $wp_jquery_ver;

      wp_deregister_script( ‘jquery-core’ );
      wp_register_script( ‘jquery-core’, ‘//ajax.googleapis.com/ajax/libs/jquery/’. $jquery_ver .’/jquery.min.js’ );
      wp_enqueue_script( ‘jquery’ );
      }
      add_action( ‘wp_enqueue_scripts’, ‘my_scripts_method’, 99 );

      Перестаёт поиск по сайту работать в чём дело??

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

  4. Мне кажется то, что подошло автору статьи в такой комбинации вряд ли подойдет остальным пользователям (именно как в комплексе). Сделал все, что описано. В итоге мобильная версия сайта опустилась до 45 баллов (было 57), компьютерная до 40 (было 44)
    Взял лишь отдельные элементы типа плагинов autoopimize WP-Optimize, рейтинг 63 мобильная и 45 компьютерная

    • а можно сайт глянуть, просто не нужно бездумно копипастить настройки, с ними нужно немного поэксперементировать, вот допустим с помощью autoptimize я сейчас перестал сжимать css и js, так как у меня увеличился отклик. Я не только для этого но других сайтов с другими темами делал оптимизацию, в основе моей оптимизации лежит, меньше запросов с сайта, быстрее сайт, если где можно вывести виджеты без картинок, то они без них и. т. д. убрать лишние скрипты и стили используя cdn библиотеки google, yandex, jsdelivr///

  5. И у меня проблема, гугл рекоммендует сжать изображения я разные плагины включал, что то он так и просит((( что сделать??

    • Рекомендую использовать либо гугл аналитику, либо яндекс аналитику. 4 штуки это трэш, нахрена вообще нужны рамблер топ, ливинтернет, это ведь куча ненужных запросов с сайта — замедляющих его. O_o зачем целых 4 аналитики на сайт вешать, если достаточно одной, у вас интернет магазин, или может посетителей 50 тыс в сутки?, по мне у гугловской отклик лучше, оставьте ее одну.

      Дальше продолжаем избавляться от ненужного — отключаем шрифты google с помощью плагина Remove Google Fonts References, отдаем jquery c cdn google а не со своего сайта вставив этот код в файл functions.php

      function my_scripts_method() {
      	// получаем версию jQuery
      	wp_enqueue_script( 'jquery' );
      	$wp_jquery_ver = $GLOBALS['wp_scripts']->registered['jquery']->ver; // для версий WP меньше 3.6 'jquery' меняем на 'jquery-core'
      	$jquery_ver = $wp_jquery_ver == '' ? '1.11.0' : $wp_jquery_ver;
      
      	wp_deregister_script( 'jquery-core' );
      	wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/'. $jquery_ver .'/jquery.min.js' );
      	wp_enqueue_script( 'jquery' );
      }
      add_action( 'wp_enqueue_scripts', 'my_scripts_method', 99 );

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

      Для оптимизации изображений и уменьшения размера превьюшек вставляем код в functions.php

      add_filter( 'jpeg_quality', create_function('', 'return 50;' ) );

      Далее запускаем Regenerate Thumbnails

      Удаляем ненужный встроенный embed — лишний запрос

      function disable_embeds_init() {
      
          // Remove the REST API endpoint.
          remove_action('rest_api_init', 'wp_oembed_register_route');
      
          // Turn off oEmbed auto discovery.
          // Don't filter oEmbed results.
          remove_filter('oembed_dataparse', 'wp_filter_oembed_result', 10);
      
          // Remove oEmbed discovery links.
          remove_action('wp_head', 'wp_oembed_add_discovery_links');
      
          // Remove oEmbed-specific JavaScript from the front-end and back-end.
          remove_action('wp_head', 'wp_oembed_add_host_js');
      }

      удаляем wp-emoji-release.min.js c с помощью плагина Disable WP Emojis

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

      function _remove_script_version( $src ){
      $parts = explode( '?', $src );
      return $parts[0];
      }
      
      //Убирает версию файла для js
      add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
      //Убирает версию файла для css
      add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

      Ускорит раза в полтора а может и в 2.

        • Можно через встроенный редактор, найти файл functions.php и добавить в конец файла новые фунции

          • а как удалить старые картинки после пересоздания?? в какой они папке ??? спасибо.

          • Новые не создаются , плагин просто подгоняет миниатюры под новые значения темы без создания новых файлов.

  6. Ну что я могу сказать, сайт медленно грузится, рекомендую сменить тему на другую эта дает очень много запросов в итоге сайт грузится медленно, да и много лишних плагинов….

    • В настройках этого плагина есть функция предназначенная для исключения оптимизации определенных скриптов найдите тот который отвечает за слайдер , А ТАКЖЕ ДОБАВЬТЕ в эту строчку jquery.js все должно заработать в стандартном режиме

  7. у меня после установки плагина Autoptimize перестала работать мобильная версия сайта. плагин кеширования стоит w3TC. в чем можетбыть дело?

  8. Ребят подскажите, а как быть с такими вещами как яндекс директ. адсенс или бодиклик на сайте. hyper cache скеширует страницу вместе с рекламой? или рекламу он не трогает? Это действительно важный момент как мне кажется. И если это так, то как сделать так чтобы кеш был только для статики. а динамические блоки выводились как и прежде.

  9. Пока что из всех сайтов, что я видела, у вас на PageSpeed самые лучшие результаты =))) Вот с hyper cache особого результата не увидела, поставила w3 total + automize
    Что gtmetrix, что pagespeed все время что-то не нравится(
    добавила статью в закладки, буду ееще думать

    • Я в низу писал в коммеетах что hyper cache лучше использовать версию 2.х.х последние версии. По своему хороши (v 3.1.2 ) но скорость загрузки больше на 500 — 800 мс все зависит от темы.

  10. Отличная статья!
    После вставки

    function _remove_script_version( $src ){
    $parts = explode( '?', $src );
    return $parts[0];
    }
     
    //Убирает версию файла для js
    add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
    //Убирает версию файла для css
    add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

    при обновлении странички сайта — появляется белый экран

    как быть в этой ситуации?

    • Просто ставьте перед
      ?> этими знаками в конце

      допустим так :

      function _remove_script_version( $src ){
      $parts = explode( '?', $src );
      return $parts[0];
      }
       
      //Убирает версию файла для js
      add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
      //Убирает версию файла для css
      add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

      ?>

      это означает конец )))) И еще не рекомендую ставить новые версии 3.X.X Hyper Cache после новых обновлений плагина скорость после кэширования снизилась почти на секунду и(((

    • Кучу тем перепробывал такого никогда не было если честно :) . У меня два предположения либо код вставлен не туда куда нужно либо , при копировании кода и вставке или при сохранении удалиляются какие либо символы

  11. Получилось довести до 95% для компа. Не пойму, как включить кэш браузера :)
    А с телефонами вот такая проблема — http://prntscr.com/4cdlsa
    По их рекомендации вставил код в header для адаптации размера контента, но он не работает, как я понимаю…
    Если будет свободная минутка, гляньте, пожалуйста, а ? :)

    • Кэш браузера включен, а все что не кэшируется браузером и плагином это файлы с других ресурсов таких как gavatar > yandex > openstat.net ( кстати версия плагина Hyper Cache 3.XX плохо кэширует заметил это после недавнего обновления плагина)
      а так ваш блог достаточно быстр особо не нужно напрягаться и переусердствовать
      вот посмотрите скрин и увидите с каких ресурсов не кэшируется :

      • Спасибо за ответ, Сергей!
        Почитал про CLOUDFLARE, довольно спорная тема пока, воздержусь от переписывания DNS :)
        От Hyper Cache наверное стоит подождать нормального обновления, может исправят ситуацию.
        Еще раз спасибо за пост и отзывчивость, соглашусь с вами, что для работы вполне хватит и такой скорости. Тем более через пару дней уберу интеграцию Nolix и скорость загрузки еще увеличится, проверял уже…
        Кстати, у меня стоит плагин запрещающий обновление плагинов. Обратил внимание на Hyper Cache. Он у меня версии 2.9.1.4. Может не стоит обновлять раз вы говорите, что выше 3 версии хуже работает?

        • Да я думаю пока что не стоит , а вот CLOUDFLARE у меня довольно таки успешно работает , да и сайт на уровне dns не плохо защищает, кАк и кэширует.

        • cloudglsre — это что? :)
          И еще вопрос — я поставил себе кнопки от share42, как у вас. Но, если сужать браузер в оконном режиме, то кнопки наползают на страницу.
          У вас такого не происходит. Как вы их зафиксировали, если не секрет?

        • Сергей, а вы не хотите сделать пост по настройке CLOUDFLARE? :)
          Я правильно понимаю, что нужно пройти все пункты регистрации, но на своем хостинге не стоит ничего не изменять, ни добавлять?
          просто прочитал, что куда-то там нужно добавить два домена, которые они дают перед завершением регистрации…

        • на хостинге только dns прописать нужно ихние, убрав свои старые, если поддомен будет нужен то у них же можно его в dns мастере создать, настроек немного

    • вообще желательно использовать мобильную тему, или приложение, так же есть адаптивные темы…
      И да еще рекомендую CLOUDFLARE WORDPRESS PLUGIN с помощью него на других сайтах удалось еще больше повысить скорость отдачи контента *(-200-300 мс) подробнее об этом сервисе прочитать можно на хабре: http://habrahabr.ru/post/125823/

  12. Здравствуйте.
    Спасибо большое за статью! Но вроде бы все сделал, как рекомендуете, а результат только такой — http://prntscr.com/4ccdvz
    Для телефонов еще хуже…
    Если нетрудно, то подскажите, как профессионал, что еще сделать? Сайт — sergmedvedev.ru

    • Я бы еще посоветовал добавить в funcions.php пару этих строчек
      function _remove_script_version( $src ){
      $parts = explode( ‘?’, $src );
      return $parts[0];
      }

      //Убирает версию файла для js
      add_filter( ‘script_loader_src’, ‘_remove_script_version’, 15, 1 );
      //Убирает версию файла для css
      add_filter( ‘style_loader_src’, ‘_remove_script_version’, 15, 1 );

      Убирает знаки вопроса в ссылках скриптов и стилей — а как известно url которые имеют знак вопроса не кэшируются…

  13. После установки Autoptimize исчезли кнопки соцсетей (такие же стоят как у вас), как картинки кнопок поставить в исключения?

    • Просто кнопки ваши используют jQuery а мои нет , там где вы брали эти кнопочки есть пунктик «К вашему сайту подключен jQuery:» так вот нвпротив него ставить галочкц не нужно , соберите там кнопочки по новому , без этого пунктика и поставьте обратно на сайт и все будет как и прежде :)

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here