9 советов для увеличения скорости вашего сайта на платформе Shopify

We have all heard the Idiom «Slow and Steady Wins the Race.» However, when it comes to search engine optimization, fast page speed and site performance are key factors to success in the e-commerce world.

That is the reality – more users accessing the sites or buy products from their smartphone and they expect sites to load as soon as they click on a hyperlink. Slow loading web pages can lead to high bounce rate, low user engagement, less traffic, and hence adverse effect on your sales.

Just check these numbers based on Google /SOASTA research:

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

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

1. Анализ производительности

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

Анализ производительности сайтов для мобильных телефонов и десктопов с помощью PageSpeed Insights

Инструмент Google PageSpeed Insights tool дает количественную оценку скорости загрузки страницы и предложения по ее увеличению. Этот сервис предлагает идеи по улучшению загрузки для мобильных телефонов и десктопов отдельно:

• Оптимизировать изображения
• Уменьшить CSS
• Уменьшить JavaScript
• Исключить мешающие загрузке элементы JavaScript и CSS на верхней половине первого экрана
• Применить кэширование браузера и уменьшить время ответа сервера
• Избегать переадресации с целевой страницы
• Включить сжатие Gzip

Отчет о скорости загрузки страницы на мобильном устройстве

Отчет о скорости загрузки страницы на десктопе

Google также рекомендует проверить сайт с помощью инструмента Test My Site, который сможет проанализовать его мобилопригодность и скорость загрузки страниц. Пройдите по ссылке Test MySite, чтобы попробовать.

Введите URL вашего сайта, и в течение нескольких минут Google просканирует и оценит его. Вы можете получить бесплатный детальный отчет на е-мейл, если кликните на клавишу «Get My Free Report» и введете ваш адрес.

Анализ скорости сайта и оптимизация его производительности с помощью GTmetrix

GTmetrix – это еще один инструмент, анализирующий скорость загрузки вашей страницы по шкале от A до F и дающий рекомендации по улучшению этих параметров. Кликнув на вкладку «waterfall», мы можем увидеть сколько времени конкретно потребовалось для выполнения каждого запроса.

Отслеживание скорости и производительности сайта с помощью Pingdom

Pingdom протестирует скорость загрузки вашего сайта бесплатно и даст совет, как сделать его быстрее.

2. Сделайте ваш сайт быстрым как молния с помощью AMP

AMP – это ускоренные мобильные страницы (Accelerated Mobile Pages), стандарт для создания быстро загружающихся страниц для мобильных устройств, доступный каждому паблишеру.

Более 50% пользователей делают покупки через мобильные устройства, поэтому важно убедиться, что ваш сайт мобилопригоден и быстро загружается. Технология AMP поможет пользователям получить быстрый доступ к вашему сайту через мобильные устройства.

Платформа Shopify предоставляет приложения FireAMP и RocketAMP для быстрого и удобного создания AMP-страниц. Оба приложения получили высокую пользовательскую оценку (выше 4) в Shopify App Store. Вы можете улучшить скорость загрузки мобильных страниц с помощью этих приложений или создав SHOPIFY API для разработки AMP-страниц.

Если вы хотите создать AMP-версию вашей целевой страницы, прочитайте пост How to build pages with AMP.

3. Сжатие изображений

Shopify позволяет добавлять изображения следующих форматов:

• JPEG или JPG
• Progressive JPEG
• PNG
• GIF

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

Помимо этого, при сжатии важно учесть качество изображения.

Бесплатные сервисы tinypng.com или tinyjpg.com уменьшат размер новых изображений для вашего сайта. На картинке ниже вы можете заметить, что этот инструмент сэкономил мне 71% или 286Кб.

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

Для уже имеющихся изображений вы можете воспользоваться сервисами Crush.pics или Image Optimizer, которые сожмут изображения без потери качества.

4. Загрузка быстрой и оперативно реагирующей темы для сайта Shopify

В действительности скорость сайта в основном зависит от темы, поэтому, перед установкой, сделайте следующее:

• Выберите быструю, оперативно реагирующую тему
• Проверьте, нет ли обновленной копии вашей темы и сделайте ее предварительный просмотр. Пропустите выбранную тему через Google PageSpeed Insight и учтите рекомендации, как ее убыстрить.

Выбрав тему, не забывайте обновлять ее.

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

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

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

6. Сокращение количества HTTP-запросов

Специалисты GiftOfSpeed создали сервис HTTP Requests Checker, который помогает выяснить общее количество HTTP-запросов от вашей страницы. Вы можете сократить это количество, предприняв следующее:

• Совместите файлы CSS и пропишите их в коде
• Пропишите маленькие файлы JavaScript в коде
• Объедините все файлы JavaScript
• Минимизируйте использование дизайна и функциональных изображений (design and functional images)
• Используйте CSS спрайты
• Конвертируйте изображения в стандарт кодирования Base64
• Ограничьте количество кнопок для социальных сетей

Перейти в гид «Как уменьшить количество HTTP-запросов»

7. Минимизируйте переадресацию и битые ссылки

Ошибки производительности сайта могут произойти из-за многочисленных редиректов или битых ссылок. Как проще всего решить эту проблему? Избегать ненужных редиректов и исправить битые ссылки.

Для редиректов

Лишняя переадресация создает проблемы с производительностью и скоростью, что может повлиять на скорость загрузки всего сайта. На платформе Shopify вы можете применить 301 редирект с помощью встроенной функции «URL redirect»

Для битых ссылок

Битые ссылки могут быть вредоносными для сайта, так как они увеличивают количество ненужных HTTP-запросов и негативно влияют на опыт пользователей. Чтобы отследить и исправить такие ссылки, воспользуйтесь бесплатными инструментами Broken Link Checker и Xenu.

8. Добавление кодов отслеживания через Google Tag Manager

Обычно мы закладываем отдельные коды отслеживания для Google Analytics, конверсий AdWords, целей, ремаркетинга и т.д. самостоятельно или посылаем задание разработчикам сайта. Этот процесс занимает время и в итоге тормозит производительность сайта. С помощью Google Tag Manager вы сможете хранить все тэги в одном месте.

Чтобы воспользоваться Google Tag Manager для вашего Shopify-сайта, смотрите руководство «Add the Google Tag Manager Code to your Shopify Plus store».

9. Использование шаблонов с Hero Image вместо слайдеров

Слайдеры были популярны некоторое время назад, вебдизайнеры добавляли по 5-6 изображений высокого качества на один слайдер, что тормозило загрузку. Исследование, подтвержденное статистическими данными, показало, что настало время забыть о них:

• Только 1% пользователей кликает на слайдер Source
• Слайдеры \ карусели раздражают пользователей и понижают видимость сайта Source
• Слайдеры \ карусели мешают SEO Search Engine Land
• Слайдеры неудобны для мобильных устройств Source
• Слайдеры сдвигают вниз контент (Алгоритм улучшения раскладки страницы) Source
• Слайдеры могут повлиять на SEO Source

Вместо слайдера правильнее использовать шаблон Hero Layout c одиночным изображением высокого качества и четким призывом к действию (call to action). Зайдите на Dropbox и посмотрите на их Hero Layout.

Определение Hero Image:

Согласно Wikipedia, это «крупноформатный баннер, постоянно размещенный спереди и в центре веб-страницы. Это изображение – первое, с чем столкнется посетитель сайта, и оно представляет собой обзор наиболее важного контента. Оно часто содержит картинку и текст и может быть статичным или динамичным (например, ротатор картинок и\или тем)».

Заключительный комментарий

Начните с перечисленных простых и практических советов, которые сразу улучшат скорость загрузки вашего сайта. Используете ли вы другие приемы для увеличения производительности сайта? Поделитесь в комментариях к этой статье.