Ускоряем загрузку, сжимаем скрипты, стили и html

Приветствую вас, уважаемый читатель!

Этим постом, я заканчиваю первую часть «Работы над ошибками«, по внутренней оптимизации сайта. 

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

Пришёл черёд, заняться сжатием скриптов, стилей и html.

Чем меньше вес, тем выше скорость!

И в этом нам поможет, плагин Autoptimize.

alt=optimize

Плагин, объединяет все скрипты и стили, сжимает их и кэширует,  перемещая  всё в верхнюю часть документа. Помимо этого, он объединяет все .js файлы и встроенные скрипты (<script>) и помещает их в конец  документа.

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

Для того, что бы производительность Autoptimize была более высокой,  желательно в «довесок» к нему, использовать плагины кэширования, такие как WP Super Cache или HyperCache.

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

Находим Autoptimize в репозитории и устанавливаем. Активируем и переходим в настройки.

НастройкиAutoptimize

Ставим галочки. Добавляем, при нужде скрипты для исключения из процесса сжатия.

alt=sgatie

И переходим к расширенным настройкам — Show advanced settings.

alt=sgatie1

Параметры HTML — ставим галочку Оптимизировать код HTML.

Комментарии, по желанию. Я не ставил.

Опции JavaScript — отмечаем Оптимизировать код JavaScript.

Force JavaScript in <head> — выбираем, оптимизировать ли коды в тэге <head> .

Also aggregate inline JS — выбираем, для оптимизации встроенных JS.

Exclude scripts from Autoptimize — добавление исключённых скриптов, через запятую.

Add try-catch wrapping — при ошибке скриптов, включить. 

alt=опцииCSS

Add try-catch wrapping — при ошибке скриптов, включить. 

Опции CSS — выбираем Оптимизировать код CSS.

Generate data: URIs for images — можно включить, небольшой фон-изображение в самой CSS.

Remove Google Fonts — включаем, если хотим, чтобы шрифты Google, не загружались.

Also aggregate inline CSS — оптимизация CSS в HTML.

Inline and Defer CSS — данный параметр, рекомендуют включать, после прочтения справки  Check the FAQ.

 Inline all CSS — улучшает производительность сайтов, с низкой посещаемостью. Но, замедляет работу сайта.

Exclude CSS from Autoptimize — исключаем CSS  из оптимизации.

alt=sgatie1

CDN Options — не совсем понял эту функцию, не включал.

Информация о кэше.

Save aggregated script/css as static files, ставим галочку, при желании сохранить, оптимизированные скрипты CSS, в статический файл.

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

 

P.S. — внимание!!! Плагин, может конфликтовать с другими плагинами. После установки, проверьте корректность работы установленных плагинов.

До следующих встреч!

С уважением, Максим! 

 

Понравилось,оставьте свой email:


2+

2 Replies to “Ускоряем загрузку, сжимаем скрипты, стили и html

  1. Максим, приветствую! А у меня подобные плагины работают некорректно. Пробовал несколько. То какие-то скрипты перестают работать, то где-то CSS летит…
    Но если у кого всё нормально, то да, это полезно.

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

      0

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *