Плагин Autoptimize для ускорения сайта на WP

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

Плагин Autoptimize для оптимизации загрузки сайта

Плагин Autoptimize устанавливается из репозитория WordPress. Более миллиона установок – это показатель. Им можно пользоваться бесплатно, но можно установить и версию ПРО. Доступны два тарифа – за 249 и 699 евро. Разработчики постоянно развивают и улучшают плагин, в него добавляются новые функции и возможности. Кроме сжатия HTML, CSS, JS, можно поработать с изображениями, видео, шрифтами Google и даже эмодзи (как клопы, маленькие, а жить спокойно не дают), Можно подключить ленивую загрузку картинок и даже преобразование файлов в современный формат webP.

Включение основных опций плагина дает заметное ускорение загрузки.

Настройки сугубо индивидуальны для каждого сайта на WordPress.

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

Настройки плагина Autoptimize

Настройки Autoptimize интуитивно понятны. В основной вкладке, первой, предлагается сжать код HTML, CSS и JS. В зависимости от версии, может меняться очередность расположения опций. В момент написания статьи HTML у меня стоит после CSS и JS. Но начну с HTML. Ставим галочку и сохраняем. Сохранять ли комментарии, дело каждого.

Сжатие HTML кода

Плагин делает код HTML компактным, убирает все лишнее. Уже на этом этапе можно замерить эффект на PageSpeed, и он будет.

Сжатие CSS

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

Сжатие файлов стилей

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

Затем нужно получить критические стили, которые отвечают за отображение внешнего вида страниц. К плагину предлагается расширение для создания Critical CSS, но оно платное. Поэтому ищем бесплатные сервисы, например, Critical Path CSS Generator. https://www.sitelocity.com/critical-path-css-generator, который у меня в закладках браузера. В поле вставляем ссылку на свой сайт и ждем в течение пары минут, пока критические стили сгенерируются.

Сервис предлагает два варианта внедрения, но я использую код из первого окна, копирую его и вставляю в поле на сайте, которое открывается после того, как галочка в чекбокс inline поставлена. Открывающий и закрывающий теги style в начале и конце кода удаляем.

Inline

Опции JavaScript

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

Изображения и дополнительные настройки

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

Дополнительные настройки Autoptimize

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

Если нужно мнение по эффективности, то у меня цифры разные. На одном сайте скорость поднялась с 31 до 92 для мобильных, на другом, где плагин Modula, пока 46, но ссылки на скрипты скопировала. Будет время — добью, возможно, и его.

Обновлено 16.02.2020 г.

Закладка Постоянная ссылка.

23 комментария

  1. Плагин хороший для минификации исходного кода. Другие в этом плане хуже справляются. На блог тоже в дальнейшем планирую поставить, как сменю тему.
    А так тоже его использую и нормально. Главное настройки задавать нормально и чтобы без конфликтов. Также полезно прописывать исключения для css, js.
    А на developers.google.com не рекомендую ровняться. Лучше использовать tools.pingdom.com. Там уже более конкретные цифры. Да и до сотни полностью выводить нет смысла. Это просто параноя. Все равно остаются скрипты, которые влияют на загрузку. К примеру, та же реклама от гугла.

    • Надежда Хачатурова

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

      Ладно, оставила пока скорость в покое. Другую проблему себе нашла. Одно время на сайте телефон был в формате, доступном для звонка с мобильного устройства по клику. Потом обнаружила, что на код ругается не то валидатор, не то еще что. )) Убрала тег. Сейчас пытаюсь вернуть назад, и выдает мне при клике 404 ошибку. Не пойму, в чем дело. Конструкция обычная скобка a=»хреф=»tel:» 1=»+00000000000″» rel=»nofollow»><номер> закрывающий a

      Что я хоть косячу, не глянете? Скажете, лучше бы не заходили. ))

      • Сергей Стеклов

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

        • Надежда Хачатурова

          Не могу восстановить. Удаляла очень давно. Поищу еще в сети. Пока натыкаюсь на публикации самые поздние 2014 года. Свежие — не в ТОПе. ))

  2. Надежда Хачатурова

    Ольга, повторю: на конкретном упомянутом сайте нет смысла устанавливать этот плагин, да и другие, думаю, тоже. Одно время у меня стоял универсальный W3 Total Cache, но он сам настолько тяжелый, что на скорости загрузки сайта его работа не отражалась, даже наоборот. А о шаблоне сказала по одной причине, чтобы подвести к использованию ubermenu. Мысль о смене темы давно сверлит мозг, но есть препятствия и финансовые, и другие. А если говорить об уникальном дизайне, тогда бы я предпочла вообще смену CMS на MODX, к примеру. Чистый код и ничего лишнего. Сайты летают. Ваш комментарий, чувствую, даст мне толчок к действиям. Спасибо!

    • Ольга mescher410

      Пожалуйста))) Пошла отключать ентот плагин у себя на сайтах(((

      • Надежда Хачатурова

        Вы меня так не пугайте! 7 раз отмерь — один отрежь! )) Другие пробовали? Их же много, мне вот опробованные не подходят, если нет возможности исключения в настройках, а по-другому не умею.

  3. Ярослав

    Здравствуйте Надежда 🙂 Вы правы, плагин этот не решает проблемы, загрузил, установил, всё настроил, кэш почистил типа плагином, но, проблемы остались, вывод — плагин Autoptimize бесполезен.

    • Надежда Хачатурова

      Ярослав, может, мы просто настраивать не умеем? )) Дело в том, что все эти плагины сами по себе дают нагрузку. Менять шило на мыло есть ли смысл? В идеале нужно сократить количество запросов, заменив функции на коды, вставленные в html. Если один раз посидеть разобраться с этим, сайт можно ускорить существенно. Но и у этого способа есть обратная сторона: никаких обновлений. Или придется делать все заново. Это такие мои рассуждения, не подкрепленные опытом.

  4. Ярослав

    Здравствуйте Надежда, с настройкой проблем нет, да и настройки там в бесплатной версии кот наплакал, если же приобрести платные дополнения — то настроек будет в разы больше, но, будет ли польза сайту от этого? Я поискал аналоги этих самых дополнений и протестировал — результат разочаровал. Некоторые давали большую нагрузку. Вывод очевиден. Менять что то в коде сайта — можно, но, в таком случае, необходимо использовать дочернюю тему. Я протестировал различные способы оптимизации, подумал хорошо и пришёл к выводу, что мой сайт хорошо себя чувствует и без плагинов-оптимизаторов. Дело в том, что мой сайт «нафарширован» всевозможными кодами, так как изначально он был интернет-магазином.
    Желаю Вам удачи всего самого доброго 🙂

    • Надежда Хачатурова

      Ярослав, еще раз здравствуйте! Если Вы о сайте, который у Вас в подписи, то странно слышать, что Вас устраивает скорость 26 и 33. И, как мне кажется, одна из главных причин в сервере. Время ответа 2 секунды. Редко встречается такое. Кстати, более современная версия уже дает ускорение на несколько пунктов. У Вас нельзя изменить версию php? Если ничего нельзя сделать с сайтом, то можно поискать ресурсы на сервере. А если учитывать, что Вы оказываете услуги, связанные с сайтами, то неплохо бы свой личный ресурс иметь в портфолио. )) А то у нас вечно сапожник без сапог.

  5. Ярослав

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

    • Надежда Хачатурова

      Ярослав, а настроено gzip сжатие, например? Из красной зоны я бы постаралась вывести сайт однозначно. Сама стараюсь делать все возможное, а для клиентских сайтов заказываю ускорение спецу. Делает 99-100%. И есть один неплохой плагин. Если знаете, какие скрипты исключить из оптимизации, чтобы элементы сайта не пострадали. то могу посмотреть, как он называется. В блоге этом подключала, но у меня сайдбар уехал вниз. Не учла чего-то. А на сайтах со страницами по всей ширине очень даже получается неплохо. )) Устанавливала сыну на сайт столовой, все настроила правильно. А сейчас сменила шаблон и вообще отказалось — скорость очень приличная. Но там оформление простое. не как у Вас. Никаких приамбасов не грузится.

  6. Ярослав

    Добрый вечер Надежда 🙂 Да, сжатие настроено, на сервере, сжимает до 95%, но, это не показатель. Я вчера провёл небольшой эксперимент и выявил проблемные элементы. Первый элемент — это поиск вверху, второй — статические блоки, ну и третий — полоса брендов.Вот три элемента, которые способствую медленной загрузке страницы. Отказаться от этих элементов я не могу, но, «пошаманить» над кодом этих элементов, предварительно используя дочернюю тему — можно, и нужно. Но это после. На данный момент у меня в приоритете другие, более важные дела, к примеру: изучение английского языка. Долгое время я пытался приступить к изучению, да всё никак не давался он мне, а сейчас просто необходимо изучить. Дополнительно, изучаю программирование. Использовать плагины для устранения проблемы с загрузкой — нет, тут как в поговорке «одно лечишь, а другое калечишь». Конфликты будут 100%. Вполне возможно, создам свой шаблон, взяв за основу шаблон моего сайта, таковы планы на будущее. У меня, есть портал, тоже на WordPress, самописный, к этому шаблону я подключил три плагина, так же, сделаю и с сайтом. Всего Вам доброго Надежда, удачи 🙂

    • Надежда Хачатурова

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

  7. Ярослав

    Да, гугл и яндекс переводчик не выход. Возможно Вас, Надежда, заинтересует ресурс eduget.com. Посмотрите, там отличные курсы, платные и бесплатные. Регистрируетесь через соц. сеть. Не упускайте возможность, новое знание — ключ от новых дверей.

    • Надежда Хачатурова

      Спасибо! Думаю, просто физически не смогу воспользоваться приглашением. Времени на сон часа 4, и никакой личной жизни. ))

  8. Надежда Хачатурова

    Надо посмотреть, почему пропала возможность отписаться. Давно там не была. Попробую вручную Вас найти и удалить.

  9. Надежда Хачатурова

    Кстати, и не вижу, что Вы еще и спамите, подставляя к имени нечто. Так нельзя ведь делать.

  10. Ярослав

    Ольга, отвечу на Ваш вопрос — как исправить ситуацию?
    Ответ: вести активный образ жизни в интернете.
    Лично я, принимаю в сутки, на свой почтовый ящик, минимум 50 писем, таким образом, я слежу за новостями и событиями, обсуждаю, обучаюсь.
    Для чего нужен почтовый ящик? Письмо в месяц принять? Нет. Это — развитие.

  11. Надежда Хачатурова

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

  12. Надежда, не поняла про спам? Я так всегда подписываюсь. А какой еще спам был?

    • Надежда Хачатурова

      Неправильно подписываетесь. Поле для имени — оно для имени. Можете проверить любым сервисом проверки ссылок, и везде, где к имени комментатора приписан кусок домена или другое слово, определяются как seo ссылки, неестественные. Вредите сами себе.

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

Ваш адрес email не будет опубликован.