Как ускорить загрузку сайта на WordPress?
Как ускорить сайт на WordPress в 17 раз. Пошаговая инструкция
Содержание
- 1 Как ускорить сайт на WordPress в 17 раз. Пошаговая инструкция
- 2 Короткое резюме по ускорению сайта на WordPress
- 3 Полная инструкция как ускорить сайт на WordPress
- 3.1 1. Качественный SSD хостинг, быстрый пинг
- 3.2 2. Оптимизировать изображения
- 3.3 3. Настройка wp-config.php для ускорения работы сайта на wordpress
- 3.4 4. Настройка Robots.txt — запрет на индексацию ненужным сайтам.
- 3.5 5. Настройка файла .htaccess для снижения нагрузки на сервер.
- 3.6 6. Оптимизация базы данных
- 3.7 7. Оптимизация кода шаблона (темы)
- 4 Как ускорить загрузку сайта 10 способов
- 5 1. Кэширующие плагины для WordPress
- 6 2. Подключение к сети доставки контента
- 7 9 советов, как ускорить работу сайта на WordPress
- 8 Оптимизация WordPress — советы
Представляю наиболее полную инструкцию с способами по ускорению работы сайта на WordPress. Благодаря описанным ниже способам я ускорил загрузку своего сайта с 24,40 секунд до 1,41 секунды. Увеличил скорость загрузки в 17,3 раза! Хороший результат. Чтобы узнать как — читайте полную статью.
Замеры скорости работы сайта я проводил сервисом Pingdom Speed Test. Тестировал главную страницу сайта. Смотрите ниже показатели сайта «до» и «после» улучшений, и короткую и полную инструкцию по ускорению сайта.
Показатели сокрости загрузки сайта
Перед оптимизацией | После оптимизации | |
---|---|---|
Время загрузки | 24.4 секунды | 1.41 секунды |
Количество запросов | 94 запроса | 76 запросов |
Размер страницы | 3.5 Мб | 1.6 Мб |
Скриншот замера скорости ПЕРЕД оптимизацией блога:
Скриншот замера скорости после оптимизации и проведенных ниже рекомендаций.
Ссылка на результат теста.
Короткое резюме по ускорению сайта на WordPress
Основное влияние на скорость оказали такие факторы как смена хостинга с использованием SSD дисков, оптимизация изображений, включение плагина кеширования W3 Total Cache, оптимизация БД сайта, удаление старых ревизий, включение сжатия файлов на стороне сервера, включение кеша для статичных файлов на стороне браузера. Далее следует полная развернутая инструкция по ускорению сайта на WordPress.
Полная инструкция как ускорить сайт на WordPress
1. Качественный SSD хостинг, быстрый пинг
Хостинг должен быть на SSD дисках. Желательно чтобы сервера хостинга располагались в вашей географической зоне, на которую ориентирован сайт. Если хостинг будет на SSD, но в США, а ваш блог ориентирован на Россию и страны СНГ, то толку от такого SSD будет мало. Так как будет идти долгий пинг для связи с сервером. Поэтому месторасположение дата центра хостинга также важно. Это важный параметр хостинга — быстрый пинг, отклик серверов. И чтобы хостер не делал оверселлинг услуг. Про тип хостинга — конечно лучше брать как VDS (виртуальный выделенный сервер) с необходимыми для вашего сайта параметрами, вместо обычного shared хостинга. Какую именно конфигурацию VDS выбрать — это зависит от нагрузки которую ваш сайт создает не сервер и от размера его суточной аудитории. Я бы советовал брать минимум 1Gb Ram, 1 ядро процессора и 10 Гб SSD. В начале у меня был VDS на обычных HDD дисках, затем я поменял его на SSD VDS хостинг.
Хостинг «До»:
VPS хостинг FreeHost.com.ua
Размер диска: 30 Gb HDD
Память: 2 Gb RAM
Частота CPU: 2,2 Ghz
Количество CPU: 1
Расположение серверов: Киев, Украина
Стоимость: 12,8 $/месяц
Хостинг «После»:
VDS хостинг от ihor.ru
Размер диска: 20 Gb HDD
Память: 1 Gb RAM
Частота CPU: 2,4 Ghz
Количество CPU: 1
Расположение серверов: Москва, Россия
Стоимость: 250 руб/месяц (примерно 5$/месяц)
По скриншотам теста скорости загрузки сайта, видно что на старом хостинге время ответа сайта достигало 12,3 секунды. Что непомерно много. На новом хостинге от ihor.ru время ответа сайта составляло 1,2 секунды, что в разы быстрее, по сравнению со старым хостингом. На этот показатель повлияли SSD диски, и более лучший дата центр с лучшим и более быстрым каналом.
Смена хостинга является одной из главных причин ускорения работы сайта.
2. Оптимизировать изображения
Проверьте используете ли вы оптимизированные jpg файлы изображений. Которые занимают небольшой размер и при этом обладают хорошим качеством. В Photoshop сохранять такие изображения можно командой Save for Web (Ctrl + Shift + Alt + S), или через функцию export assets если вы используете Photoshop CC. Не стоит сохранят большие непрозрачные картинки в .png формате, он занимает слишком много места, и для этого лучше использовать jpeg формат. Формат png подходит для небольшой графики которая используется в оформлении сайта, в шаблоне, это могут быть изображения кнопок, буллеты, изображения с прозрачным фоном.
Некоторые миниатюры к записям у меня были сохранены в .png формате, и размер изображения достигал 300 Кб. Пересохранив изображения в jpg формат, каждая миниатюра стала занимать 60-90 Кб в среднем. Таким образом вес некоторых изображений уменьшился в 3-4 раза, без потери качества.
Существует специальный плагин для оптимизации изображений – WP Smush. Признаюсь — я ним не пользуюсь, так как сам перед публикацией оптимизирую все изображения на предмет размера и качества. Но если вы хотите автоматизировать процесс — то используйте этот плагин.
3. Настройка wp-config.php для ускорения работы сайта на wordpress
Небольшой способ снизить загрузку на хостинг — отредактировать файл wp-config.php, который находится в коревой директории вашего сайта.
Находим в файле wp-config.php строку:
Данное решение позволит сократить количество загружаемых языковых настроек только на нужные, в стандартном коде, WordPress загружает много ненужных параметров.
4. Настройка Robots.txt — запрет на индексацию ненужным сайтам.
Файл robots.txt регулирует доступ различных поисковых роботов к страницам сайта. Предлагаю добавить следующие строки в файл, сразу же перед директивой Host. Сделаем мы это для того чтобы запретить на сайт вход различным поисковым роботам, грабберам и парсерам, которые могут воровать контент и создавать ненужную нагрузку на хостинг.
Например, помимо роботов от Yandex и Google на сайт также заходит поисковый робот от поисковика Yahoo. Таким кодом можно запретить Yahoo роботу просматривать сайт:
Я прописал следующие запрещающие директивы:
Вот пример моего файла robots.txt
Запретив индексацию сайта этим способом, вы сможете снизить нагрузку на хостинг, следовательно ускорить загрузку сайта, высвободив ресурсы сервера.
5. Настройка файла .htaccess для снижения нагрузки на сервер.
В файле .htaccess — задаются дополнительные команды для хостинга.С помощью специальных настроек можно убрать лишнюб нагрузку на сервер, и ускорить работу сайта.
Настройка №1. Часто с сайтов копируют информацию вместе с картинками, не изменяя адреса картинок. И когда такое происходит картинки лежащие на нашем хостинге загружаются на других сайтах, и это создает ненужную нагрузку на хостинг.
Следующим кодом можно запретить загружать изображения нашего сайта на сторонних сайтах:
После добавления этого кода, на чужом сайте вместо вашего изображения будет выходить ошибка.
Настройка №2. В файле .htaccess можно и следует указать кэширование для некоторых объектов сайта (изображений, css и js фалов) чтобы браузер кешировал их на своей стороне и не загружал их каждый раз. Для этого в .htaccess ниже первого кода добавляем следующий код:
Настройка №3. Включим gzip сжатие страниц перед отправкой их пользователю. Вставим в .htaccess следующий код:
Настройка №4. Ограничение спама в комментариях. Большинство спам комментариев отправляются автоматически. Этим кодом мы запретим напрямую отсылать комментарии минуя форму комментирования. Теперь спам боты не смогу отправлять комментарии.
Настройка №5. Если вы пользуетесь системой FeedBurner, то у вас явно установлены плагины, которые отправляют RSS-контент на сайт FeedBurner. Сегодня вы можете их удалить, потому что перенаправить контент можно и без плагинов, уменьшив нагрузку на хостинг.
ВНИМАНИЕ. Не забудьте в примерах выше заменить адрес yourdomain.ru на адрес своего сайта.
6. Оптимизация базы данных
Важное значение в скорости работы сайта имеет База Данных. При сохранении постов по нескольку раз WordPress создает ревизии записи — состояния постов в разные моменты их редактирования. В результате со временем база данных содержит большое количество ненужных ревизий постов, и их необходимо очищать и оптимизировать. Сделать это можно с помощью плагина Optimize DB. Установить его можно из админки WordPress. Например запустив его на своем сайте я удалили более 1200 ревизий постов. Что значительно улучшило скорость работы БД.
7. Оптимизация кода шаблона (темы)
Оптимизация кода темы заключается в том чтобы убрать ненужные запросы и/или заменить их на конкретные значения, например название блога.
Настройка №1. Найти код, который отвечает за стили в файле header.php:
Внимание. Не забудьте изменить yoursite.ru на ссылку своего сайта.
Настройка №2. Изменить код пинбеков:
Заменить с исправлением yoursite.ru на свою ссылку:
Настройка №3. Изменение кода RSS ленты:
Заменить с исправлением yoursite.ru на свою ссылку:
Настройка №4. Довольно часто в подвале сайта (footer.php), разработчики тем оставляют совершенно ненужные запросы к Базе данных. Например:
Данный код просто отображает название сайта, что бы лишний раз не обращаться к базе данных разумнее своими руками один раз написать название и не нагружать сайт. Этот же код можно поискать и в других разделах сайта, но прежде чем удалять, подумайте.
Некоторые маленькие советы, которые позволят ускорить загрузку сайта:
1) Если ваш сайт не использует комментарии, не стоит их скрывать с помощью плагинов, это создает совершенно ненужную нагрузку. Так как вам комментарии совершенно не нужны, просто удалите следующий код из файла темы (single.php):
2) Старайтесь не использовать внешние скрипты, такие как, комментарии от Вконтакте, различные виджеты социальных сетей. Да, это выглядит красиво и эффектно, но создает приличную нагрузку на сайт. Из примеров могу сказать что мой сайт значительно грузил код веб-визора от ЯндексМетрики, виджет Add.This. Кнопки соц сетей я поменял на отельный JS плагин.
3) Почистите весь код вашего сайта от комментариев, данные комментарии вставляются с помощью тегов и /*код/. Оставьте только нужное, так как сайту приходится тратить лишние силы на их загрузку…
4) Старайтесь размещать все скрипты в конце страницы перед закрвающим тегом
rightblog.ru
Как ускорить загрузку сайта 10 способов
Доброго времени суток, дорогие коллеги! Хочу вернуться ещё раз к важной теме — как ускорить загрузку сайта WordPress и сейчас добавлю к предыдущим постам еще один небольшое повествование. Попить чайку, принять душ и заняться домашними делами … Всё это люди не хотят делать, пока загружается ваш сайт. По статистике, посетители покидают сайт, который грузится более 3 — х секунд. Я лично всегда так делаю, не жду, а перехожу на другой источник.
Как ускорить загрузку сайта
В этой статье мы рассмотрим 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 для WordPress
При использовании другой CMS установите модуль mod_cloudflare для Apache. Хотя это не обязательно, но полезно для регистрации реальных IP-адресов пользователей вашего сайта. CloudFlare — действительно очень удобный сервис. Согласитесь, защитить сайт, забыть о кешировании, установить статистику и не тратить нервы, если сайт недоступен, просто перенеся сайт на другие DNS — это здорово. А если почти всеми этими возможностями можно пользоваться бесплатно, то такой сервис — просто сказка 🙂
3. Оптимизация изображений
Оптимизация изображений заключается в конвертации картинок в определённый формат, что позволяет уменьшить их размер.
Многие владельцы сайтов пропускают этот пункт, поскольку предполагают, что те изображения, которые они публикуют, уже оптимизированы.
Один из самых удобных сайтов для конвертации JPG-изображений в PNG – Tiny PNG.
Веб-сервис 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 дней. Если файлы обновляются чаще, то нужно выбрать меньший период.
Использование браузерного кэширования
Чтобы включить браузерное кэширование на серверах на базе Apache, вы можете попробовать добавить код, подобный этому — https://gtmetrix.com/leverage-browser-caching.html , в файл .htaccess в корневом каталоге вашего сайта.
8. Использование алгоритма сжатия Gzip
Gzip – это способ загрузки страниц в сжатом формате, которые затем распаковываются и считываются браузером. Использование этого метода позволяет уменьшить общий размер файла и повысить скорость загрузки данных.
Вы можете включить сжатие Gzip так же, как браузерное кэширование. Просто добавьте следующий код в файл .htaccess в корневом каталоге вашего сайта:
Если вы используете 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. Этот вариант реализации AMP сложнее, чем предыдущий, а процесс в целом будет зависеть от того, какой тип сайта используется, сколько страниц он содержит и так далее.
wordpressmania.ru
9 советов, как ускорить работу сайта на WordPress
Всем нужно, чтобы их сайты загружались и работали как можно быстрее. Но это не будет происходить само по себе, особенно если сайт наполнен довольно тяжелым контентом и его посещает огромное количество людей. CMS WordPress — не образец идеально быстрой платформы, но есть способы, которые помогут ускорить загрузку сайта. Помните, что это влияет не только на лояльность посетителей, но и на место вашего сайта в поисковых результатах, так как Google использует время загрузки страниц как один из факторов ранжирования.
Проверить скорость загрузки сайта можно с помощью инструмента Google Page Speed, чтобы отследить степень влияния каждого шага, который мы разберем далее.
Оптимизация WordPress — советы
Выбор темы для WordPress
Тема, которую вы используете для сайта, играет одну из ключевых ролей в скорости его загрузки. Если вы планируете создать крупный сайт, рассчитанный на большое количество посетителей, рекомендуем выбирать тему, исходя из её “легкости”. Лучше всего вести поиск на WordPress-форумах и читать отзывы опытных пользователей, а также попробовать несколько разных тем на тестовой версии своего сайта. Если вы уже используете какую-то тему, но видите, что она не удовлетворяет вашим желаниям относительно скорости, то имеет смысл её поменять. Это будет вашим первым шагом в работе над тем, как ускорить сайт на WordPress.
Оптимизация изображений WordPress
Без изображений ваш сайт вряд ли обойдется, поэтому важно, чтобы они были оптимизированы.
Используйте изображения соответствующих размеров. Не загружайте большие картинки, чтобы потом масштабировать их под HTML. Убедитесь, что вы загружаете фотографии и другие изображения размером не больше, чем тот, который должен отображаться.
Удаляйте всю лишнюю информацию из фотографий (дата создания, камера, GPS- координаты и прочее, что можно найти в свойствах файла). С этим вам поможет плагин для оптимизации изображений WordPress WP Smush.it.
Ускорить WordPress помогут CSS-спрайты — техника CSS, которая позволяет объединить все элементы дизайна на странице в одно изображение. В результате вместо того, чтобы загружать множество отдельных изображений, каждый раз делая HTTP-запрос, сайт откроет одно изображение. Использовать CSS-спрайты можно в том случае, если текущая тема вашего сайта их поддерживает.
Существует множество плагинов, которые помогут вам уменьшить размер изображений. Например, EWWW Image Optimizer или уже упомянутый WP Smush.it. Можно использовать и сторонние сервисы для уменьшения размера картинок. Например, сервис Tinyjpg отлично уменьшает размер изображений без потери качества.
Покажем, как обработать все ваши изображения С EWWW Image Optimizer всего в несколько кликов:
После того, как вы установили и активировали плагин, зайдите в администраторскую панель WordPress и перейдите в меню Медиафайлы >> Массовая оптимизация:
Вы увидите опцию для оптимизации всех изображений в библиотеке. Нажмите кнопку “Начать оптимизацию”.
Если вам нужно оптимизировать изображение вне библиотеки медиафайлов (например, графические элементы активной темы), воспользуйтесь кнопкой “Сканировать и оптимизировать”.
Важно: плагин позволяет определять степень сжатия изображений. Например, если у вас фотоблог, то очень хорошо оптимизированные изображения потеряют качество.
Сжатие файлов
Оптимизация сайта WordPress возможна и через сжатие файлов. Если вы пользуетесь хостинговой панелью cPanel, то можете воспользоваться меню “Оптимизировать веб-сайт”.
Пользоваться им очень легко: просто выберите опцию “Сжать все содержимое” и нажмите “Обновить параметры”. Таким образом все файлы вашего сайта сожмутся. Если же вы хотите сжать только определенный тип файлов, то воспользуйтесь опцией “Сжать указанные типы MIME”.
Кэширование браузера
Используя .htaccess файл вашего сайта, вы можете настроить период хранения статического контента (CSS, Javascript, изображение и прочее) в браузерах. Это значительно сократит время загрузки вашего сайта для постоянных посетителей.
Откройте .htaccess файл, расположенный в корневой директории сайта, и добавьте следующий код:
ExpiresActive on
ExpiresByType image/jpg «access plus 60 days»
ExpiresByType image/png «access plus 60 days»
ExpiresByType image/gif «access plus 60 days»
ExpiresByType image/jpeg «access plus 60 days»
ExpiresByType text/css «access plus 2 weeks»
ExpiresByType image/x-icon «access plus 2 weeks»
ExpiresByType application/pdf «access plus 1 month»
ExpiresByType audio/x-wav «access plus 1 month»
ExpiresByType audio/mpeg «access plus 1 month»
ExpiresByType video/mpeg «access plus 1 month»
ExpiresByType video/mp4 «access plus 1 month»
ExpiresByType video/quicktime «access plus 1 month»
ExpiresByType video/x-ms-wmv «access plus 1 month»
ExpiresByType application/x-shockwave-flash «access 1 month»
ExpiresByType text/javascript «access plus 2 weeks»
ExpiresByType application/x-javascript «access plus 2 weeks»
ExpiresByType application/javascript «access plus 2 weeks»
Срок хранения можно изменить в зависимости от ваших требований.
Важно: перед внесением любых правок в .htaccess сделайте бэкап этого файла. Если с файлом .htaccess что-то пойдет не так, сайт не будет работать.
Кэширование WordPress
Такие плагины значительно улучшат скорость загрузки страниц. Самые популярные — W3 Total Cache и WP Super Cache. Главное отличие между ними — это то, что W3 Total Cache поддается более гибкой настройке.
Рассмотрим пример настройки W3 Total Cache:
После того, как вы установили плагин, в панели управления WordPress перейдите в меню Плагины >> Установленные >> W3 Total Cache >> Settings.
Важно: если вы являетесь пользователем виртуального хостинга, помните, что все возможные варианты кэширования не должны быть включены одновременно (избегайте использовать опцию Toggle all caching types on or off (at once)). Если Object caching и Database caching включены, они могут вызвать проблемы с использованием ресурсов вашего хостингового аккаунта без улучшения скорости загрузки страницы. Но если ваш сайт находится на VPS или выделенном сервере, то вас это не коснется.
В меню Settings включите следующие опции:
И после этого нажмите на кнопку “Save All Settings”.
Используя плагин кэширования для WordPress, сайт будет загружаться быстрее.
Использование CDN
CDN — это сеть доставки контента, которая состоит из серверов, копирующих ваш сайт по всем своим локационным пунктам. Когда ваши посетители делают запрос к сайту, ближайший к ним сервер отдает контент, что значительно сокращает скорость ответа в сравнении с обращением к главному датацентру хостинг-провайдера.
Одним из самых популярных сервисов CDN является Cloudflare. Именно его мы и советуем использовать нашим клиентом и предлагаем вместе со всеми пакетами виртуального хостинга.
Все остальные пункты ниже влияют не так влияют на скорость загрузки страницы, как на оптимизацию использования ресурсов и общий пользовательский опыт, поэтому они не менее важны.
Оптимизация домашней страницы
Первое, что люди видят на вашем сайте — это домашняя страница. А если пользователь попал сразу на какую-то другую страницу, то всё равно многие переходят после этого на главную. Несколько советов по оптимизации домашней страницы:
- Не добавляйте слишком много виджетов. Используйте только те, которые вам действительно нужны. Также они не должны быть слишком тяжелыми.
- Если у вас блог, то не выводите на главную страницу полное содержание новых постов. Делайте превью поста со ссылкой “Читать далее”.
- Не выводите больше десяти постов на главную страницу.
Настройка LazyLoad — отложенная загрузка изображений
LazyLoad — плагины, которые помогают осуществлять отложенную загрузку изображений. Это актуально для сайтов, на которых изображений очень много. Загрузка изображения начинается только тогда, когда пользователь долистывает до определенного места на странице. Следовательно, если на странице есть изображение в самом конце, а пользователь просто не долистал до этого места, то загрузка изображения не произойдет. Пример такого плагина — jQuery Image Lazy Load.
Конечно, вы не увидите зрительного эффекта от этого плагина, но он может уменьшить потребление серверных ресурсов вашим сайтом, загружая меньше информации для пользователей, которые пролистывают страницы не полностью.
Включение защиты от хотлинкинга
Если прямая ссылка на изображение, которое находится на вашем сервере/сайте, помещается на какой-нибудь другой сайт, то каждый раз, когда кто-то открывает это изображение, запрос будет идти на ваш сервер и потреблять ресурсы вашего аккаунта. Решением этой проблемы станет полная блокировка таких запросов.
Если вы являетесь пользователем cPanel, вы можете воспользоваться встроенной опцией “Защита Hotlink”.
Также вы можете включить защиту от хотлинкинга при помощи .htaccess кода:
RewriteEngine On При помощи этого кода ваш сервер проверяет, откуда именно пришел запрос: если со страниц вашего сайта, то он отдаст изображение пользователю без проблем; если же с чужого сайта – то сервер показывает изображение с ошибкой (nohotlink.jpg – любое изображение, которое вы захотите использовать с этой целью). Вот и все! Это те базовые опции по оптимизации сайта на WordPress, которые не потребуют от вас много времени, но смогут улучшить работу вашего сайта. Если нужен хороший хостинг для сайта на WordPress с чистыми SSD, бесплатным доменом и другими приятностями, вам сюда: hostiq.ua
RewriteCond %
RewriteRule .*.(jpe?g|gif|bmp|png)$ /images/nohotlink.jpg [L]