Как ускорить загрузку сайта на WordPress. Google PageSpeed Insights. Ускорить загрузку сайта


5 простых способов ускорить загрузку сайта WordPress.

Поделитесь пожалуйста

Ускорить загрузку сайта - статья для начинающих блогеров.

5 простых способов ускорить загрузку сайта WordPress.

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

Медленная скорость загрузки страниц особенно вредна для сайтов электронной коммерции. Более 70% покупателей, которые не довольны скоростью работы сайта, с меньшей вероятностью будут совершать повторные покупки с того же сайта, а время задержки при загрузке сайта в одну секунду снижает конверсию на 7%.

Даже Google добавил фактор скорости загрузки сайта в свои алгоритмы при ранжировании сайтов (читайте на английском). Поэтому, если Ваш сайт загружается слишком медленно, Вы должны ожидать, что упадет рейтинг Вашего сайта в Google, и уменьшится трафик на Ваш сайт из органического поиска.

Итак, что Вы можете сделать, как ускорить загрузку сайта?

Как ускорить загрузку сайта. Результат проверки скорости загрузки страницы сайтаКак ускорить загрузку сайта. Результат проверки скорости загрузки страницы сайтаРезультат проверки скорости загрузки одной страницы моего сайта

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

Используйте качественный плагин кэширования

Если на Вашем сайте есть изображения, CSS и javascript, которые редко изменяются, кэширование в браузере, поможет сделать загрузку Вашего сайта более быстрой.

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

W3 Total Cache - популярный плагин кэширования. Разработчики плагина обещают 10-кратное улучшение производительности сайта, когда он полностью и правильно настроен.

WP Super Cache - более удобная альтернатива, и Вам не нужно быть экспертом сервера, чтобы его настроить.

Я использую плагин кэширования WP Fastest Cache для WordPress (обзор плагина).

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

Изображения, как правило, это самые крупные файлы на сайте, если они не сжаты (оптимизированы), они долго загружаются. Есть много инструментов, которые помогут Вам в оптимизации изображений для сайта.

Если на Вашем сайте много изображений, Вы можете захотеть использовать отложенную загрузку изображений. Плагин Lazy Load позволяет загружать, только видимые изображения на экране пользователя. Остальные изображения начнут загружаться, только по мере "прокрутки" страницы. Такая технология не только ускоряет загрузку страницы, но и экономит трафик для пользователей, которые не хотят просматривать всю страницу полностью.

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

Минимизировать HTML, CSS и Javascript

Другими словами, удалить все пробелы в коде, где это возможно.

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

Для этого не нужно править весь код вручную, используйте плагин WP Minify, W3 Total Cache тоже позволяет, это сделать. Плагин WP Fastest Cache в бесплатной версии, частично минимизирует.

Сократить количество HTTP-запросов

Каждый раз, когда кто-то посещает страницу Вашего сайта, все файлы должны быть отправлены в браузер этого человека, включая изображения, файлы CSS и ссылки на библиотеки JavaScript. Поэтому, если у Вас есть файл HTML, два файла CSS, пять файлов Javascript и восемь изображений, в общей сложности получается 16 файлов, которые необходимо загрузить.

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

Один из способов сделать это - упростить дизайн Вашего сайта и объединить файлы, такие как скрипты и CSS. Раздел minify в W3 Total Cache позволяет Вам добавлять файлы CSS и Javascript, чтобы Вы могли легко объединить их в один файл. При настройке плагина WP Fastest Cache, поставьте галочки Объединение CSS и Объединение JS.

Оптимизация Таблиц Базы Данных

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

Вы можете оптимизировать таблицы базы данных вручную с помощью phpMyAdmin или с помощью плагина.

WP-DBManager позволяет оптимизировать, исправлять, архивировать и восстанавливать базу данных.

WP-Optimize, еще один инструмент для очистки и оптимизации базы данных. Этот плагин также позволяет удалять публикации, комментарии в очереди спама, не одобренные комментарии и элементы в корзине.

Заключение

Это быстрый обзор простых способов, которые отвечают на вопрос, как  ускорить загрузку сайта на WordPress.

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

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

Как Вы ускоряете свой сайт? Расскажите нам в комментариях ниже.

Статья была полезна? Пожалуйста поделитесь.

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

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

Как получать бесплатный трафик на сайт из социальных сетей?

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

leonnik.com

Как ускорить загрузку сайта | WordPress Mania

Доброго времени суток, дорогие коллеги! Хочу вернуться ещё раз к важной теме - как ускорить загрузку сайта WordPress и сейчас добавлю к предыдущим постам еще один небольшое повествование. Попить чайку, принять душ и заняться домашними делами … Всё это люди не хотят делать, пока загружается ваш сайт. По статистике, посетители покидают сайт, который грузится более 3 - х секунд. Я лично всегда так делаю, не жду, а перехожу на другой источник.

Скорость загрузки сайтаКак увеличить скорость загрузки сайта WordPress

В этой статье мы рассмотрим 10 способов, с помощью которых можно повысить скорость загрузки сайта и улучшить пользовательский опыт.

1. Кэширующие плагины для WordPress

Если ваш сайт работает на WordPress, то этот раздел статьи будет для вас наиболее полезен.

Чтобы ускорить WordPress-сайт, лучшее, что можно сделать, – это установить кэширующий плагин, который позаботится о большинстве из пунктов, которые мы рассмотрим ниже.

Кэширование – это способ временного хранения данных для более простого и быстрого извлечения. Это означает, что кэширование может быть выполнено двумя путями: сервер вашего хоста может кэшировать некоторые данные, а затем браузеры ваших пользователей могут кэшировать оставшиеся данные. Это гарантирует, что вашему серверу не придётся запускать так много запросов и файлов, а пользователям – загружать каждый отдельный файл всякий раз, когда они посещают ваш сайт.

Самым популярным кэширующим плагином для WordPress является W3 Total Cache, однако он довольно сложный в использовании.

Ещё один плагин, WP Fastest Cache, работать с которым намного проще. У этого плагина более дружественный к пользователю интерфейс и его легче настроить.

2. Подключение к сети доставки контента

Этот шаг важен для каждого владельца сайта, включая тех, чьи ресурсы работают на WordPress. В качестве примера мы будем использовать CloudFlare, но эти принципы применимы к любой CDN.

CDN – это крупная сеть серверов, распределённых по всему миру, способная кэшировать файлы вашего сайта, а затем отправлять эти файлы с ближайшего к вашим пользователям сервера. Таким образом, в идеальной ситуации пользователь в Нью-Йорке загрузит файлы сайта с северо-востока Соединенных Штатов, а не западного побережья или Европы.

Маршрутизация трафика через CloudFlare позволяет сократить время загрузки и повысить безопасность веб-сайта.

Чтобы настроить CDN, например CloudFlare, выполните следующие действия:

Зарегистрируйте аккаунт на сайте https://www.cloudflare.com/.

Добавьте в него свой сайт. (С системой справится даже ребенок. Вы просто указываете адрес своего сайта и нажимаете большую зеленую кнопку. В течение минуты ваш сайт анализируется и затем на странице отображаются все предыдущие настройки DNS. Также предлагается изменить/добавить некоторые значения, если что-то вдруг перенеслось неправильно. В чем плюс? Все очень просто, ваш сайт перенесется и не будет простаивать. Ваши пользователи даже не заметят каких-либо изменений).

Измените серверы доменных имён, чтобы они указывали на те сервера, что были предоставлены CDN в процессе установки. При использовании WordPress и CloudFlare установите официальный плагин CloudFlare:

CloudflareПлагин Cloudflare для WordPress

При использовании другой CMS установите модуль mod_cloudflare для Apache. Хотя это не обязательно, но полезно для регистрации реальных IP-адресов пользователей вашего сайта. CloudFlare — действительно очень удобный сервис. Согласитесь, защитить сайт, забыть о кешировании, установить статистику и не тратить нервы, если сайт недоступен, просто перенеся сайт на другие DNS — это здорово. А если почти всеми этими возможностями можно пользоваться бесплатно, то такой сервис — просто сказка 🙂

3. Оптимизация изображений

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

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

Один из самых удобных сайтов для конвертации JPG-изображений в PNG – Tiny PNG.

сервис TinyPNGВеб-сервис TinyPNG, который позволяет сжимать PNG-файлы

Далее, можно оптимизировать изображения, используя более новый стандарт WebP. Однако на сегодняшний день этот стандарт поддерживают не все браузеры (только Google Chrome, Android и Opera), поэтому при его применении обязательно нужно использовать резервные методы для корректной загрузки изображений в других браузерах.

4. Объединение и удаление файлов Javascript

Для выполнения этой задачи нужно иметь представление о JavaScript, в противном случае можно нарушить эту функциональность на сайте.

Если вы используете CloudFlare, вы можете включить минимизацию JavaScript (JavaScript Minification), перейдя на вкладку Speed и отметив галочкой пункт JavaScript в подразделе Auto Minify.

Вы также можете включить Rocket Loader в том же подразделе. Эта функция объединяет JavaScript-файлы в один, загружает скрипты в последнюю очередь и кэширует их локально. Если использование этой функции приведёт к нарушениям в работе JavaScript-функциональности, её можно будет в любой момент отключить.

Если вы не используете JavaScript, то вы можете сжимать JavaScript-файлы вручную. Для этого можно использовать такой инструмент, как JS Compress (https://jscompress.com/).

Если вы веб-разработчик и хорошо разбираетесь в коде, вы можете запустить Grunt (https://gruntjs.com/) или Gulp (https://gulpjs.com/) для автоматизации процесса минимизации JavaScript. Существует также модуль Apache (https://www.modpagespeed.com/doc/filter-js-minify), который способен уменьшать размер исходного кода JavaScript "на лету", однако его нельзя сочетать с другими методами минимизации.

После объединения и минимизации ваших файлов JavaScript вам нужно настроить асинхронную или отложенную загрузку скриптов на сайте. Для внешних скриптов лучше использовать атрибут async. Для большинства других скриптов, которые полагаются друг на друга для работы, используйте атрибут defer. Более подробную информацию можно посмотреть на сайте - http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html.

При использовании WordPress вы можете попробовать один из плагинов оптимизации, таких как Hummingbird (https://premium.wpmudev.org/blog/hummingbird/) или плагин Async JavaScript (https://wordpress.org/plugins/async-javascript/), которые позволяют легко добавить атрибуты async или defer к JavaScript-файлам.

5. Объединение и минимизация CSS-файлов

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

Для пользователей CloudFlare функция минимизации CSS расположена в том же разделе Speed. Вы также можете включить минимизацию HTML.

Как и в случае с JavaScript, продвинутые пользователи могут использовать Grunt или Gulp для минимизации кода CSS на своём сервере. Существует также модуль Apache, называемый mod_ext_filter, который может быть настроен для автоматической минимизации файлов CSS, однако, поскольку они не будут кэшироваться как статические файлы, это не является предпочтительным способом минимизации.

Чтобы вручную минимизировать CSS, можно использовать специальные онлайн-инструменты. Например, Minifier - https://www.minifier.org/.

6. Загрузка динамических частей через AJAX

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

Например, на сайте PriceListo те страницы, на которых находятся счётчики репостов в социальных сетях, могли бы загружаться медленно, поскольку сайту нужно связываться с серверами Facebook и Twitter для правильного расчёта общего числа репостов.

Чтобы не замедлять загрузку страницы в целом, на данном сайте эта часть кода вызывается через AJAX. Это позволяет главной странице полностью загружаться, пока счётчик репостов обновляется в фоновом режиме и, вероятно, сохранять его в своей базе данных для ещё более быстрого обновления при последующих загрузках.

Такой подход позволяет предотвратить необходимость загрузки данных из Facebook или Twitter при каждой загрузке страницы. Кроме того, даже если в процессе получения этих данных есть ошибка, то она затронет лишь часть страницы, а не всю её целиком.

Если вы не являетесь веб-разработчиком, то вам может быть сложно разделить свой сайт на несколько вызовов AJAX. Но если вы точно знаете, что определённая часть вашего сайта является узким местом с точки зрения загрузки всей страницы, то стоит нанять специалиста, который решит эту задачу для вас.

7. Использование браузерного кэширования

Браузерное кэширование – это способность браузера сохранять локально ресурсы, такие как изображения, файлы JavaScript и файлы CSS, чтобы их не нужно было загружать каждый раз. Хотя использование этой функции влияет в основном на повторных посетителей, это по-прежнему важный шаг для ускорения сайта.

В CloudFlare этот параметр можно настроить, перейдя на вкладку Caching и выбрав подходящий вариант срока хранения данных в кэше – Browser Cache Expiration. Если ваши файлы обновляются нечасто, вы можете выбрать более длительный срок, например 8-16 дней. Если файлы обновляются чаще, то нужно выбрать меньший период.

Browser Cache ExpirationИспользование браузерного кэширования

Чтобы включить браузерное кэширование на серверах на базе Apache, вы можете попробовать добавить код, подобный этому - https://gtmetrix.com/leverage-browser-caching.html, в файл .htaccess в корневом каталоге вашего сайта.

8. Использование алгоритма сжатия Gzip

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

Вы можете включить сжатие Gzip так же, как браузерное кэширование. Просто добавьте следующий код в файл .htaccess в корневом каталоге вашего сайта:

# Enable Compression <IfModule mod_deflate.c> 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 </IfModule> <IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ 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_exclude rspheader ^Content-Encoding:.*gzip.* </IfModule> # Leverage Browser Caching <IfModule mod_expires.c> ExpiresActive On 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 text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" </IfModule> <IfModule mod_headers.c> <filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$"> Header set Cache-Control "max-age=2678400, public" </filesmatch> <filesmatch "\.(html|htm)$"> Header set Cache-Control "max-age=7200, private, must-revalidate" </filesmatch> <filesmatch "\.(pdf)$"> Header set Cache-Control "max-age=86400, public" </filesmatch> <filesmatch "\.(js)$"> Header set Cache-Control "max-age=2678400, private" </filesmatch> </IfModule>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

# Enable Compression

<IfModule mod_deflate.c>

  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

</IfModule>

<IfModule mod_gzip.c>

  mod_gzip_on Yes

  mod_gzip_dechunk Yes

  mod_gzip_item_include file .(html?|txt|css|js|php|pl)$

  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_exclude rspheader ^Content-Encoding:.*gzip.*

</IfModule>

 

# Leverage Browser Caching

<IfModule mod_expires.c>

  ExpiresActive On

  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 text/css "access 1 month"

  ExpiresByType text/html "access 1 month"

  ExpiresByType application/pdf "access 1 month"

  ExpiresByType text/x-javascript "access 1 month"

  ExpiresByType application/x-shockwave-flash "access 1 month"

  ExpiresByType image/x-icon "access 1 year"

  ExpiresDefault "access 1 month"

</IfModule>

<IfModule mod_headers.c>

  <filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">

  Header set Cache-Control "max-age=2678400, public"

  </filesmatch>

  <filesmatch "\.(html|htm)$">

  Header set Cache-Control "max-age=7200, private, must-revalidate"

  </filesmatch>

  <filesmatch "\.(pdf)$">

  Header set Cache-Control "max-age=86400, public"

  </filesmatch>

  <filesmatch "\.(js)$">

  Header set Cache-Control "max-age=2678400, private"

  </filesmatch>

</IfModule>

Если вы используете CloudFlare, ваши ресурсы автоматически будут автоматически сжиматься с помощью Gzip.

9. Избегание загрузки большого количества внешних ресурсов

Загрузка большого количества внешних ресурсов – это одна из проблем, с которой сегодня сталкиваются крупные медиасайты. Но это не значит, что данная проблема не может повлиять на ваш сайт. Фактически, это актуально и для более мелких сайтов, особенно тех, что используют рекламные сети, такие как Google AdSense, Media.net, Taboola и т.д.

Проблема в том, что когда вы добавляете сторонние фрагменты кода на свой сайт, он, скорее всего, загрузит различные зависимые объекты и файлы, чтобы их функциональность работала. Это в свою очередь экспоненциально увеличит время загрузки вашего сайта – вплоть до 100%.

Что же с этим можно сделать? Самое простое решение – свести к минимуму количество сторонних скриптов, добавляемых на сайт. Например, если вы используете несколько рекламных сетей, попробуйте консолидировать все свои объявления в одну или две сети максимум.

Если вы используете другие сторонние ресурсы, такие как формы, чат, всплывающие оповещения и т. д., то вам нужно будет проверить сайт с помощью инструмента GTmetrix (https://gtmetrix.com/). На вкладке Waterfall вы сможете просмотреть скорость загрузки всех файлов, найденных на странице, и понять, какие из них больше всего её замедляют.

10. Настройка Google AMP

Google AMP (Accelerated Mobile Pages) – это фреймворк для создания облегчённых версий веб-страниц для мобильных устройств. Для ускорения загрузки эти страницы предварительно загружаются и кэшируются серверами Google.

Для настройки AMP пользователям WordPress рекомендуется использовать официальный AMP-плагин.

AMP for WordPressПлагин AMP for WordPress

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

Автор статьи: Харис Басич (Haris Bacic) – руководитель отдела дизайна и разработки в агентстве поискового маркетинга AdFicient. Перевод www.searchengines.ru.

P.S. Для быстрой загрузки сайта используйте быстрые темы для WP, например - Basic

Понравилась статья? Поделись с друзьями!

wordpressmania.ru

(Онлайн чек-лист) Самостоятельная оптимизация скорости сайта — как увеличить скорость загрузки сайта

Самостоятельная оптимизация скорости сайта

Оптимизация скорости сайта всегда является приоритетной задачей, так как между сайтами идет большая конкуренция и необходимо постоянно улучшать свой ресурс. Об оптимизации скорости сайта заботятся как владельцы сайтов (блоггеры), так и крупные компании, которые занимаются SEO продвижением, так как понимают что это один из базовых параметров.

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

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

Хочу обратить внимание: если вы проверяете свой сайт только в сервисе Google PageSpeed Insights, то в процессе изучения чек-листа поймете, что большое количество параметров там скрыто и не показывается, несмотря на то что все равно влияет на скорость загрузки сайта.

Этап 1. Определите "рамки" оптимизации скорости сайта

Под понятием "Рамки оптимизации скорости сайта" я понимаю такой объем CSS, JS, медиафайлов и других файлов, которые загружаются на вашем сайте.

Определив "рамки", мы будем знать конечную, к которой нужно идти. А поможет нам найти данные "рамки оптимизации скорости сайта" сервис, созданный Джонатаном Филдингом — www.performancebudget.io.

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

Этап 2. Узнаем реальную скорость сайта

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

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

Сервис WebPagetest позволяет выбрать сервер тестирования и браузер. Данный сервис показывает в виде диаграмм каких ресурсов (CSS, JS) больше всего в процентном соотношении на вашем сайте. Что больше всего радует, так это подробная статистика по запросам в виде графиков. Также есть информация о том, к каким файлам применяется GZIP сжатие и становится сразу понятно все ли верно указали в настройках .htaccess.

А вот сервис GTmetrix позволяет увидеть график загрузки файлов, так еще к этому все показывает подробные советы по оптимизации каждого нюанса на сайте. И здесь все разбивается на более детальные моменты оптимизации.

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

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

(Чек-лист) Самостоятельная оптимизация скорости сайта

1. Оптимизация изображений

  1. Используйте изображения именно того разрешения, которое необходимо на странице.

    Часто встречаются ситуации, когда используются изображения, у которых разрешение большое (например, 800x600px), а на странице используется лишь миниатюра (например, 300x225px). Особенно часто встречается данная ошибка при создании галерей. Используйте только то разрешение изображения, которое необходимо в конкретной ситуации.

  2. Объедините все иконки (если SVG, то в SVG-спрайт) в одно изображение (спрайт).

    Это уменьшит количество запросов к серверу. Сейчас существуют онлайн решения: css.spritegen.com, iconizr. Так и решения для сборщиков (для Gulp — gulp-svg-sprites, для Grunt — grunt-svg-sprite, для Webpack — Webpack SVG sprite loader).

  3. Оптимизируйте изображения: PNG, JPG, SVG.

    Здесь есть как онлайн решения: TinyPNG, Kraken.io. Так и автоматизированные решения для сборщиков: Gulp — gulp-imagemin, gulp-pngquant; Grunt — grunt-contrib-imagemin; Webpack — imagemin-webpack-plugin.

  4. Deferring images without lazy loading or jQuery — https://varvy.com/pagespeed/defer-images.html

2. Уменьшите количество запросов

  1. Используйте SVG-спрайты и PNG-спрайты.

    Об этом я писал в блоке "Оптимизация изображений", который находится выше.

  2. Объедините все CSS файлы в один.

    Как я говорил раннее — это уменьшит количество запросов к серверу. Плагины для сборщиков (для Gulp — gulp-concat-css, для Grunt — grunt-concat-css, для Webpack — css-concat-loader).

  3. Объедините все JS файлы в один по возможности.

    Плагины для сборщиков (для Gulp — gulp-concat-js, для Grunt — grunt-contrib-concat, для Webpack — webpack-uglify-js-plugin).

  4. Максимально уменьшите количество запросов к базе данных.

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

3. Оптимизируем CSS и JS

  1. Сжимаем все CSS файлы.

    Онлайн решения: CSS Compressor, CSS Minifier. Плагины для сборщиков: Gulp — gulp-clean-css; Grunt — grunt-contrib-cssmin; Webpack — clean-css-loader.

  2. Сжимаем все JS файлы.

    Сервисы онлайн: JavaScript Compression Tool, JS Minifier. Плагины для сборщиков: Gulp — gulp-uglify; Grunt — grunt-contrib-compress; Webpack — плагин, который указан в прошлом пункте также сжимает JS.

  3. Загружайте все CSS и JS файлы в самом конце. Размещайте их перед закрывающим тегом <body>.

    Необходимо между тегами <style> и </style> вставить самые важные CSS свойства. То есть именно те, которые отвечают за вывод первого экрана на сайте. Потому что эту часть сайта пользователь видит в самом начале. А затем догрузить оставшуюся часть CSS из файла, а уже после JS.

  4. Удалите из адресов JS и CSS файлов все строки, которые указывают версию скрипта и т.д.

    Эти параметры указываются в адресе через знак ?v=1.0.1 (вопрос).

Вывод

Надеюсь вы уже поняли, что это была лишь часть онлайн чек-листа по самостоятельно оптимизации сайта и его скорости загрузки. Я решил разобрать все детали в оптимизации скорости загрузки. Если будут появляться дополнения к статье, я обязательно буду ее дополнять, а также готовить следующую часть чек-листа.

Если вы знаете интересное решение, которое позволяет ускорить загрузку страницы, пожалуйста, пишите об этом в комментариях, будем вместе делиться полезными материалами и вместе сделаем интернет еще быстрее и комфортнее! 😉

Успехов!

С Уважением, Юрий Немец

(Онлайн чек-лист) Самостоятельная оптимизация скорости сайта — как увеличить скорость загрузки сайта 4.55/5 (90.91%) 22 голос(ов)

Понравилась статья - расскажи друзьям! :)

Facebook

Twitter

Вконтакте

Одноклассники

Google+

www.sitehere.ru

Как ускорить сайт своими силами?

То, как быстро открывается ваш сайт, может сильно повлиять на его продвижение. Связь тут очень простая: если сайт открывается долго, то нетерпеливый пользователь закроет страницу и будет искать информацию или товар на другом, более шустром сайте. Сами знаете, люди в наше время очень нетерпеливы, всем всё вынь да положи!

А такие "отказы" от вашего сайта будут восприняты поисковыми системами по своему: ваш сайт не интересен, и поэтому высоких позиций он не достоин, поведенческие факторы будут неважными.

Можно было бы провести эксперимент, и посмотреть выдачу Яндекса и Google, как я это сделал при проверке валидации кода, но тут все и так, кажется, очевидным.

К тому же на эту мысль меня натолкнул Google Adsense, а Google лучше знать, что влияет на ранжирование сайтов. В этом сервисе (Google Adsense), прямо на главной странице, есть индикатор оптимизации сайта. В этом тесте один из пунктов - это скорость загрузки сайта, который проверяется специальным сервисом - developers.google.com, который позволяет проанализировать наш сайт.

Как ускорить сайт

Что же мне показал мне этот сервис? Показал, что не всё идеально, особенно при просмотре сайта через мобильное устройство.

Как ускорить сайт своими силами

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

Как ускорить сайт для компьютеров?

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

Исправьте обязательно:

Исправьте по возможности:

Последние четыре пункта я рассматривать не буду, так как там сущие мелочи, которые устранить очень сложно, или просто невозможно.

Как ускорить сайт для мобильных устройств?

Тут показывает всё тоже самое, что и для сайта для компьютеров. Но подход будет немного другой, так как для мобильной версии нужно будет что-то придумать: или делать мобильную версию сайта, или адаптировать шаблон под мобильные сайты, а можно просто установить плагин в WordPress, который создаст мобильную версию шаблона.

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

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

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

P.S. Решил немного дописать об одном очень полезном плагине для браузера, который делает тоже, что и выше упомянутый сервис от Google. По сути это расширение этот сервис и предоставляет, и пользоваться им удобнее, чем сервисом. Называется расширение PageSpeed Insights Browser Extensions.

Как ускорить сайт для мобильных устройств

Как видите, расширение есть для браузеров Google Chrome и Firefox - ими я и пользуюсь.

Как проверить скорость сайта?

Этот вопрос так и напрашивается в конце этой статьи. Есть ещё один ОЧЕНЬ полезный сервис, который отлично показывает не только скорость загрузки конкретной страницы, но и что КОНКРЕТНО грузится долго. Называется этот сервис Pingdom Website Speed Test. Все сервисы для проверки скорости сайта находятся на ЭТОЙ СТРАНИЦЕ.

Тест показал, что страницы у меня грузятся примерно 4 секунды. Много это или мало? Хотелось бы поменьше. И замечательно, что сервис показывает, что является проблемой в этом отношении:

Как проверить скорость сайта

Как видите из этого кусочка, расписана поэтапная загрузка страницы и что, и главное как долго грузится. Есть так же много вкладок, которые предоставляют разный анализ. Мне нужно будет всё это изучить и удалить все сильно тормозящее сайт:)

Еще один полезный прием, который поможет ускорить сайт - это загрузка всех js скриптов на свой хостинг. Когда загружается, к примеру, реклама adsense, то из сети загружается файл adsbygoogle.js  в 30 килобайт. Вроде мелочь, но если гугл завис, то подвиснет и ваш сайт.

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

СОВЕТ ВЕБМАСТЕРУ: Умение зарабатывать в интернете - это только пол дела, вторая половина - это умение ВЫГОДНО обналичивать электронные деньги. Вот список офшорных банковских карт, на которые можно выводить средства и потом снимать с них хрустящие купюры:

1. Epayments - можно открыть счет в долларах, евро и рублях. Формально банка нет, юридический адрес в Лондоне, но можно получить реквизиты банка в Латвии.

2. AdvCash - Офшорный банк находится в Белизе, можно открыть счет в долларах, евро, фунтах и рублях.

3. Payeer - Штаб квартира этой платежной системы находится в Грузии, тут так же можно открыть счет в долларах, евро и рублях.

4. Capitalist - Можно создать счета в долларах, евро и рублях. Низкие тарифы на вывод. Компания зарегистрирована в юрисдикции Британских Виргинских Островов.

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

zmoe.ru

5 простых способов ускорить сайт

Задержка просмотра страницы даже на одну секунду может снизить количество просмотров страниц, конверсий и ухудшить уровень удовлетворенности клиентов.

На HubSpot опубликовали статью о 5 простых способах ускорить сайт в эпоху требовательных пользователей. Ничего сверхсекретного, но советы полезные и действительно простые. Ниже – краткое содержание статьи.

Итак, как ускорить страницы:

1. Оптимизируйте изображения

Многие вебмастера заливают изображения и меняют их масштаб уже на сайте при помощи CSS. В таком случае браузер все равно загружает их в полном размере, тем самым тратя на это время пользователя.

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

Второй способ оптимизации – сжать изображения.

Для этого можно использовать специальные бесплатные сервисы типа tinypng.com, которые сжимают их без потери качества. Так вы сможете уменьшить размер изображений на 25-80%.

2. Включите кэширование браузера

Это позволит временно хранить определенные данные на компьютерах пользователей – им не придется ждать каждый раз загрузки одних и тех же элементов.

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

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

3. Включите сжатие

Сжать свой сайт – практически то же самое, что заархивировать его. Сжав его, вы сможете сэкономить время на загрузке 50-70% HTML и CSS файлов, а это тонны данных.

Сжатие входит в настройки сервера – как оно будет работать, зависит от того, какие настройки вы сделаете. Ниже есть настройки для наиболее распространенных веб-серверов. Если вашего нет, свяжитесь со своей хостинг-компанией:

4. Оптимизация CSS

CSS загружается до того как люди видят ваш сайт. Чем больше времени требуется на загрузку CSS, тем дольше будет ждать пользователь.

Что делать?

Во-первых, спросите себя: Использую ли я все CSS-файлы? Если нет, избавьтесь от лишнего кода в файлах.

Во-вторых, сведите размер CSS до минимума – для этого используйте возможности своей CMS либо, если такая возможность не предусмотрена (а в WordPress и Joomla она не предусмотрена), используйте бесплатный сервис типа csscompressor.com.

Просто скопируйте свой CSS и нажмите “Compress” (Сжать).

5. Размещайте JavaScript-файлы внизу страницы

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

Чтобы не задерживать загрузку страницы, размещайте JS-скрипты внизу страницы, прямо перед закрытием тэга body. Тогда большая часть вашего сайта сможет подргужаться перед загрузкой скриптов.

Еще один метод – использовать атрибуты defer и async, размещая файлы JavaScript на сайте.

Важный момент – прежде чем использовать их, убедитесь, что понимаете разницу между ними:

  • Атрибут async подгружает скрипты раньше остального контента страницы, это значит, что скрипты могут быть загружены вне положенной очереди. Более лёгкие файлы подгружаются первыми. Это может быть хорошо для одних скриптов, но губительно для других.
  • Атрибут defer загружает ваши скрипты после того как подгрузится контент, также в определенном порядке. Убедитесь, что при такой очередности ваш сайт загружается корректно.

 

Например, вы можете взять стандартный скрипт:

<script type=”text/javascript” src=”/path/filename.js”></script>

И добавить немного кода, чтобы он подгружался тогда, когда вы хотите:

<script type=”text/javascript” src=”/path/filename.js” defer></script> <script type=”text/javascript” src=”/path/filename.js” async></script>

 

Важность ваших скриптов будет определяться атрибутами, которые вы им присвоите, так, более важные скрипты получат атрибут async, менее важные – defer.

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

Напоминание: Проверить скорость загрузки страниц можно с помощью сервиса Google PageSpeed Insights либо GTMetrics.

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

blog.seolib.ru

8 способов увеличить скорость загрузки сайта

Каждый, кто запускает сайт, рассчитывает, что на нем будет довольно большое количество посетителей и с его помощью получится заработать деньги или достичь других поставленных целей. И правильно, потому что иначе зачем его запускать? Вот только удается это всего примерно 10 процентам владельцев сайтов. Причин такому низкому проценту успеха может быть много в зависимости от сферы сайта. Начиная от неправильно выбранной ниши и заканчивая слишком длительной доставкой. Понятно, что чтобы добиться лучшего, нужно стараться все делать идеально. В этой статье разберем часть идеальной работы сайта — вопрос быстрой загрузки интернет-магазина, да и вообще любого сайта.

Итак, наша задача ускорить загрузку сайта. Независимо от того, насколько красив ваш сайт, скорость загрузки является отправной точкой его успеха. Мало того, что быстрое время загрузки сайта способствует росту рейтинга в поисковых системах. 40% пользователей уходят, если время загрузки сайта составляет больше, чем три секунды. А каждая дополнительная секунда загрузки снижает конверсию на 7%.

Что влияет на скорость загрузки сайта? Важно понимать, что в медленной загрузке сайта в большинстве случаев виноваты не проблемы в работе сервера, а плохо оптимизированный сайт. Даже если, например, вы используете хостинг с установленной Joomla, который идеально подходит для ее функционирования по всем параметрам — это не значит, что вам не нужно работать над оптимизацией и ускорением веб-сайта. Для конечного пользователя 80% времени отклика связаны с HTTP-запросами. Значит, нужно их минимизировать:

— сделать сайт простым с точки зрения дизайна: небольшое количество изображений и текст;

— объединить все CSS в одну таблицу стилей.

Ниже я расскажу более детально, как увеличить скорость загрузки сайта.

hostiq.ua

Как увеличить скорость загрузки сайта на Wordpress.

увеличить скорость загрузки сайта на 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.

плагин WP-Smush

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

Для сжатия уже имеющихся картинок воспользуемся возможностью пакетной обработки. Для этого перейдем в «Медиафайлы»- «WPSmush». На открывшейся странице сразу после блока настроек («Settings») следует блок «Smushinbulk». Нажав кнопку «BulkSmushNow», мы запускаем процесс сжатия всех изображений. Также можно воспользоваться ссылкой на «Библиотеку файлов», если мы хотим оптимизировать отдельные изображения.

Smush in bulk

Оптимизируем код

Следующий способ ускорить сайт на WordPress– сжать HTML и скрипты. Воспользуемся плагином Autoptimize.

сжать HTML и скрипты

Плагин объединяет все файлы css-стилей и js-скриптов в один файл – с расширением .cssили .js соответственно. Сохраняет их на сервере и размещает ссылки на них в HTML-документе.  А сам HTML-код очищает от лишних пробелов и переносов строк.  На странице настроек Autoptimize мы просто отмечаем галочками нужные нам параметры для оптимизации.

ускорим сайт на WordPress

Создаём мобильную версию сайта

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

Дополнительные рекомендации по ускорению работы сайта:

  1. Деактивируйте и удалите плагины, которыми вы не пользуетесь. Сведите их количество к 10-15. Подберите только самые необходимы плагины для Вордпресс.
  2. Старайтесь использовать как можно меньше внешних скриптов и виджетов социальных сетей на вашем блоге.
  3. Размещайте по возможности все скрипты перед закрывающим тегом </body>. Таким образом они буду загружаться после основного контента, что ускорит ваш сайт на WordPress.
  4. Выберите качественный хостинг. От его технических характеристик зависит скорость и качество работы вашего ресурса.

Как работать с сервисом Google PageSpeed Insights

Page SpeedInsights – специальный инструмент от Google, анализирующий скорость загрузки страниц на десктопных и мобильных устройствах. Чтобы приступить к работе, перейдем по ссылке — https://developers.google.com/speed/pagespeed/insights/ и введем URL веб-страницы. Нажмем «Анализировать».

Google PageSpeed Insights

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

ускорить загрузку сайта на WordPress

На этом все. Сегодня мы рассмотрели основные причины медленной работы блога и методы их устранения по версии GooglePageSpeedInsights.  Если вы воспользуетесь перечисленными способами оптимизации, это существенно ускорит загрузку вашего сайта на WordPress.

pro-wordpress.ru