Нажмите ENTER, чтобы посмотреть результаты или нажмите ESC для отмены.

Shopify оптимизация производительности: 24 Советы для пользователей и разработчиков темы

Введение

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

Это хорошо документированный факт, что Интернет-пользователей и потребителей сегодня иметь немного терпения и не привыкли наблюдать пустой экран дольше, чем несколько секунд. В случае компании Google, Например, нагрузки задержку полсекунды привели к падению 0.6% в активность пользователей. Бинг тестирование пользователей с 2-секундной задержкой во времени загрузки, и их активность пользователей снизились 4%.  

Я. Генеральный производительности наилучшей практики

Проводить анализ плановой производительности

Перед началом работы для улучшения производительности вашего сайта, Это всегда хорошая идея, чтобы мера где производительность вашего сайта в настоящее время стоит. Есть несколько инструментов, которые могут помочь вам с этим, такие как Google Pagespeed Insights, Pingdom и webpagetest.org.

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

Использовать диспетчер тегов Google организовать отслеживание

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

Система управления тега, или TMS, объединяет все ваши теги в один запрос JavaScript. Это позволяет для остальной части вашего веб-сайта загрузки беспрепятственный. Вот как работает TMS оптимизировать ваш сайт и помочь с отслеживанием-
Вы можете найти подробные инструкции по Shopify в Руководство помощи.

Использование усилителя ускорить скорость загрузки страницы

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

Shopify позволяет быстро и эффективно создавать AMP страниц для вашего сайта с помощью FireAMP или RocketAMP приложений. Как высоко оценивают на App Store, Shopify и может помочь улучшить время загрузки страницы для мобильных устройств.

CDNs плечо чтобы с Shopify

Распределение контента или сеть доставки контента (CDN) состоит из кластера оптимизированный серверов распространения по всему миру. Это распределяет нагрузку доставки содержимого через сервер, который расположен ближе всего к посетитель. Другими словами, копии содержимого вашего сайта хранятся в расположение каждого сервера, так что местные посетитель опыт быстрее и гораздо надежнее.
Shopify имеет партнерские отношения с Быстро чтобы обеспечить купцы с ведущих CDN без дополнительных затрат. Это позволяет Shopify магазины возникают мгновенно по всему миру, особенно, НАС, ВЕЛИКОБРИТАНИЯ, АЗИАТСКО-ТИХООКЕАНСКИЙ РЕГИОН, Южная Африка и Южная Америка.

Сжатие и оптимизация изображений

Сжатие изображения приобретает особое значение, когда нужно быстрее загрузки веб-страниц. При рассмотрении оптимизации изображений, Это лучше всего обеспечить, что изображения, которые вы используете (я) приемлемого размера, и (II) не слишком много изображений добавляются на одной странице.
При работе с новыми изображениями, Вы можете вручную сжать ваши изображения или использовать методы обработки изображений с вашей теме. Современные изображения манипуляции инструменты являются эффективными на уменьшение размеров изображения. Например Cloudinary возможность уменьшить размер поставленного файла от 569 КБ Кому 45.1 КБ, что является более чем на 90% уменьшение размера файла.

Оптимизация Javascript и CSS файлов

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

Слияние всех стилей в один файл

  1. Из папки активов вашей темы, Создайте свежий файл под названием «application.scss.liquid».
  2. Вставить все содержимое из каждой таблицы стилей в только что созданный файл.
  3. Следующая, из вашей темы Мастер макета (Theme.Liquid), Удалите ссылки теги для старых стилей в главный файл. Код выглядит следующим образом-
Код JavaScript

Объединить все ваши файлы Javascript в один файл

  1. Из папки активов вашей темы, Создайте свежий файл под названием «application.js.liquid»
  2. Вставить все содержимое из каждого файла javascript в только что созданный файл.
  3. Следующая, от основной макет вашей темы (Theme.Liquid), удалить все теги javascript ссылки, и добавить их к вновь созданного основного файла, в нижней – прямо над закрытия
Код JavaScript 2

Уменьшить редиректов и удалить неработающие ссылки

Проблемы с производительностью в вашем магазине купец Shopify может быть результатом неработающие ссылки или слишком много перенаправлений.

Перенаправляет

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

  1. От внутри вашего Shopify admin, Перейдите к «Интернет-магазин» > «Навигация»
  2. Нажмите кнопку «URL перенаправления»
  3. Нажмите на «Add URL перенаправления» добавить ваш первый перенаправление URL

Неработающие ссылки

Неработающие ссылки на вашем сайте может оказаться весьма вредным как это увеличивает количество ненужных запросов HTTP должны быть выполнены. В Неработающие ссылки Checker и Xenu Некоторые из инструментов, которые можно использовать для исправить неработающие ссылки на вашем сайте. Оба эти средства являются эффективными и бесплатно.

Сократить количество HTTP запросов

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

  • Комбинат & Встроенные скрипты CSS.
  • Использовать встроенный JavaScript код для небольших фрагментов.
  • Объединить все файлы JavaScript.
  • Свести к минимуму использование дизайна & функциональные изображения.
  • Преобразование изображения в код Base64.
  • Ограничить количество социальных кнопок.

Руководство по Как сделать меньшее количество HTTP-запросов Это всеобъемлющий глубокое погружение о том, как сократить количество HTTP запросов.

Выполнение кода Minification

Неэффективно закодированного HTML, JavaScript, и CSS-файл на вашей странице имеет серьезные последствия на производительность вашего сайта. Чтобы решить эффективно эту проблему, Разработчики используют инструмент под названием minifier, что избавиться от избыточного кода. Для получения дополнительной информации, Вот один из популярных Минимизация библиотека на Github.

Выполнения отложенной образа загрузки

Технику отложенной загрузки изображения может оказаться довольно мощный когда дело доходит до Shopify магазины. Этот метод предполагает использование Javascript библиотека для загрузки фото, только когда они должны быть видимыми для посетителей сайта. Это улучшает время загрузки страницы.

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

II. Shopify производительности советы

Используйте быстрый и надежный хостинг

Хостинг и инфраструктуры может сделать перерыв или производительность узла электронной коммерции. Это прежде всего верно в высокий трафик и высокие операционные дни.

Некоторые факторы, чтобы иметь в виду при принятии решения о хостинг платформы требования включают-

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

Используя торговые сети CDN

Shopify CDN по существу сообщает CDN, ваши активы-JS, изображения, и CSS были изменить всякий раз, когда вы делаете изменения к ним.

В большинстве случаев, основной причиной снижения производительности является визуальное содержимое. В этой связи, Shopify делает asset_url фильтра позволяет автоматически добавлять номера версий для каждого URL-адреса, он генерирует. Пример номер версии в конце URL-адреса может выглядеть – ?v = 1384022871.

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

Качестве стандартной практики, CDN позволяет купцы с помощью Shopify Plus для питания бэкэнд их веб-сайт на автопилоте. Это освобождает торговцы, чтобы отвлечь их внимание на других областях бизнес-приоритетов –  Максимизация доходов и успех маркетинговых усилий.

Использование Shopify плюс – Shopify в версии Enterprise

Shopify предприятия электронной коммерции платформы известен как Shopify плюс. Shopify плюс направлена специально для большой и растущий онлайн брендов и магазины. Вот некоторые из его преимуществ-

  1. Разработки и расходы на техническое обслуживание – во время управления онлайн-магазина, может быть дорогим, когда речь заходит время и ресурсы.
  2. Предсказуемые цены – Shopify Plus предлагает преимущество в предсказуемые цены. Цены начинается в $2000 в месяц на основании ваших требований, но остается неизменной со дня вы подписываете вверх. Если конечно, со временем меняться ваши потребности.
  3. Техническая поддержка – с Shopify плюс у вас есть преимущество в выделенный аккаунт менеджера, который заботится о всех технических потребностей или сбоев.
  4. Надежность в масштабе-Shopify Plus гарантирует, что тысячи посетителей, Запуск одновременных сессий имеют безопасное, быстрый и эффективный опыт.

Уменьшить количество установленных Shopify приложения

Большое количество приложений в магазине Shopify автоматически добавить некоторые CSS/JavaScript-файл для вашего магазина. Проблема здесь заключается в том, что, Если ваше приложение не используется, файлы CSS/JavaScript продолжают работать в фоновом режиме и замедляют производительность вашего магазина.

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

Скачать быстро и отзывчивым тема

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

  1. Выберите тему реагировать и быстро
  2. Если тема имеет обновленную версию и посмотрите на предварительный просмотр.
  3. После того как вы выбрали тему, Помните, чтобы убедиться, что он хранится до даты.
  4. Тема, которая была оптимизирована для производительности будет иметь все стили в только одном файле CSS, все javascript в одном файле javascript. Рекомендуется перед обнулением вниз на тему, запустить тему через Google PageSpeed Insight и анализировать результаты.

Вместо того чтобы ползунки, Рассмотрите макет герой


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

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

Избегайте чрезмерного жидкого петли

Жидкий петли, Shopify конкретные и оказались чрезвычайно полезным. Однако, конкретные функции дополнительные преимущества, но также имеют некоторые компромиссы.

Для цикла, Итерация — это один из таких примеров, которые могут повлиять на торговцев. Это происходит, когда система обхода через весь магазин искать каких-либо конкретных условий. Это может быть как цена, Теги, и т.д.. В случае, если у вас есть обширный каталог, как и большинство крупных торговцев, Этот цикл может занять много времени и влиять на время отклика вашего магазина.

Избегайте чрезмерного всплывающих быстрый просмотр Windows

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

Однако, здесь задача –

  1. Это добавляет дополнительный шаг для посетителя
  2. Пользователь может щелкнуть его случайно который может привести к удручающим
  3. Его можно спутать с фактической продукта страницы
  4. И самое главное, излишние всплывающие окна может существенно снизить время загрузки страницы.

III. Рекомендации по повышению производительности для строительства торговых темы

Оптимизация CSS

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

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

Убить карусели

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

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

Оптимизация изображений

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

Скачать и открыть ImageOptim

Перетащить папку активы вашей темы в приложение

Приложение будет автоматически оптимизировать ваши активы и показывает число и размер файлов, которые вы удалили.

Используйте CSS, чтобы заменить фоновые изображения

CSS развивалась на протяжении лет, чтобы стать достаточно универсальным. В случае, если вы используете мозаичные изображения в качестве фона, Вы можете рассмотреть вопрос об использовании CSS фона вместо.

Сцепление / Уменьшать изображения

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

Минимизация удаляет все дополнительную информацию, содержащуюся в активы,, Хотя необходимы для людей, чтобы читать, Это не обязательно в вашем браузере. Ex- новые линии, пробелы, и т.д.. Когда речь заходит о Javascript, Минимизация также оптимизирует размер вашего кода, выполняя задачи, такие как переписывание var aLongVariableNamedUsefulForHumans с var.

IV. Заключение

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

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

Комментарии

Оставь коментарий