Главная / wordpress / Ускорение сайта WordPress до максимума. Увеличиваем скорость загрузки сайта.
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (2 оценок, среднее: 5,00 из 5)
Загрузка...

Ускорение сайта WordPress до максимума. Увеличиваем скорость загрузки сайта.

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

Кроме того сама характеристика скорости делится на несколько пунктов, а именно:

  • Кеш браузера
  • Код JavaScript и CSS
  • Код HTML
  • Время ответа сервера
  • Загрузка видимого контента
  • Размеры изображений и их «вес»
  • Сжатие gzip
  • Размеры элементов
  • Всплывающие окна
  • Работа сервера
  • Количество элементов на страницу

Начинаем битву за скорость WordPress

подробный анализ сайта, анализ скорости загрузки сайта, тест скорости загрузки сайта.

Шаг №1. Как проверить скорость загрузки сайта и определить проблемные места?!

Сервисы для анализа сайта

Сервисы для анализа сайта

Для начала мы проверяем свой сайт для этого воспользуемся двумя замечательными бесплатными сервисами. Определение скорости загрузки – Google PageSpeed Tools  и анализ сайта PR-CY. Есть и другие, но я думаю это лучшие, они дают наиболее точную оценку.

подробный анализ сайта, анализ скорости загрузки сайта, тест скорости загрузки сайта.

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

Шаг №2. Меняем размеры и «вес» изображений на сайте

Как уменьшить изображения

Как уменьшить изображения

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

Уменьшаем размер перед загрузкой на сайт.

Можно менять размер перед «заливкой», для этого применяются графические редакторы или специальные программы. Самый простой откорректировать в банальной «Paint». Уменьшить до нескольких десятков килобайт.

Используем плагины WordPress.

Я  пользуюсь именно этим методом в комплексе с первым. Для начала большие изображения уменьшаю в редакторе, а затем они автоматически сжимаются при загрузке на сервер с помощью плагина WP Smush. Он является самым популярным и удобным в обращении. Простой интерфейс и автоматическая работа. Кроме того вы можете сжать уже загруженные изображения до установки данного плагина. Делается это достаточно просто, заходите в библиотеку медиафайлов и возле каждого нажимаете «Smush Now».

плагин вордпресс wp smush, плагин wordpress wp smush

Теперь файл сжат

плагин вордпресс wp smush, плагин wordpress wp smush

При загрузке новых изображений, они корректируются автоматически.

Наряду с WP Smush есть и другие плагины, которые также пользуются спросом. Он вызван тем, что некоторые вызывают конфликты между уже установленными. Поэтому можно выбрать тот, который подходит именно вам.  Вот их перечень.

Плагины WordPress для сжатия изображений:

  • Плагин WP — EWWW Image Optimizer
  • Плагин WP — TinyPNG / TinyJPG
  • Плагин WP — Resize Image After Upload
  • Плагин WP — ShortPixel Image Optimizer
  • Плагин WP — Kraken Image Optimizer
  • Плагин WP — Imagify
  • Плагин WP — Optimus
  • Плагин WP — CW image optimizer
  • Плагин WP — SEO Friendly Images
  • Плагин WP — Lazy load
  • Плагин WP — Compress JPEG and PNG images
  • Плагин WP — BJ Lazy Load
  • Плагин WP — Prizm Image

Также отмечу, что некоторые имеют как бесплатную версию, так и платную. Основное отличие – количество уже загруженных изображений, которые можно сжать на сервере.

Шаг №3. Оптимизируем отображение картинок на страницах wordpress. Улучшаем «юзабилити» 

Пользователь сам определяет размер

Пользователь сам определяет размер

Я думаю не стоит обсуждать, что быстрее загрузится картинка в полном размере или её миниатюра. Ответ очевиден! Но миниатюра не дает возможность рассмотреть ваш скрин или фото в полном объеме. Особенно если на них имеются надписи. Как быть!? Есть золотая середина, увеличение картинок по клику мышки, в этом нам поможет плагин wp — Auto-highslide. Уверен он лучший в своем роде, у него вообще нет настроек. Установили – он работает – очень удобно и просто.

Итак что мы делаем. Устанавливаем и активируем плагин Auto-highslide.  Все изображения должны отображаться в среднем размере, а в разделе ссылка должно стоять – «Медиафайл» — иначе плагин Auto-highslide не будет работать. Смотрите на скрин ниже.

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

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

К слову, плагин wordpress — Auto-highslide не доступен для скачивания из админки, вы можете скачать его с нашей группы ВКонтакте в разделе документы здесь.  А полная статья о нём здесь.

Шаг №4. Кеширование страниц сайта wp

Настраиваем кеш WordPress

Настраиваем кеш WordPress

Кеширование страниц – это важнейший параметр скорости загрузки сайта. Вы можете иметь ошибки в CSS и JavaScript, но кеш должен быть настроен обязательно. Он способен увеличить скорость загрузки вашего ресурса в несколько раз. Да, да вы не ослышались в несколько раз!

Есть несколько вариантов

Первый – это откорректировать файл .htaccess, но я стараюсь не ковырять код собственных сайтов, чего и вам советую. Лучше доверится специалистам. Однако если вы хотите рискнуть, то в файл .htaccess вставляем следующий код:

FileETag MTime Size

<ifmodule mod_expires.c>

<filesmatch «\.(jpg|gif|png|css|js)$»>

ExpiresActive on

ExpiresDefault «access plus 1 year»

</filesmatch>

</ifmodule>

Второй способ, наиболее распространенный – использовать плагин кеширования. Самый простой среди них – это WP Super Cache. Он не конфликтный, простой в настройке и подходит большинству блогов на wordpress.

Скачать WP Super Cache можно из админки. Устанавливаем и активируем.

Настройки WP Super Cache

Всё делаем как на скринах ниже:

Настройки WP Super Cache, wordpress плагин WP Super Cache.

Настройки WP Super Cache, wordpress плагин WP Super Cache.

Настройки WP Super Cache, wordpress плагин WP Super Cache.

Настройки WP Super Cache, wordpress плагин WP Super Cache.

Настройки WP Super Cache, wordpress плагин WP Super Cache.

Настройки WP Super Cache, wordpress плагин WP Super Cache.

И не забывайте сохранять настройки на каждой вкладке!

Есть также и другие плагины wordpress для кеширования:

  • Плагин WP — WP-Cache
  • Плагин WP — Hyper Cache
  • Плагин WP — Zen Cache (formerly Quick Cache)
  • Плагин WP — WP-Cache.Com
  • Плагин WP — WP Rocket
  • Плагин WP — WP Fastest Cache
  • Плагин WP — WP Fast Cache
  • Плагин WP — Wordfence Falcon
  • Плагин WP — W3 Total Cache
  • Плагин WP — Super Static Cache
  • Плагин WP — Really Static
  • Плагин WP — Next Level Cache
  • Плагин WP — Lite Cache
  • Плагин WP — Hyper Cache Extended
  • Плагин WP — Gator Cache
  • Плагин WP — Flexicache
  • Плагин WP — Cachify
  • Плагин WP — AIO Cache
  • Плагин WP — Alpha Cache
  • Плагин WP — Bodi0’s Easy Cache
  • Плагин WP — Zen Cache (formerly Quick Cache)
  • Плагин WP — Quick Cache (Speed Without Compromise)

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

Шаг №5. Асинхронная загрузка изображений и прочих элементов

Ускоряем отображение элементов страниц

Ускоряем отображение элементов страниц

Теперь начинаем работать непосредственно над элементами сайта, а точнее над их загрузкой на каждой странице вышего ресурса. Чего нам надо добиться?! Чтобы элементы загружались не сразу все и страница «висела», а прогружались по мере того, как пользователь будет прокручивать страницу вниз. Это актуально особенно для тех, у кого есть статьи со множеством изображений!

Для реализации этой схемы я использую плагин a3 Lazy Load. Скачать его можно из админки.

Настройки a3 Lazy Load

В настройке он простой, я рекомендую оставить все параметры по умолчании.

плагин wordpress a3 Lazy Load, a3lazyload, wp Lazy Load.

плагин wordpress a3 Lazy Load, a3lazyload, wp Lazy Load.

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

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

Да, да вы правы, они не прогружаются порой, и пользователь уходит с сайта до их полной загрузки. a3 Lazy Load решит эту проблему! Вы не будете терять деньги из-за скорости!!!

Шаг №6. Уменьшаем количество HTTP запросов, сжатие gzip

Отличный плагин для ускорения

Отличный плагин для ускорения

Продолжаем ускорять wordpress. Первое что мы делаем в этом разделе – устанавливаем Far Future Expiration Plugin. Это достаточно простой плагин, он уменьшает количество HTTP запросов. Кроме того позволяет использовать gzip сжатие.

Настройки Future Expiration Plugin

Смотрите на скрин ниже:

плагин wordpress, far future expiration.

Важно!!! Если вы уже используете gzip сжатие с другим плагином, то поставьте галочку Enable Gzip Compression, дабы не было конфликтов. Напомню – если вы установили плагины кеширования, то обратите внимание – они тоже используют gzip. Если у вас стоит W3 Total Cache или WP Super Cache, то галочка также должна стоять в Enable Gzip.

Шаг №7. Оптимизируем CSS, JavaScrit и HTML коды

Как оптимизировать коды на wordpress

Как оптимизировать коды на wordpress

При оптимизации кодов и их сокращения варианта два – ковырять блог или установить плагин. Я предложу самый простой из них. Вы уже наверно догадались?! Берем плагин Autoptimize. Он описан в статье здесь.

Устанавливаем, активируем. И сохраняем настройки по умолчанию. Там сложного ничего нет.

У него кстати есть альтернативный вариант – это Better WordPress Minify.

Шаг №8. Как уменьшить время ответа сервера wordpress

Проблема на сервере или на сайте

Проблема на сервере или на сайте

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

программисты, юмор, коды, html humor.

Как решать проблему с сервером.

Координальное решение – это смена хостинга, либо переезд на другой сервер. Кроме того некоторые хостинги сами предлагают увеличить скорость загрузки сайта за дополнительную плату. Например TimeWeb берет за эту не хитрую услугу 25 рублей в месяц.

Как решить проблему на сайте.

Для начала используйте инструменты анализа, два наиболее популярных я предложил в начале этой статьи. Сам google рекомендует обратить внимание на проблемные места, а именно сокращение кодов, их оптимизацию, перенос наиболее ресурсозатратных и блокирующих в подвал чтобы время ответа сервера было не более 200 миллисекунд.

Кроме того, почистите спам, очистите корзину, удалите неиспользуемые плагины, метки, записи.

Шаг №9. Уменьшаем количество элементов на странице

Делаем сайт простым и понятным

Делаем сайт простым и понятным

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

много рекламы на сайте, сайт захламлен рекламой.

То же должно быть и на вашем сайте! Уберите ненужные блоки из сайдбаров, сократите число рубрик, введите иерархию в разделах. В объемных статья добавьте шорткоды, возможно открывающиеся по клику пункты – например как в этой статье. Не используйте длинные HTML коды и скрипты, по возможности смещайте их в низ страницы. По возможности не используйте всплывающие окна – их никто не любит, ни поисковики, ни живые люди!!!

Шаг №10. Возвращаемся к тому с чего начали!

Проверка результатов!

Проверка результатов!

Если вы уже закончили работы по всем пунктам выше, то снова возвращаемся к нашим сервисам для анализа сайта и смотрим, что получилось. Вот например мой результат по сайту izobata.ru

test speed sait, тест скорости сайта, скорость сайта 100 из 100.

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

За сим Всё. Если у вас есть вопросы или дополнения к статье – пишите их в комментариях!

Опубликовать на своей стене в:
Как известно поисковая система Google оценивает сайт более чем по 300-м параметрам, а Яндекс пошел ещё дальше и учитывает более 700 факторов, которые влияют на поисковую выдачу. Большинство из низ не известно, но мы совершенно точно знаем как минимум пару десятков наиболее важных параметров, которые должны быть на высоте, если вы хотите чтобы сайт пробился в топ. Один из таких скорость загрузки вашего ресурса. Кроме того сама характеристика скорости делится на несколько пунктов, а именно: Кеш браузера Код JavaScript и CSS Код HTML Время ответа сервера Загрузка видимого контента Размеры изображений и их «вес» Сжатие gzip&hellip;

Обзор

Итог: Оцените статью!

Рейтинг пользователей 3.9 ( 6 голосов)
браузеры

Добавить страницу в закладки браузера - Нажмите Ctrl+D

   

О Александр Муратов

Авторский Блог Муратова Александра. Тематика: сайтостроение - wordpress. Продвижение, раскрутка, монетизация и оптимизация сайтов. Администратор Live-Net Журнала HandicapNews.ru Все статьи автора.

Оставить комментарий

Яндекс.Метрика

Watch Dragon ball super