Как ускорить загрузку сайта на WordPress. Google PageSpeed Insights. Ускорение работы сайта на wordpress
Ускорение загрузки работы сайта на WordPress [Решено за 30 минут]
Для Google, Яндекса и других поисковых систем скорость загрузки сайта является важным фактором ранжирования. Рассмотрим ускорение загрузки и работы сайта на CMS WordPress. Результаты работы можно увидеть в конце поста.
Сайт: SeoKrem.com.
Цель: Ускорить загрузку и работу сайта на CMS WordPress плагинами (без правки кода).
Шаг 1. Анализ текущей ситуации со скоростью загрузки.
Ускорение этого блога я делал еще в феврале 2015 года, поэтому скриншота прошлого состояния не сохранилось. По памяти помню, что сервис PageSpeed Insights показывал скорость загрузки 50/55 для мобильных/ПК. Состояние было плачевное и я задумался про ускорение.
Проанализируйте свой сайт на WordPress с помощью сервиса Google PageSpeed Insights и если результат загрузки сайта меньше 85 – читайте дальше.
Шаг 2. Устанавливаем плагины для ускорения.
WP Fastest Cache
Плагин для кэширования сайта, сжатия файлов, минимизации и объединения css, js, очень широкий функционал. Плагин в нужной комплектации бесплатный.
Зайдите в админке сайта на WP в “Плагины” -> “Добавить новый”. Впишите название плагина, нажмите “Поиск”. Первый плагин с изображением животного кошачьего типа – наш плагин. Устанавливаем.
EWWW Image Optimizer
Плагин для оптимизации изображений. Сжимает существующие и загружаемые картинки без потери качества.
Зайдите в админке сайта на WP в “Плагины” -> “Добавить новый”. Впишите название плагина, нажмите “Поиск”. Первый плагин с изображением молотка, который бьет по картинкам – наш плагин. Устанавливаем.
Шаг 3. Настройка ускорения сайта на WordPress
Настроим кеширование и минимизацию css, js файлов. В панели администратора новым пунктом меню у вас появился WP Fastest Cache. Зайдите по ссылке, внизу вы увидите поле language, установите русский язык. Установите галочки во всех пунктах, как на скриншоте ниже. В другие вкладки плагина можете не заходить – там платные функции, за которые вам вряд ли захочется отдавать деньги.
После этого сожмём картинки на сайте. В панели админки WP наведите на медиафайлы, выберите пункт “Оптимизировать”. В выбранном окне воспользуйтесь двумя функциями – оптимизацией картинок из библиотеки и оптимизация других картинок (шаблона, движка и т.д.). Этими действиями вы сжимаете уже существующие изображения на сайте, загружаемые после установки плагина картинки будут сжиматься автоматически при загрузке на сервер.
Всего 2 этих шага существенно ускорит загрузку страниц, что увеличит лояльность поисковых машин и улучшит отношение людей к вашему сайту на WordPress.
Шаг 4. Результаты ускорения сайта.
Результаты шикарные. С 50 сразу стало 81 (опять-таки, по памяти). Почитав рекомендации Гугла нашел множество проблем загрузки, связанной с плагином, который предназначен для красивого вывода программного кода на блоге. После того, как я его снес – это значение поднялось до 91! Вот, что показала Яндекс Метрика – отчет по загрузке страниц:
По скриншоту четко видно, что скорость загрузки страниц снизилась с 1 секунды от 0.1. Отмечу, что улучшились позиции в Google и даже в Яндексе, уменьшилось число отказов (некоторые люди, особенно с мобильным интернетом, не желают долго ждать и покидают сайт, если после перехода на сайт он сразу не начинает загружаться).
Дополнительно
Не используйте оригиналы изображений, если необходимо вывести картинку в маленьком размере.
Это заметно снижает скорость загрузки и отношение Google к сайту. Простой пример – в моем блоге на главной вы увидите над лентой последних постов текст и небольшое фото. Если бы я поставил в атрибут src тега img ссылку на изображение оригинал разрешением ~1000×2000 и вывел картинку 100×100, серверу пришлось бы загружать изображение 1000×2000, браузер сжал бы ее до нужных размеров, которые я прописал в стилях отображения, но реально-то загружался оригинал. Поэтому я не поленился отресайзить её в Photoshop и только после этого использовать в шаблоне. Загружайте изображения ровно в таком разрешении, в котором хотите её отобразить.
Меньше графики – быстрее сайт.
Графика занимает в с
seokrem.com
Как быстро ускорить работу сайта на движке вордпресс?
Ускорить работу сайта достаточно просто, даже не прибегая к редактированию кода. Особенно это легко сделать, если ресурс молодой (опубликовано 100-200 статей). Что для этого нужно?
Перед тем, как что-то делать, нужно понимать, что у каждого графического образа и у каждой анимационной картинки есть свой вес. Конечно, вес есть даже у кода из которого состоит сайт, но он минимальный, поэтому почти не тормозит систему. А вот графика и другие навороты существенно дают нагрузку на сервер. Как следствие начинает тормозить сайт, а не редко, даже перегружает сервер на столько, что сайт бывает недоступен какое-то время. Поэтому, для того, чтобы быстро ускорить работу сайта, нужно просто установить легкий шаблон. После установки легкого шаблона, сайт будет работать в разы быстрее (возможно даже в 10 раз).
Как еще ускорить работу сайта?
Так же для ускорения сайта можно прибегнуть к редактированию кода. Первое, что нужно сделать — это оптимизировать свою тему (шаблон). Дело в том, что по умолчанию идет много не нужных запросов в базу данных (на сервер), которые необходимо закрыть или удалить. Немного скорости придаст отключение автоматического сохранения в админ-панели сайта, а так же отключение функции корзины. Короче говоря, в движке вордпресс очень много функций, которые можно отключить (в целях повышения производительности сайта) и при этом нормально работать. Главная задача состоит в том, чтобы оставить нужные функции и отключить не нужные (зависит от личного вкуса и версии движка). Советую вам почитать про плагины ускоряющие загрузку вордпресс, они принесут пользу.
Легче всего ускорить работу молодого сайта, так как для этого вполне достаточно поставить оптимальный шаблон. А что касается более зрелых ресурсов, то в них нужно оптимизировать код. Идеальным вариантом будет выбор простого шаблона и постепенная модернизация.
wordpresspro.ru
Как увеличить скорость загрузки сайта на Wordpress.
Приветствую! В моей статье о показателе отказов на сайте были рассмотрены причины, по которым посетители могут покинуть ваш блог. Одна из главных – это низкая скорость загрузки страниц ресурса. Сегодня мы детально разберем различные способы того, как предотвратить эту проблему и увеличить скорость загрузки сайта на WordPress. Также узнаем, как сервис Google PageSpeed Insights может помочь оптимизировать работу вашего блога.
Приглашаю своих читателей отправиться в йога-поход, который буду вести я на Кавказе. Мужчинам приятный бонус! Подробнее по ссылке.
Содержание:
Методы ускорения работы блога
Редактируем файл .htaccess
Находим в корне сайта файл .htaccess и открываем для редактирования. Здесь мы добавим команды, которые снизят нагрузку на сервер и ускорят загрузку в WordPress.
Рекомендуется указать кэширование для отдельных объектов вашего ресурса. Для этого вставляем следующий код в конце файла, но перед «# ENDWordepress»:
| 1 2 3 4 | # сжатие text, html, javascript, css, xml: <ifModulemod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript </ifModule> |
# сжатие text, html, javascript, css, xml: <ifModulemod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript </ifModule>
Затем добавляем еще:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | # кеш браузера <ifModulemod_expires.c> ExpiresActiveOn #по умолчанию кеш в 5 секунд ExpiresDefault "accessplus 5 seconds" # Включаем кэширование изображений и флэш на месяц ExpiresByType image/x-icon "access plus 1 month" ExpiresByType image/jpeg "access plus 4 weeks" ExpiresByType image/png "access plus 30 days" ExpiresByType image/gif "access plus 43829 minutes" ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds" # Включаем кэширование css, javascript и текстовых файлов на одну неделю ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 604800 seconds" ExpiresByType application/javascript "access plus 604800 seconds" ExpiresByType application/x-javascript "access plus 604800 seconds" # Включаем кэширование html и htm файлов на один день ExpiresByType text/html "access plus 43200 seconds" # Включаем кэширование xml файлов на десять минут ExpiresByType application/xhtml+xml "access plus 600 seconds" </ifModule> |
# кеш браузера <ifModulemod_expires.c> ExpiresActiveOn #по умолчанию кеш в 5 секунд ExpiresDefault "accessplus 5 seconds" # Включаем кэширование изображений и флэш на месяц ExpiresByType image/x-icon "access plus 1 month" ExpiresByType image/jpeg "access plus 4 weeks" ExpiresByType image/png "access plus 30 days" ExpiresByType image/gif "access plus 43829 minutes" ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds" # Включаем кэширование css, javascript и текстовых файлов на одну неделю ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 604800 seconds" ExpiresByType application/javascript "access plus 604800 seconds" ExpiresByType application/x-javascript "access plus 604800 seconds" # Включаем кэширование html и htm файлов на один день ExpiresByType text/html "access plus 43200 seconds" # Включаем кэширование xml файлов на десять минут ExpiresByType application/xhtml+xml "access plus 600 seconds" </ifModule>
Теперь кэширование указанных в коде объектов (изображений, css, javascriptфайлов) будет происходить на стороне браузера, и ему не придется загружать их всякий раз, когда к ним обращается пользователь.
Включим gzip сжатие файлов. Это специальный сжатый вид HTML-страниц для браузеров.Таким способом сервер каждый раз архивирует соответствующие текстовые файлы, передает их на ваш компьютер, а браузер при получении автоматически их распаковывает. Gzip работает только с текстом. Для включения сжатия поместим необходимый код в файл .htaccess:
| 1 2 3 4 5 6 7 8 9 | <ifModulemod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_excluderspheader ^Content-Encoding:.*gzip.* </ifModule> |
<ifModulemod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_excluderspheader ^Content-Encoding:.*gzip.* </ifModule>
После этого количество траффика, передаваемого браузеру, значительно уменьшится.
Дополнительно вы можете запретить загрузку изображений с вашего сайта на других ресурсах. Такое случается, когда вместе с информацией с вашего блога копируются и картинки, без изменения их адреса. И когда на сторонних сайтах загружаются картинки, находящиеся на вашем хостинге, на него увеличивается нагрузка. Чтобы предотвратить эту проблему, вставим следующий код:
| 1 2 3 4 5 6 7 8 9 10 | RewriteEngine On RewriteCond %{HTTP_REFERER} !^http://(.+.)?yandex.ru/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?undsoft.com/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?yandex.net/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?feedburner.com/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?mail.ru/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?poisk.ru/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?ИМЯВАШЕГОСАЙТА.ru/.*$ [NC] RewriteCond %{HTTP_REFERER} !^$ [NC] RewriteRule .*.(jpe?g|gif|bmp|png)$ - [F] |
RewriteEngine On RewriteCond %{HTTP_REFERER} !^http://(.+.)?yandex.ru/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?undsoft.com/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?yandex.net/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?feedburner.com/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?mail.ru/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?poisk.ru/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?ИМЯВАШЕГОСАЙТА.ru/.*$ [NC] RewriteCond %{HTTP_REFERER} !^$ [NC] RewriteRule .*.(jpe?g|gif|bmp|png)$ - [F]
Обратите внимание: вместо фразы «ИМЯ ВАШЕГО САЙТА», следует указать название вашего домена.
Используем плагины кэширования
Следующий эффективный способ ускорить WordPress блог – воспользоваться плагином кэширования. После того, как посетитель заходит на сайт, CMS формирует из отдельных частей PHP-кода, на котором он написан, целостную HTML-страницу и передает её браузеру пользователя. Кэширование позволяет избежать необходимости при каждом запросе снова проделывать эту работу и тем самым снижает нагрузку на сервер. После активации плагина сгенерированная копия страницы будет оставаться на хостинге ресурса в специальной папке. И при следующем обращении к этой странице, будет загружаться сохраненная копия.
Одним из наиболее удобных плагинов кэширования, который поможет значительно ускорить загрузку сайта на WordPress, является HyperCache. Его установка и настройка детально рассмотрены в моей статье о кэшировании страниц.
Оптимизируем базу данных
Большое влияние на работу сайта оказывает и база данных. При каждом редактировании постов, WordPress создает ревизии записей, которые сохраняются. Помимо этого, в базе данных накапливаются спам, комментарии и содержимое корзины. Со временем объем мусорных данных растет и тормозит загрузку страниц. Чтобы очистить базу данных и ускорить WordPress-блог, воспользуйтесь специальным плагином. Для этой цели отлично подойдет WP— Optimize, работа с которым описана в материале об оптимизации базы данных.
Сжимаем изображения
Убедитесь, что вы используете в своем блоге файлы изображений с оптимальным сочетанием «размер – качество». Для его достижения можно воспользоваться опцией Photoshop – «SaveForWeb» («Сохранить для Web»).
Файлы .png имеют большой вес и замедляют загрузку. Используйте этот формат только для небольшой графики и картинок с прозрачным фоном. В остальных случаях больше подойдет расширение .jpg.
Если вы хотите автоматизировать процесс обработки изображений на вашем сайте, Вордпресс предоставляет возможность выбрать один из соответствующих плагинов. Среди самых популярных – WP— Smush.
После активации данного плагина, все картинки, загружаемые на ресурс, будут сжиматься автоматически.
Для сжатия уже имеющихся картинок воспользуемся возможностью пакетной обработки. Для этого перейдем в «Медиафайлы»- «WPSmush». На открывшейся странице сразу после блока настроек («Settings») следует блок «Smushinbulk». Нажав кнопку «BulkSmushNow», мы запускаем процесс сжатия всех изображений. Также можно воспользоваться ссылкой на «Библиотеку файлов», если мы хотим оптимизировать отдельные изображения.
Оптимизируем код
Следующий способ ускорить сайт на WordPress– сжать HTML и скрипты. Воспользуемся плагином Autoptimize.
Плагин объединяет все файлы css-стилей и js-скриптов в один файл – с расширением .cssили .js соответственно. Сохраняет их на сервере и размещает ссылки на них в HTML-документе. А сам HTML-код очищает от лишних пробелов и переносов строк. На странице настроек Autoptimize мы просто отмечаем галочками нужные нам параметры для оптимизации.
Создаём мобильную версию сайта
Наличие мобильной версии, отличающейся от десктопного варианта, необходимо. Скорость загрузки мобильных устройств ниже. Поэтому мобильный шаблон должен быть адаптирован таким образом, чтобы содержать только самый необходимый контент. Создание качественной адаптивной версии значительно ускорит работу вашего WordPress-блога на мобильных телефонах и планшетах. В одной из моих статей подробно рассказано, как создать мобильную версию блога, о её особенностях и плагинах для адаптации сайта.
Дополнительные рекомендации по ускорению работы сайта:
- Деактивируйте и удалите плагины, которыми вы не пользуетесь. Сведите их количество к 10-15. Подберите только самые необходимы плагины для Вордпресс.
- Старайтесь использовать как можно меньше внешних скриптов и виджетов социальных сетей на вашем блоге.
- Размещайте по возможности все скрипты перед закрывающим тегом </body>. Таким образом они буду загружаться после основного контента, что ускорит ваш сайт на WordPress.
- Выберите качественный хостинг. От его технических характеристик зависит скорость и качество работы вашего ресурса.
Как работать с сервисом Google PageSpeed Insights
Page SpeedInsights – специальный инструмент от Google, анализирующий скорость загрузки страниц на десктопных и мобильных устройствах. Чтобы приступить к работе, перейдем по ссылке — https://developers.google.com/speed/pagespeed/insights/ и введем URL веб-страницы. Нажмем «Анализировать».
В течении нескольких секунд будет сформирован результат. Он состоит из оценки скорости по 100-бальной шкале, причин медленной работы и рекомендаций от Google. В них будет указано, какими методами стоит воспользоваться, чтобы ускорить загрузку сайта на WordPress.
На этом все. Сегодня мы рассмотрели основные причины медленной работы блога и методы их устранения по версии GooglePageSpeedInsights. Если вы воспользуетесь перечисленными способами оптимизации, это существенно ускорит загрузку вашего сайта на WordPress.
pro-wordpress.ru
