Повышаем производительность WordPress

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

WordPress – отличная CMS, которая поможет вам легко создавать красивые веб-сайты или блоги без необходимости платить веб-разработчику. Проблема с WordPress в том, что она может стать очень медленной из-за многих факторов. Новая установка WordPress, использующая одну из тем по умолчанию и минимум плагинов, может очень быстро загружаться и получать хорошие оценки Google Speed и Yahoo! YSlow.

Это пример чистого блога, использующего тему по умолчанию.

Значение слева – это показатель Google Page Speed, а значение справа – показатель Yahoo! YSlow. Двойной A – зеленый 97% и 87%. Время загрузки страницы составляет 0,9 секунды. Если вы получаете высокие баллы, подобные этим, вы можете гордиться собой, и ваши посетители могут быть счастливы!

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

Экономия на стоимости хостинга

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

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

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

Для повышения скорости работы сайтов обычно выделяются три основные категории:

  1. Hardware

  2. Software

  3. Network

Мы сосредоточимся на программной части. Программное обеспечение включает в себя два основных аспекта: бэкэнд и Фронтэнд. Бэкэнд включает в себя оптимизацию баз данных и серверного код, такого как PHP и Java. Тем не менее, мы приложим максимум усилий для оптимизации внешнего интерфейса. Они включают в себя HTML, изображения, JavaScript и CSS-файлы и составляют 90% времени, необходимого для загрузки веб-сайта!


[bs_notification type=”danger” dismissible=”false”]Пожалуйста, создайте резервную копию WordPress перед началом процесса оптимизации. Это очень важно!!![/bs_notification]

Тест скорости WordPress

Прежде чем приступить к оптимизации производительности, запишите текущие данные, в том числе время загрузки страниц. (Список ресурсов для измерения скорости загрузки сайта вы можете найти ниже). Это поможет вам определить, насколько эффективны настройки производительности.

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

Neustar

  1. Зайдите на страницу http:// browsermob.com/ free-website-performance-test

  2. Введите ссылку на страницу которую вы хотите протестировать

  3. Run Instant Test

  4. Сохраните результат в PDF

GT Metrix

  1. Зайдите на страницу http://gtmetrix.com/

  2. Введите ссылку на страницу которую вы хотите протестировать

  3. Сохраните получившейся результат

Google Page Speed Online

 

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

Оптимизация изображения очень важна для ускорения вашего блога. Изображения в вашем блоге, могут быть слишком велики для настольных и мобильных устройств. Даже если вы тщательно сохранили свои изображения для Интернета с помощью Photoshop, Gimp, Acorn или другого графического программного обеспечения, вы будете удивлены, увидев, сколько килобайт вы все еще можете сохранить с помощью метода, который я собираюсь вам показать. Надеюсь, вам не придется оптимизировать каждое изображение отдельно. Это было бы огромной работой, особенно если у вас уже есть тысячи изображений в вашем блоге.

Вам нужно решение, которое может оптимизировать ваши существующие изображения в медиабиблиотеке, но также и любые новые изображения, которые вы загружаете автоматически. Решение заключается в использовании плагина под названием «EWWW Image Optimizer».

EWWW Image Optimizer

Есть несколько плагинов, которые делают то же самое, но EWWW один из лучших.

Преимущества использования EWWW Image Optimizer:

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

  • Вы можете оптимизировать сотни изображений всего за несколько минут.

  • Вы можете оптимизировать любое изображение в WordPress, включая те, которые не находятся в библиотеке медиафайлов, например, изображения темы.

По умолчанию EWWW Image Optimizer использует методы оптимизации без потерь, поэтому качество изображения будет точно таким же до и после оптимизации. Единственное, что изменится – это размер вашего файла.

Установка EWWW Image Optimizer

Установите плагин (Плагины -> Добавить новый)

Давайте посмотрим на «Базовые настройки».

Единственное, что вам нужно сделать, это проверить «Remove metadat» и ввести «Bulk Delay», которая будет работать на вашем сервере. Если ваш блог работает на Шаред хостинге, вы можете выбрать 5, 6 или 10 секунд. Если же ваш блог работает на VPS или выделенном сервере, паузы в 3 секунды должно быть достаточным.

Игнорируйте «Cloud Settings», «Advanced Settings» и «Conversion Settings», так как их настройки по умолчанию удовлетворят большинство пользователей.

Оптимизация изображений из медиабиблиотеки

Существует два способа оптимизации существующих изображений.

Первый способ. Перейдите в «Media Library» и оптимизируйте каждое изображение по одному. Нажмите «Библиотека». Обратите внимание: в «Медиабиблиотеку» добавлен новый раздел «Оптимизатор изображений». На снимке экрана выше показано, что исходные изображения не обрабатывались и указывают размер каждого изображения. Давайте нажимаем ссылку «Optimize now!» И посмотрим, что произойдет.

Как вы видите, изображения были уменьшены на 2,1%, что составляет экономию в 42,7 KB.

Другой способ оптимизации изображений из медиабиблиотеки – выбрать изображения, которые вы хотите, и выбрать опцию «Bulk Optimize» и нажать «Apply».

Массовая оптимизация изображений

В меню «Медиафайлы» выберите «Bulk Optimize».  Введите длительность паузы между обработкой изображений и нажмите «Start optimizing». Оптимизация начинается сразу. Каждое изображение, имеющееся в вашей медиабиблиотеке, имеет копии самого разного размера, и все они оптимизируются в случае необходимости.

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

  • Некоторые изображения уменьшены, а некоторые нет. Небольшие изображения в большинстве случаев не уменьшаются, потому что оптимизировать нечего.

  • Вы можете видеть ход оптимизации и можете остановить процесс в любое время, нажав кнопку «Stop Optimizing».

На той же странице «Bulk Optimize» найдите эту область и нажмите «Scan and optimize».

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

Будьте внимательны при добавлении слишком большого количества изображений

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

Всегда определять атрибуты widht и height изображений

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

Всегда показывать размер изображений

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

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

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

Используйте правильные форматы изображений

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

Лучшие форматы: PNG 8/24 бит, JPEG, GIF (когда изображение действительно мало). Иллюстрации и графика с меньшим количеством цветов отлично работают с PNG 8 бит. Фотографии и изображения, содержащие больше цветов, обычно должны быть сохранены в формате JPEG.

Есть программное обеспечение для оптимизации изображений.

 



2020-12-04T19:48:13
Без рубрики