WordPress скорость загрузки: Ускорение WordPress. Тотальный разбор плагинов для кэширования. Личный опыт (часть 1) / Хабр

Как ускорить сайт на WordPress: пошаговое руководство

1 Августа 2016

Технологии

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

Впрочем, многие веб-мастеры хотели бы улучшить скорость своего сайта, но у большинства из них недостаточно технических знаний и опыта. Если история вам знакома, а сайт написан на WordPress, то это подробное руководство по оптимизации скорости для вас. Предлагаем ознакомиться с пошаговыми рекомендациями, следуя которым авторы статьи улучшили скорость работы своего сайта (www.maketecheasier.com).

   

Уменьшите вес сайта

 

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

1. Пересмотрите дизайн темы сайта

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

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

2. Избавьтесь от ненужных плагинов

Существует два основных типа плагинов для WordPress: первый тип воздействует только на область администрирования, а второй позволяет добавлять контент на сайт. Что касается последнего типа, то такие плагины всегда сопровождаются дополнительными javascript и css файлами, которые добавляют веса вашему сайту.  

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

3. Сократите размер HTML, CSS и Javascript файлов

Существует два способа уменьшения общего размера сайта. Первый – объединить разные стили и javascript файлы в один. И второй – уменьшить файлы. Уменьшение в данном случае означает удаление ненужных пробелов, комментариев и объединение многочисленных повторяющихся кодов в один. Для этого вы можете использовать плагин W3 Total Cache

На странице настроек плагина W3 Total Cache в общих настройках («General Settings») установите режим «Minify». 

Далее зайдете в «Minify», выберите раздел «HTML & XML» и отметьте галочками пункты «Enable», «Inline CSS Minification», «Inline JS Minification» и «Remove line break» 

Затем идем в раздел “JS minification”. Это заковыристая настройка, так как работает для одних тем и не работает для других. Автору не повезло с этими настройками, но вы можете попробовать и посмотреть, применимо ли это для вашего сайта. 

Единственное, что можно порекомендовать для этих настроек, это использовать «Minify» вместо «Combine only». Объединение нескольких javascript файлов вместе, может привести к нежелательным последствиям и поломать сайт. 

Последнее, что нужно настроить это раздел «CSS minification». Данные настройки позволят вам уменьшить и объединить все CSS файлы, используемые в теме. 

Чтобы получить наилучший эффект, откройте исходный код, скопируйте все CSS ссылки в поле «File URL» в разделе «CSS file management». Все скопированные, таким образом, CSS файлы будут уменьшены и объединены в один. 

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

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

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

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

• закэшируйте сайт
• настройте кэш в браузере
• переключитесь на jquery от Google
• используйте отложенную загрузку javascript
• используйте отложенную загрузку изображений
• используйте асинхронный javascript
• используйте CDN

А вот плагины, которые сделают за вас всю работу, описанную выше. 

1. W3 Total Cache

В предыдущем разделе мы рассмотрели тему минимизации, а здесь поговорим о плагине W3 Total Cache. Особенным этот плагин делает модуль кэширования. Сначала, включите модуль «Page Cache» в разделе общих настроек («General Settings»). Если ваш сайт расположен на виртуальном хостинге, то для режима кэширования страницы («Page cache mode») выберите «Disk: Basic». Если вы используете VPS или выделенный сервер, выберите «Disk: Enhanced».  

Прокрутите вниз страницы до раздела «Browser Cache» и установите галочку для активации. 

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

2. WP Deferred Script

Большинство javascript файлов блокируют загрузку, это означает, что сайт будет ждать до тех пор, пока все javascript файлы не будут обработаны, и только после этого загpузится контент. Это явление также известно как синхронная загрузка. Один из способов борьбы с этой особенностью – размещение javascript файлов внизу страницы. В этом случае, они будут загружаться только после того, как завершится загрузка контента.
WP Deferred Script – полезный плагин, который перемещает все стоящие в очереди скрипты вниз страницы. Он основан на lab.js и будет работать с большинством плагинов.

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

3. Jetpack Photon

Другой хороший способ улучшения скорости – это загрузка всех изображений через CDN. Если у вас уже установлен jetpack плагин, активируйте Photon module, который автоматически включит CDN для изображений на вашем сайте. 

Если вы используете внешний CDN, такой как, например, MaxCDN или Amazon CloudFront, то в качестве альтернативы, вы можете настроить CDN модуль в плагине W3 Total Cache. 

4. Отложенная загрузка

Вы когда-нибудь замечали, как загружаются изображения, когда вы прокручиваете страницу вниз? Такое явление называется отложенной загрузкой и это еще один хороший способ улучшить скорость сайта. Плагин, который используется на сайте автора www.maketecheasier.com, называется Unveil Lazy Load, но если вы зададите в поиске запрос «lazy loading», то вы найдете большое количество вариантов плагинов, которые можете использовать.

Некоторые из них даже оптимизированы для видео и iframe. 

5. Google DFP (DoubleClick for Publishers)

Если вы используете рекламу на сайте, то должны знать, что она часто загружается дольше всего и может служить причиной медленной работы сайта. Самое скверное, что в большинстве случаев реклама загружается синхронно и блокирует обработку контента. Избавиться от этой проблемы можно за счет размещения рекламы в Google DFP . Для тех, кто не знает, Google DFP это программа для управления рекламными объявлениями. 

На сайте автора www.maketecheasier.com используется скрипт jquery.dfp.js, для загрузки всех DFP тегов по запросу. В результате, загрузка сайта не замедляется. Реализация может оказаться довольно сложной и поэтому, автор статьи не стал рассматривать ее здесь. Если вам интересно, то пишите об этом в комментариях к оригиналу статьи, и вам составят детальное пошаговое руководство по реализации на вашем сайте.

Заключение

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

Перевод: Анна Лебедева 

Оригинал статьи: maketecheasier.com

Также в журнале

Обзоры

5 Марта 2023

Хранилище на базе Ceph: что нужно знать для эффективного использования

Новости

16 Января 2023

VPS «Сервер без забот»: традиционный комфорт и непревзойденное качество в сочетании с новыми преимуществами от Rusonyx

Новости

29 Декабря 2022

Поздравление с Новым Годом!

Как Увеличить Скорость Загрузки Сайта на WordPress за 20 Минут

Joshua Hardwick

Глава отдела контента в Ahrefs (проще говоря, я отвечаю за то, чтобы каждый пост в блоге был КРУТЫМ).

Поделиться этой статьей

Содержание

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

В то же время обычным делом является медленная загрузка сайтов на WordPress.

Ниже я привожу отчет о скорости загрузки моей страницы на мобильном устройстве с PageSpeed Insights.

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

А вот отчет по той же странице, но всего через 20 минут оптимизации скорости загрузки:

И остальные страницы в Site Audit:

Разница налицо. Результат в отчете PageSpeed Insights почти идеален. Все страницы грузятся довольно быстро.

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

1. Избавьтесь от неиспользуемых плагинов
2. Переключитесь на DNS-сервис Cloudflare
3. Установите плагин кэширования
4. Минифицируйте код
5. Объедините файлы CSS и JavaScript
6. Устраните ресурсы, блокирующие отображение
7. Используйте отложенную загрузку изображений и видео
8. Оптимизируйте шрифты Google
9. Разрешите предварительную загрузку
10. Используйте CDN
11. Оптимизируйте изображения

Шаг 1. Избавьтесь от неиспользуемых плагинов

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

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

Шаг 2. Переключитесь на DNS-сервис Cloudflare

Сайты представляют собой файлы, размещенные на жестком диске (сервере), подключенном к интернету. Любое подключенное к интернету устройство имеет IP-адрес (например, 123.123.12.1).

IP-адреса сложно запоминать, поэтому доменные имена преобразовываются в IP-адреса при помощи службы DNS – системы доменных имен. Система работает по принципу телефонного справочника. Когда вы вводите имя домена в браузере, DNS осуществляет поиск IP-адреса.

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

Если это ваш случай, переключитесь на более быстрый DNS-сервис, например Cloudflare.

Для этой цели создайте бесплатную учетную запись Cloudflare. Нажмите Add a site (Добавить сайт), введите свое доменное имя и нажмите кнопку.

Выберите бесплатный план и нажмите Confirm plan (Подтвердить выбор плана).

Cloudflare предоставит возможность проверить настройки DNS, прежде чем продолжить. При отсутствии предупреждений можно продолжить.

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

Если вы пользуетесь сервисом Google Domains, процесс выглядит следующим образом:

Шаг 3. Установите плагин кэширования

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

Существует два типа кэширования:

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

Чтобы упростить кэширование, воспользуйтесь плагином WP Rocket. Приобретите, установите и включите плагин. По умолчанию включено базовое кэширование (на сервере и в браузере). Если ваш сайт имеет отзывчивый дизайн, перейдите к параметрам кэширования и установите флажок, чтобы включить кэширование для мобильных устройств.

Нужен бесплатный вариант? Попробуйте W3 Total Cache.

Шаг 4. Минифицируйте код

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

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

Если WPRocket не используется, установите и включите плагин Autoptimize и установите соответствующий флажок.

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

Шаг 5. Объедините файлы CSS и JavaScript

Большинство сайтов WordPress содержит множество файлов CSS и JavaScripts. Одни предназначены для тем, другие для плагинов. Вы также можете иметь пользовательские файлы.

Объединение этих файлов может ускорить загрузку, но это зависит от настроек вашего сервера.

• С HTTP/1.1 файлы CSS и JavaScript загружаются последовательно. Это значит, что сначала должен полностью загрузиться один файл и только после этого начнется загрузка следующего.
• С HTTP/2 файлы загружаются одновременно. Это значит, что одновременно могут начать загружаться несколько файлов CSS и JavaScript.

Если сервер использует протокол HTTP/1.1, при объединении файлов требуется загружать меньше файлов, а следовательно, скорость загрузки возрастает. Если используется протокол HTTP/2, объединение файлов вряд ли существенно изменит ситуацию, поскольку файлы и так загружаются одновременно.

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

Если не поддерживается протокол HTTP/2, файлы CSS и JavaScript стоит объединить.

Для этого установите в настройках плагина WPRocket флажки Combine JavaScript files (Объединить файлы JavaScript) и Combine CSS files (Объединить файлы CSS).

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

Шаг 6. Устраните ресурсы, блокирующие отображение

Отображение – это процесс преобразования кода в видимую веб-страницу.

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

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

Сделать это можно, отложив загрузку некритических файлов CSS и JavaScript, необходимых для отображения контента ниже области, видимой без прокрутки. В WPRocket установите флажки Load JavaScript deferred (Отложить загрузку JavaScript) и Optimize CSS delivery (Оптимизировать отправку CSS).

Если WPRocket не используется, вам потребуется установить два плагина: Autoptimize и Async JavaScript.

В настройках Autoptimize установите флажок Inline and Defer CSS (Встроить и отложить загрузку CSS). После этого в настройках Async JavaScript нажмите Enable Async JavaScript (Включить Async JavaScript).

Если ранее вы сталкивались с проблемой «устранения ресурсов, блокирующих отображение», в PageSpeed Insights, как правило, это действие ее решает.

Шаг 7. Используйте отложенную загрузку изображений и видео

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

Если используется плагин WPRocket, решить эту проблему можно, установив флажок Enable for iframes and videos (Разрешить для встроенных фреймов и видео) в настройках отложенной загрузки.

Если WPRocket не используется, того же можно добиться, установив плагин Lazy Load for Videos.

Шаг 8. Оптимизируйте шрифты Google

Многие темы используют шрифты Google. Шрифты необходимо загружать с сервера Google при каждом посещении сайта. На это может уходить много времени, потому что серверу требуется отправлять HTTP-запросы, загружать CSS файл, а затем шрифт из указанного в таблице стилей места. Эти действия выполняются для каждого шрифта на странице.

Плагин WPRocket автоматически оптимизирует запросы шрифтов Google. Неплохим вариантом также является плагин Swap Google Fonts Display.

Шаг 9. Разрешите предварительную загрузку

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

Допустим, ваш код имеет следующий вид:

<html> 
<head> 
<script type=”text/javascript” src=”somefile.js”></script>
<link rel=”stylesheet” href=”/style. css”>
</head>
<body>
Content
</body>
</html> 

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

Простейшим способом решить эту проблему будет добавление еще одной строки кода:

<link rel="preload" href="/style.css" as="style">

Браузер получит указание в первую очередь загружать файл CSS, а уже после – файл JavaScript независимо от иерархии.

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

Шаг 10. Используйте CDN

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

К примеру, ваш веб-сервер находится в Великобритании. Если ваш сайт посещает пользователь из США, а вы не используете CDN, то соединение между устройством пользователя и вашим сервером будет медленным. Если на сайт зашел пользователь из США и CDN используется, то устройство пользователя будет подключено к ближайшему серверу и соединение будет установлено быстрее.

Существует множество CNS-провайдеров. Все, что требуется, – выбрать одного из них, подключить в WPRocket и ввести CNAME.

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

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

Чтобы решить эту проблему, обеспечьте сжатие изображений при помощи плагина, например Shortpixel. Просто установите и включите плагин, перейдите к настройкам, введите API-ключ, нажмите Save and Go to Bulk Process (Сохранить и перейти к групповому процессу), а затем нажмите Restart optimizing (Перезапуск оптимизации).

Если качество изображений слишком низкое, откройте настройки и измените тип сжатия на Glossy (Лучшее качество) или Lossless (Без потери качества).

Результаты

Посмотрим, как оптимизация повлияла на скорость загрузки нашей страницы, при помощи нескольких популярных инструментов.

Можете ознакомиться с отчетами PageSpeed Insights для моего поста до и после оптимизации:

А это – данные GTMetrix:

Можно увидеть, что ранее страница и полностью загружалась за 5,9 секунды, ее размер составлял 1,89 МБ, а число запросов – 67. После оптимизации все три значения сократились. Размер страницы составляет 695 килобайт, время полной загрузки – 4 секунды, а количество запросов сократилось примерно на 50 %.

Если проверить все страницы при помощи сервиса Site Audit от Ahrefs, мы увидим, что в среднем показатели улучшились на 40 % и в 95 % случаев повысилась скорость загрузки.

Заключение

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

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

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

В руководстве пропущены важные моменты? Сообщите мне об этом в Twitter.

Перевела Кирик Наталья, владелец контент агентства WordFactory.ua

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

Независимо от цели вашего веб-сайта, медленные веб-страницы сразу же отпугнут посетителей.

Быстрая загрузка, также известная как «производительность сайта», необходима для удобного взаимодействия с пользователем в Интернете. В 2019 году индекс средней скорости (или сколько времени в среднем требуется веб-странице для отображения видимых элементов) составлял около шести секунд. И даже этот промежуток времени испытывает наше терпение. На мобильных устройствах увеличение времени загрузки с одной секунды до шести секунд более чем удваивает показатель отказов.

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

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

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

Что такое ленивая загрузка?

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

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

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

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

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

Источник

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

Что такое жадная загрузка?

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

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

Источник

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

Отложенная загрузка и нетерпеливая загрузка

При нетерпеливой загрузке все содержимое веб-страницы создается как можно быстрее, а отложенная загрузка задерживает отображение второстепенного содержимого. Отложенная загрузка — отличный вариант для больших файлов страниц с большим количеством содержимого. Тем не менее, более простые страницы с заданным объемом текста и небольшим количеством изображений и/или видео должны подвергаться быстрой загрузке.

Когда использовать отложенную загрузку

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

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

Применение ленивой загрузки к содержимому страницы имеет много потенциальных преимуществ:

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

Когда использовать ускоренную загрузку

Ленивая загрузка может дать вашему сайту некоторые важные преимущества, но не всегда. Иногда лучше выбрать олдскульный подход к загрузке «все сразу» — нетерпеливую загрузку. К таким случаям относятся:

Все содержимое отображается в верхней части страницы

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

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

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

Если на вашей веб-странице мало тяжеловесного контента

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

• Слишком сильная динамическая загрузка на вашей странице вызывает прерывания и нарушает работу ваших посетителей.
•  Скрытие большого количества контента может навредить поисковой оптимизации. Если определенный контент не отображается, есть вероятность, что он не будет проиндексирован поисковыми системами. Чтобы убедиться, что Google правильно читает ваш сайт, ознакомьтесь с их руководством по отложенной загрузке контента.
• Ленивая загрузка подразумевает изменение кода вашего веб-сайта. Вам потребуются ресурсы и/или время, чтобы внести эти изменения и протестировать их.

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

Как реализовать ленивую загрузку для ваших изображений

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

Используйте надстройку

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

Используйте HTML-атрибут «загрузка»

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

 
 // ленивая загрузка изображения 
 
  
 
   
 
 // нетерпеливо загружает изображение 
 
  
 
   
 
 // зависит от поведения загрузки браузера (у того же нет атрибута «загрузка») 
 
  
 

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

 

15 способов ускорить работу WordPress

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

Зачем вам ускорять WordPress?

Существует множество веских причин ускорить работу WordPress, но три из перечисленных ниже актуальны практически для всех сайтов WordPress:

1. Поисковые системы (такие как Google) ранжируют сайты с быстрой загрузкой выше, чем сайты с медленной загрузкой. Итак, если вы хотите улучшить свою позицию в поисковой выдаче, повышение производительности вашего сайта WordPress должно быть одним из ваших приоритетов.
2. Исследования показали, что скорость загрузки сайта более 2 секунд обычно приводит к тому, что около 47 процентов посетителей уходят с веб-сайта. Итак, чтобы поддерживать интерес примерно половины ваших посетителей, вы должны ускорить свой WordPress.
3. Интернет-покупатели самые нетерпеливые — они ожидают, что страница загрузится в течение секунды. Итак, если вы управляете интернет-магазином на WordPress, то поговорка «время — деньги» как нельзя более применима. Продолжайте читать, чтобы узнать, как ускорить загрузку веб-сайта и в результате превратить этих потенциальных покупателей в платящих клиентов.

Ищете способы оптимизации своего веб-сайта?

Как проверить время загрузки вашего сайта?

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

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

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

1. WebPageTest. org
2. Tools.Pingdom.com
3. PageSpeed ​​Insights (на самом деле это не сообщает о времени загрузки страницы, но выделяет элементы, которые вы можете настроить для ускорения WordPress)

Ладно, самое время поговорить о деле!

Вот 15 способов ускорить сайты WordPress:

• Выбрать лучшего хостинг-провайдера
• Использовать облегченную тему/фреймворк WordPress
• Сократить файлы JS и CSS
• Использовать плагин кэширования
• Проверить PHP
• Уменьшение размеров изображений с помощью плагина
• Загружайте изображения в формате WebP вместо JPEG или PNG
• Избегайте загрузки видео напрямую в WordPress
• Use a content delivery network (CDN)
• Enable GZIP compression
• Cleanup WordPress database
• Deactivate or uninstall plugins
• Keep external scripts to a minimum
• Disable pingbacks and trackbacks
• Use premium DNS

1.

Выберите лучшего поставщика веб-хостинга

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

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

К счастью, индустрия веб-хостинга продвинулась вперед благодаря технологиям, и цены провайдеров облачного хостинга с течением времени снизились. В настоящее время вы можете купить выделенные облачные серверы у SiteGround, DigitalOcean, Amazon Web Services и даже Google Compute Engine по номинальной цене. Однако настройка этих серверов может быть сложной задачей, поскольку вам необходимо настроить серверы с нуля. Есть провайдеры веб-хостинга, такие как Cloudways, которые упрощают настройку оптимизированных облачных серверов.

2. Используйте легкую тему/фреймворк WordPress

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

Лучше всего использовать легкую тему. Одним из решений является использование одной из тем WordPress по умолчанию. Другой — попробовать что-то вроде Neve, нашей собственной темы, и нет, мы не просто рекомендуем ее, потому что мы ее создали. Neve действительно удивительная, легкая тема. Тот факт, что он был установлен на более чем 300 000 сайтов WordPress, является тому подтверждением. Как и тот факт, что его средний рейтинг в репозитории WordPress составляет пять звезд из пяти. Наконец, мы не можем скрыть его невероятно быстрое время загрузки при проведении строгих тестов производительности (например, Pingdom, PageSpeed ​​Insights), о которых мы упоминали ранее. Проще говоря: использование Neve определенно ускорит работу WordPress для вас.

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

3. Сократите размер файлов JS и CSS

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

Кроме того, если вы разбираетесь в темах WordPress, вы можете изучить руководства, предоставленные Google, и выполнить некоторые исправления вручную. Если нет, то есть плагины, которые помогут вам достичь этой цели. Наиболее популярным из них является Autoptimize. Это может помочь вам оптимизировать CSS, JS и даже HTML вашего сайта WordPress.

4. Используйте расширенные механизмы кэширования с подключаемым модулем кэширования

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

5. Проверьте версию PHP, чтобы ускорить работу WordPress

PHP — это язык сценариев, на котором работает WordPress на вашем веб-сервере. Вы можете думать об этом как о «клее» вашего сайта WordPress, потому что он скрепляет все вместе.

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

• Современный PHP = WordPress загружается быстрее
• Устаревший PHP = WordPress загружается медленнее

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

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

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

6. Оптимизируйте изображения с помощью плагина

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

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

Одним из таких плагинов является Optimole, у которого есть очень щедрая опция freemium, которая наверняка улучшит скорость вашего сайта WordPress.

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

7. Рассмотрите возможность использования WebP вместо JPEG или PNG

Если вы еще не знакомы с WebP, нетехническое объяснение заключается в том, что это формат изображения меньшего размера по сравнению с его более известными аналогами — JPEG и PNG.

Немного более техническое объяснение, любезно предоставленное Google:

Изображения WebP без потерь на 26% меньше по размеру по сравнению с PNG. Изображения WebP с потерями на 25-34% меньше, чем сопоставимые изображения JPEG с эквивалентным индексом качества SSIM.

Почему это важно для ускорения работы WordPress?

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

Чтобы преобразовать файлы JPEG и PNG в WebP, вы можете использовать бесплатный инструмент, предоставляемый Google, а затем повторно загрузить их на свой сайт WordPress. В качестве альтернативы, опять же, вы можете установить плагин Optimole, который будет конвертировать ваши изображения в WebP на лету, а затем автоматически использовать наиболее оптимизированный формат. Если браузер посетителя не поддерживает WebP, будет показана обычная версия изображения в формате JPEG или PNG. Это означает, что вы можете получить все преимущества скорости сайта при использовании WebP, но без ручного труда. Это один из самых простых способов ускорить WordPress!

8. Избегайте загрузки видео напрямую в WordPress

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

Однако проблема с видео заключается в том, что размер файла обычно огромен . Для сравнения учтите, что мы только что обсудили оптимизацию изображений для ускорения работы WordPress. Теперь подумайте о том, что изображения измеряются в мегабайтах и ​​килобайтах, тогда как видео часто может достигать размера в гигабайты*. Представьте, что вы оптимизируете все изображения в одном из своих сообщений в блоге, чтобы уменьшить его вес на 15 мегабайт. Вы проверяете время загрузки страницы, и оно значительно быстрее. Вы счастливы, насколько это возможно.

Затем вы решаете загрузить 200-мегабайтное видео прямо в тот же пост (через медиатеку WordPress). Вы можете видеть, куда это идет.

К счастью, есть простое решение этой проблемы: загрузить видео на внешний видеосайт, такой как YouTube или Vimeo. Затем вы можете получить код для встраивания с любого стороннего видеосайта, на который вы загрузили свое видео, и встроить видео в свой пост, используя этот код. Если вы планируете добавлять какие-либо видео на свои страницы, то это абсолютно необходимо для обеспечения хорошей скорости сайта WordPress.

*1000 мегабайт / 1 000 000 килобайт = один гигабайт

9. Используйте CDN для ускорения WordPress

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

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

Другими словами, основной функцией CDN является предоставление веб-страницы посетителю из ближайшего возможного местоположения, что помогает поддерживать скорость загрузки сайта на минимально возможном уровне. Cloudflare и MaxCDN (StackPath) являются одними из самых популярных сервисов CDN.

10. Включить сжатие GZIP

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

Вы можете использовать плагин, такой как PageSpeed ​​Ninja, который включает сжатие GZIP, или добавить следующие коды в файл .htaccess.

 
  AddOutputFilterByType DEFLATE текстовый/обычный
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
Приложение AddOutputFilterByType DEFLATE/xml
Приложение AddOutputFilterByType DEFLATE/xhtml+xml
Приложение AddOutputFilterByType DEFLATE/rss+xml
Приложение AddOutputFilterByType DEFLATE/javascript
Приложение AddOutputFilterByType DEFLATE/x-javascript  
 

11.

Очистка базы данных WordPress

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

12. Деактивировать или удалить плагины

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

IFTTT или Zapier — это две веб-службы, которые помогают автоматизировать такие задачи и снижают нагрузку на ресурсы вашего веб-сайта и сервера.

13. Сведите внешние сценарии к минимуму

Использование внешних сценариев на ваших веб-страницах увеличивает общее время загрузки большого количества данных. Таким образом, лучше всего использовать небольшое количество скриптов, включая только самые необходимые, такие как инструменты отслеживания (например, Google Analytics) или системы комментирования (например, Disqus).

14. Отключите пингбэки и трекбеки, чтобы ускорить работу WordPress

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

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

Выключить все это можно в WP-Admin → Настройки → Обсуждение . Просто снимите флажок « Разрешить уведомления о ссылках из других блогов (обратные ссылки и обратные ссылки). ” Это поможет вам еще больше ускорить WordPress.

15. Используйте премиум-DNS

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

Например, вы могли попасть на эту статью, потому что использовали google.com для поиска «как ускорить WordPress» или что-то подобное. Теперь в вашем мозгу веб-сайт Google — это то, что почти повсеместно известно всем остальным людям. Хотите верьте, хотите нет, но ваш компьютер не идентифицирует Google так, как это делаем мы. На вашем компьютере Google не находится в google.com , он находится на одном из нескольких IP-адресов, некоторые из которых вы можете увидеть ниже:

связывается с серверами имен домена, которые в ответ возвращают соответствующий IP-адрес. Затем он соединяет вас. Если сервер имен веб-сайта недоступен, ваш браузер не сможет найти IP-адрес для отображения веб-сайта.

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

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

Наверх

Заключительные мысли о том, как ускорить работу WordPress

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

Если вы еще не завели блог, посмотрите это руководство: как сделать сайт на WordPress. Это отличный ресурс, который предлагает пошаговые руководства по созданию личного или профессионального блога.