Ускорение сайта

Ускорение сайта

Сжатие изображений, CSS, JavaScript и HTML

Ускорьте работу своего сайта, чтобы повысить его рейтинг и добиться более высокой конверсии

Читать полный обзор »

Стоимость приложения включает в себя настройку под ключ, пишите на email сразу после покупки!

Приложение ускоряет ваш сайт и позволяет экономить трафик минимизируя и объединяя JS, CSS и HTML, а также оптимизируя изображения.

"Ускорение сайта" делает процесс оптимизиции очень простым. В зависимости от опций, он объединяет, удаляет неиспользуемые элементы и возвращает сжатый код страниц, скриптов и стилей. Кроме того приложение перемещает все стили и скрипты вниз страницы, что позволяет сразу получить высокие оценки от Google PageSpeed Insights.

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


Начало работы:

Для начала работы после установки приложения откройте шаблон index.html используемой темы дизайна и в самом начале добавьте код:

{if $wa->mini}{capture mini_html assign=mini_html}{$mini_css=false}{/if}

В самом конце этого же шаблона добавьте строку:

{if $wa->mini}{/capture}{$wa->mini->html($mini_html, $mini_css)}{/if}

Настройки:

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

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

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

Объединение кода:

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

Критический CSS:

Когда вы переносите CSS вниз, то при загрузке страницы вы будете некоторое мгновение видеть нестилизованный контент. Чтобы этого не происходило, есть возможность указать в шаблоне часть CSS, которая требуется для отображения основных видимых при загрузке элементов. Не стоит добавлять его вручную в head, он тоже будет перенесен плагином вниз. Для этого в конце шаблона index.html перед последней строкой от приложения добавьте ваш CSS в специальный блок, перед которым укажите код:

{if $wa->mini}{capture mini_css assign=mini_css}{/if}{literal}

и после него:

{/literal}{if $wa->mini}{/capture}{/if}

Получится примерно так:

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

Кэширование:

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

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

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

Ограничения:

На данный момент приложение не работает с включенным CDN, убедитесь, что у вас выключена эта опция (будет исправлено в будущем).

Приложение не работает с включенным Режимом отладки, проверьте, в настройках Инсталлера, что галочки нет.