Liquid

Шаблоны можно оптимизировать с помощью кеширования и использования специального синтаксиса в написании тегов - {{- -}}, {%- -%}.

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

{% capture cache_menu_key %}cache_menu_key_{{ collections.last_updated_at }}_{{ languge.local }}{% endcapture %}

{% cache cache_menu_key %}
  .. кешируемый код
  {%- for collection in collections -%}
  {%- endfor -%}
{% endcache %}

Теги с тире помогают избавиться от лишних пустых строк. 

{%- assign my_variable = "tomato" -%}
{{ my_variable }}

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

{% capture start_time %}{{'now' | date: '%s.%L' }}{% endcapture %}

{% include 'head' %}

<!-- Render time: {{ 'now' | date: '%s.%L' | minus: start_time }} -->

Возможно какие-то участки кода можно перевести на подгрузку через ajax.

Изображения

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

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

Так же можно использовать преобразование в формат webp.

<img src="{{ collection.image | image_url: 600, format: 'webp' }}">

Для скрытых изображений используйте ленивую подгрузку изображений, то-есть присваивать атрибуту src значение после загрузки страницы или при появлении изображения на экране.

Помимо image_url есть фильтр который добавляет изображение в формате webp с фолбеком на jpg.

Это подойдет для браузеров которые не поддерживают webp.

{{ collection.image | webp_picture_tag: 600 }}

На выходе получаем =>

<picture>
  <source srcset="https://static-eu.insales.ru/.../600/600/.../image_original.jpg@webp" type="image/webp">
  <img src="https://static-eu.insales.ru/r/.../600/600/.../image_original.jpg">
</picture>

Инструменты

Используйте консоль браузере, чтобы смотреть скорость и порядок загрузки элементов. Вкладка network в хром или вкладка сеть в фаерфокс.
В хром есть аналог PageSpeed Insights, это вкладка Audits там предоставляется детальный отчет по проблемам загрузки контента.