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

И вы знаете, что делает это хуже? Плагины.

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

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

Какое решение?

WP Rocket может помочь решить эти проблемы очень эффективно и является одним из основных элементов нашей оптимизации производительности здесь, в Compete Themes.

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

Начнем с самой важной функции – кэширования.

1. Кеширование

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

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

Как кеширование помогает?

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

Думайте о кешировании так:

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

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

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

Настроить кеширование

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

Вы также можете использовать кеш для зарегистрированных пользователей, если у вас есть сайт участника и вы можете включить кеширование для SSL (необходимо, если ваш сайт использует «https: //»).

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

2. Оптимизация файлов

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

Базовые настройки

Первый вариант позволяет вам «минимизировать» HTML вашего сайта, что это значит?

Минификация

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

Если вы посмотрите исходный код любой страницы здесь, в Compete Themes, вы увидите, как минимизация WP Rocket повлияла на HTML:

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

Готовы выучить свой следующий технический термин?

Конкатенация

Еще одна интересная функция в основных настройках – это возможность комбинировать файлы Google Fonts. Большинство тем WordPress используют Google Fonts, поэтому вы, вероятно, загружаете один или два шрифта оттуда. Этот процесс объединения файлов называется «объединением».

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

Для обзора минимизация уменьшает размер файлов, а объединение объединяет их. С меньшим количеством меньших файлов ваш сайт будет загружаться быстрее. Эти два процесса великолепны по производительности, и ни один плагин не справляется с ними лучше, чем WP Rocket.

CSS файлы

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

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

Оптимизировать CSS Доставка также может помочь вашей нагрузки на сайт визуально быстрее, чем без него.

Файлы JavaScript

Точно такие же параметры минимизации и конкатенации доступны и для файлов Javascript.

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

Оптимизировать без ошибок

Сокращение JS-файлов обычно не является проблемой, но когда вы объединяете их, иногда вы можете нарушить функциональность вашего сайта. Вот что нужно сделать …

Активируйте параметры минимизации и конкатенации, а затем очистите кэш своего сайта с помощью WP Rocket. Тогда зайдите на свой сайт и сделайте все . Попробуйте кнопки «Поделиться» в социальных сетях, просмотреть посты и страницы, протестировать мобильное меню и т.д. Если все работает хорошо, тогда все готово.

Существует также возможность «отложить» файлы Javascript. Это позволяет вашему сайту визуально отображаться на экране до завершения загрузки файлов Javascript. Если вы включите эту опцию, не забудьте снова протестировать все функции вашего сайта, чтобы проверить ошибки.

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

3. Оптимизация медиа

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

Нажмите для полноразмерного изображения

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

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

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

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

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

Видео и фреймы

Вы также можете включить отложенную загрузку видео и iframes (iframes используются для встраивания контента с других сайтов).

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

Недостатки ленивой загрузки

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

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

Смайлики и вставки

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

Как вы, возможно, поняли, мне нравятся эмодзи, поэтому я их поддерживаю?

Тем не менее, я рекомендую отключить встраивания, потому что они больше раздражают, чем полезны. Если вы когда-либо вводили URL-адрес в редактор сообщений, а WordPress превращает его в поле, похожее на встроенный твит, – это вложение, которое вы отключаете. Эта опция не влияет на встраивание Youtube или Vimeo.

Что еще можно сделать с WP Rocket?

Это основные шаги по оптимизации вашего сайта с помощью WP Rocket.

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

Как и было обещано, вот скриншоты из всех оставшихся меню в WP Rocket:

Ускорьте свой сайт

Если вы готовы оптимизировать свой сайт, возьмите копию WP Rocket и ускорите свой сайт.

Источник записи: https://www.competethemes.com