logo

Выберите город
Max-Webs – компания федерального уровня, в которой работают высококлассные специалисты.

Оптимизация и ускорение вукомерс. Как загружать скрипты и стили WooCommerce для улучшения скорости загрузки страницы

18 апреля 2019 в 18:11 Woocommerce
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...
НЕТ ВРЕМЕНИ ЧИТАТЬ СТАТЬЮ?
Но вам требуется помощь в настройке Оптимизация и ускорение вукомерс. Как загружать скрипты и стили WooCommerce для улучшения скорости загрузки страницы ? Получите индивидуальную мини-консультацию по Скайпу или WhatsApp.

Цена: 500 руб.Оформить заказ и оплатить

Если вы собираетесь делать все самостоятельно — продолжайте чтение!

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

Перед рассмотрением следует рассмотреть несколько вопросов:

  • У вас есть какие-либо элементы на вашем сайте, которые зависят от сценариев WooCommerce за пределами основных страниц WooCommerce (магазин, корзина, выписка и т. Д.)? Это может быть элемент корзины в вашем заголовке или, возможно, некоторые виджеты боковой панели, найденные на вашем сайте.
  • У вас есть среда тестирования — пожалуйста, не делайте код ковбоя на своем сайте электронной коммерции!
  • Вам должно быть удобно редактировать тему и файлы кода

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

Какие скрипты WooCommerce мы удаляем?

WooCommerce-парам-барахлоОткройте свой веб-сайт WordPress с установленной и активной WooCommerce. Взгляните на исходный код, и вы увидите множество файлов JavaScript и CSS, специфичных для WooCommerce, а также метатег генератора и целый блок параметров woocommerce (см. Снимок экрана).

Сценарии

  • woocommerce.min.js
  • checkout.js
  • добавить к cart.min.js
  • jquery.cookie.min, Я.С.
  • Корзина-fragments.min.js
  • jquery.blockUI.min.js
  • jquery.placeholder.min.js
  • … MOAR ?!

Woo-скрипты

Стили

  • woocommerce.css
  • Любые стили лайтбокса (prettyphoto)
  • Пользовательский CSS для WooCommerce
  • … возможно, дополнительный CSS в зависимости от вашей установки.

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

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

Перед оптимизацией сценария WooCommerce: 

Предварительная оптимизация WooCommerce

Я запустил свой сайт через webpagetest.org, чтобы увидеть результаты без какой-либо опции optmization. Вы можете видеть из этого теста, что сайт составляет примерно 1,6 МБ с 75 загруженными запросами. Этот сайт не находится на мощном хосте, так что время загрузки сейчас под-пар.

После оптимизации скрипта WooCommerce:

Оптимизация Post WooCommerce

Мы перешли с 7,2 секунд до 5,8 секунд времени загрузки … неплохо.

Вы можете видеть, что после оптимизации запросы упали на 9 с 75 до 66 полностью загруженных. Кроме того, общий байт также упал, а сайт в настоящее время составляет около 1,5 мб. Число, которое меня поражает, — это общее время загрузки, которое упало почти на 1,4 секунды.

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

Код для оптимизации и ускорения ваших скриптов WooCommerce

Следующий код — это то, что у меня есть, чтобы удалить стили и скрипты WooCommece. Поскольку это специфичная для темы функциональность, я рекомендую добавить это в файл functions.php вашей темы через отдельный плагин.

Оптимизация скорости: добавьте следующий код в тему functions.php

… вот суть , из которой тянет код выше.

После добавления кода обновите исходный код для страниц, не относящихся к WooCommerce. Вы должны увидеть, что все скрипты, стили и метатег исчезают. Он также должен загружаться заметно быстрее. Если вам нужны конкретные сценарии, такие как jQuery UI или FancyBox, вы можете прокомментировать определенные строки, деинсталлирующие эти сценарии.

Заметьте условные утверждения , которые мы используем: ! is_woocommerce() && ! is_cart() && ! is_checkout(). Если вам нужно загрузить сценарии WooCommerce на своем сайте за пределами магазина и страниц проверки, вы можете легко изменить этот скрипт для работы в конкретной ситуации. Например, если вы хотите загрузить сценарии WooCommerce на своей домашней странице, вы добавите !is_homeусловия.

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

Я надеюсь, что этот код окажется полезным для вашего сайта и снизит скорость загрузки вашей страницы. Специальный крик идет к Грегу Рикаби за его оригинальный код, найденный в его статье « Удалите стили и скрипты WooCommerce», которые я слегка изменил и улучшил.

Таким образом вы сможете облегчить WooCommerce

Источник: https://wordimpress.com/how-to-load-woocommerce-scripts-and-styles-only-in-shop/

Похожие статьи

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

Какие услуги вас интересуют? *

Прикрепить к ответу коммерческое предложение? *

В каком регионе планируете работать ? *

Сколько заявок в месяц вам необходимо получать? *

Средний чек за продажу товара/услуги ? *

Вкратце опишите свою деятельность и причину обращения: *

Представьтесь, пожалуйста: *

Как с вами связаться? *

Контактный номер телефона: *

Введите контактный E-mail: *

Бюджет на реализацию *



Запрос демо версии
Дорогой клиент, демо версию мы можем бесплатно реализовать для вас в течении 1-2 дней. Уточните детали вашего бизнеса.

Пришлите 1-5 ссылок на сайты вашей тематики которые вам нравятся. Так же можете приложить ссылки на фото(скрншоты)

Представьтесь, пожалуйста: *

Как с вами связаться? *

Контактный номер телефона: *

Введите контактный E-mail: *

Добавить комментарий, если необходимо



[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Оставить заявку
Консультация наших специалистов совершенно бесплатна и ни к чему вас не обязывает. Наш маркетолог проанализирует ваши ответы и свяжется с Вами в ближайшее время.

Какие услуги вас интересуют? *

Прикрепить к ответу коммерческое предложение? *

В каком регионе планируете работать ? *

Сколько заявок в месяц вам необходимо получать? *

Средний чек за продажу товара/услуги ? *

Вкратце опишите свою деятельность и причину обращения: *

Представьтесь, пожалуйста: *

Как с вами связаться? *

Контактный номер телефона: *

Введите контактный E-mail: *

Бюджет на реализацию *



[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Запись на бесплатный урок
Введите ваше имя, телефон и e-mail.
Я свяжусь с Вами для уточнения времени прохождения урока.

Как вас зовут *

Как с вами связаться? *

Введите контактный телефон *

Введите контактный E-mail *



[contact-form-7 404 "Not Found"]
Заказать сайт
Первые 14 дней бесплатно. Оставьте номер email и контактный телефон. Я лично перезвоню Вам в течение 10 минут, для обсуждения деталей.


Ваш email

Введите контактный телефон

Комментарий или вопрос

Проблемы с оплатой?
Опишите ситуацию. Когда возникает проблема? Что планируете купить?

Введите ваше имя *

Введите контактный email *

Что необходимо доработать

Скачать чек-лист
Заполните поля ниже. В течение 10 минут на указанный e-mail будет отправлена ссылка на скачивание чек-листа.

Введите ваше имя *

Введите контактный E-mail *

[contact-form-7 404 "Not Found"]
Заказать обратный звонок
Я свяжусь с Вами в течение 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Как с вами связаться? *

Введите контактный телефон *



Степень загрузки
В данном разделе представлена моя занятость в данный момент. Данные обновляются каждый день. Вся работа выполняется по предварительной записи и 20% предоплатой от стоимости проекта.
низкая загрузка. выполняется ~5 заказов. старт работ через 5 дней.
средняя загрузка. выполняется ~15 заказов. старт работ через 20 дней.
высокая загрузка. заказы временно не принимаются.
Задать вопрос
У вас есть вопросы адресованный интернет-маркетологу? А у меня ответы, добро пожаловать! И да, это бесплатно. Я отвечу вам в течение 24 в разделе вопрос-ответ.
[contact-form-7 404 "Not Found"]