Главная » Рекомендации Вебмастеру » Оптимизация и ускорение wordpress вручную

Оптимизация и ускорение wordpress вручную

934 просмотров

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

Быстрая загрузка это сколько?

  • до 3 секунд – очень хорошо;
  • 3-7 секунд – хорошо;
  • 7-10 секунд – плохо;
  • 11 секунд и более – ужасно.

Вот несколько инструментов, которые помогут замерить скорость и понять, что необходимо улучшить на своем сайте.

Сервисы google для измерения скорости и адаптивности
https://developers.google.com/speed/pagespeed
https://testmysite.thinkwithgoogle.com/

Сервис детально показывает загрузку страницы по файлам
https://www.webpagetest.org

Почему важно ускорить работу сайта?

  • 60% посетителей покидают страницу, которая грузится более 3-х секунд.
  • 75% онлайн-покупателей предпочитают уйти на сайт конкурента, если сайт тормозит.

Основные способы оптимизации сайта - 7 шагов

1. Включить кеширование

Для этого необходимо в файле .htaccess дописать следующие строки.

# кеширование в браузере на стороне пользователя

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/x-icon "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 year"

# Cache-Control

# 30 дней
<filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=2592000, public"

# 30 дней
<filesMatch "\.(css|js)$">
Header set Cache-Control "max-age=2592000, public"

# 2 дня
<filesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"

# 1 день
<filesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=172800, private, must-revalidate"

# использование кеша браузеров
FileETag MTime Size

<filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 year"

#Запрет отдачи HTTP-заголовков Vary браузерам семейства MSIE

BrowserMatch "MSIE" force-no-vary
BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary

Параметр 1 year это время кеширование файлов. Можно изменять в зависимости от цели (1 year, 1 month, 1 week ...)

2. Убрать блокирующие файлы css и js

Убираем по возможности css и js подключенные файлы из header.php и подключаем
файлы в шаблоне footer.php до тега </body>

Пример файла footer.php

<footer>
...
</footer>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri() ?&gt;/js/wow.min.js" async=""></script>
<script src="<?php ?php echo get_template_directory_uri() ?&gt;/js/bootstrap.js" async=""></script>

</body>

</html>

3. Асинхронная загрузка скриптов

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

Пример:

<script async src="<?php echo get_template_directory_uri() ?>/js/bootstrap.js"> /* contents of a small JavaScript file */</script>

4. Оптимизация картинок

Онлайн сервис, который делает сжатие картинок без потери качества. http://optimizilla.com/ru/
Публикуйте фотографии в формате JPEG, это пока самый экономичный формат для изображения

5. Используйте стандартные шрифты.

Подключенные шрифты расходуют драгоценное время и может уходить до секунды загрузки.

6. Включить gzip сжатие

Добавляем в файл .htaccess следующие строки

# сжатие text, html, javascript, css, xml:

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript

7. Используйте спрайты для иконок

Объединяйте небольшие фотографии и иконки в одно изображение. С этой задачей вам помогут справиться онлайн сервичы по созданию спрайтов https://ru.inettools.net/app/image/index/37 .Спрайты помогут сократить число запросов к серверу.

После оптимизации

Подправив основные моменты скорости сайта, проводите анализ сайта до и после оптимизации:
С помощью яндекс метрики или google analitics.

  • Время на сайте;
  • Глубина просмотра;
  • Отказы;
  • Кол-во конверсий.

Динамику изменения позиций сайта. Есть специальные онлайн сервисы, например seolib.ru

Читайте также:

Как убрать данные дубли в laravel

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

Что сегодня актуально в SEO?

Seo 10 лет назад и seo сейчас это совсем разные вещи. Раньше было намного проще попасть в топ, не владея знаниями написания статей и продвижения сайта. Основные отличие представлены в таблице:     ...

Сбор семантического ядра и продвижения сайта по запросам

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