Skip to main content

Algolia DevCon - June 28-29, 2023

Discover the future of the AI Stack with Algolia, be the first to see new platform demos and announcements, and get the most out of Algolia through interactive workshops.

REGISTER FOR FREE DON'T SHOW AGAIN
×

What impact does the Algolia for Shopify plugin have on my website’s performance?

  • Updated

When opening your layout file, you might be concerned about the performance impacts of the plugin. We’re installing and loading quite a few files. These files fall into two categories - snippets and assets:

<!-- Algolia head -->

<!-- Snippets -->
<script type="text/template" id="template_algolia_money_format">{% include 'algolia_money_format' %}</script>
<script type="text/template" id="template_algolia_autocomplete">{% include 'algolia_autocomplete.hogan' %}</script>
<script type="text/template" id="template_algolia_autocomplete.css">{% include 'algolia_autocomplete.css.hogan' %}</script>
<script type="text/template" id="template_algolia_autocomplete_pages_empty">{% include 'algolia_autocomplete_pages_empty.hogan' %}</script>
<script type="text/template" id="template_algolia_autocomplete_page">{% include 'algolia_autocomplete_page.hogan' %}</script>
<script type="text/template" id="template_algolia_autocomplete_collection">{% include 'algolia_autocomplete_collection.hogan' %}</script>
<script type="text/template" id="template_algolia_autocomplete_collections_empty">{% include 'algolia_autocomplete_collections_empty.hogan' %}</script>
<script type="text/template" id="template_algolia_autocomplete_article">{% include 'algolia_autocomplete_article.hogan' %}</script>
<script type="text/template" id="template_algolia_autocomplete_articles_empty">{% include 'algolia_autocomplete_articles_empty.hogan' %}</script>
<script type="text/template" id="template_algolia_autocomplete_product">{% include 'algolia_autocomplete_product.hogan' %}</script>
<script type="text/template" id="template_algolia_autocomplete_products_empty">{% include 'algolia_autocomplete_products_empty.hogan' %}</script>
<script type="text/template" id="template_algolia_autocomplete_footer">{% include 'algolia_autocomplete_footer.hogan' %}</script>
<script type="text/template" id="template_algolia_instant_search">{% include 'algolia_instant_search.hogan' %}</script>
<script type="text/template" id="template_algolia_instant_search.css">{% include 'algolia_instant_search.css.hogan' %}</script>
<script type="text/template" id="template_algolia_instant_search_stats">{% include 'algolia_instant_search_stats.hogan' %}</script>
<script type="text/template" id="template_algolia_instant_search_facet_item">{% include 'algolia_instant_search_facet_item.hogan' %}</script>
<script type="text/template" id="template_algolia_instant_search_current_refined_values_item">{% include 'algolia_instant_search_current_refined_values_item.hogan' %}</script>
<script type="text/template" id="template_algolia_instant_search_product">{% include 'algolia_instant_search_product.hogan' %}</script>
<script type="text/template" id="template_algolia_instant_search_no_result">{% include 'algolia_instant_search_no_result.hogan' %}</script>

<!-- Assets -->
{{ 'algolia_dependency_font-awesome-4-4-0.min.css' | asset_url | stylesheet_tag }}
{{ 'algolia_dependency_instantsearch-1.min.css' | asset_url | stylesheet_tag }}
{{ '//cdn.polyfill.io/v2/polyfill.min.js' | script_tag }}
{{ 'algolia_dependency_lodash-3-7-0.min.js' | asset_url | script_tag }}
{{ 'algolia_dependency_jquery-2.min.js' | asset_url | script_tag }}
{{ 'algolia_dependency_hogan-3.min.js' | asset_url | script_tag }}
{{ 'algolia_dependency_autocomplete.jquery-0-24-2.min.js' | asset_url | script_tag }}
{{ 'algolia_dependency_algoliasearch-3.min.js' | asset_url | script_tag }}
{{ 'algolia_dependency_instantsearch-1.min.js' | asset_url | script_tag }}
{{ 'algolia_config.js' | asset_url | script_tag }}
{{ 'algolia_init.js' | asset_url | script_tag }}
{{ 'algolia_analytics.js' | asset_url | script_tag }}
{{ 'algolia_translations.js' | asset_url | script_tag }}
{{ 'algolia_helpers.js' | asset_url | script_tag }}
{{ 'algolia_autocomplete.js' | asset_url | script_tag }}
{{ 'algolia_facets.js' | asset_url | script_tag }}
{{ 'algolia_sort_orders.js' | asset_url | script_tag }}
{{ 'algolia_instant_search.js' | asset_url | script_tag }}

<!-- /Algolia head -->
  • the snippets are rendered in JavaScript using Hogan.
  • the assets are either JavaScript or CSS. Some are JavaScript libraries, others are scripts. You can find them in your theme files.

Snippets are loaded while your page is rendered and executing Liquid. They’re all small, so their impact is negligible.

Assets are loaded using individual external requests. Fetching libraries takes some time (< 1 MB total). The scripts are small, but the bottleneck is on the necessary HTTP requests to fetch them.

 

Fetching

Fetching assets happens only on the first load of your page by a customer. Furthermore, assets are hosted on the Shopify CDN, which is distributed around the globe to serve pages faster. Finally, most browsers will actually run five or six HTTP requests in parallel, which results in about only two or three round trips.

 

Execution

Your browser needs to execute the loaded JavaScript code. This action is blocking, which is why Google PageSpeed will tell you to “eliminate render-blocking JavaScript and CSS in above-the-fold content”.

This is a valid suggestion, and there’s a straightforward way to do so:

  • open your layout file (often layouts/theme.liquid),
  • identify the block delimited by <!-- Algolia head --> and <!-- /Algolia head -->,
  • move it right before your closing </body> tag, at the end of the file.

The reason we’re not doing this by default is because almost all of the Shopify scripts we’ve seen are added inside the <head> tag. This allows our users to clearly see that there was code appended.

 

Optimizing

jQuery

Most themes already include jQuery, but since some don’t, or include an old version, we need to include it every time. However, if you’re using a recent version of jQuery, you might want to remove ours. You can remove the line that includes it from the block.

You’ll also need to edit one file, algolia_init.js.liquid:

// Replac
algolia.$ = algolia.jQuery = $.noConflict(true);

// With
algolia.$ = algolia.jQuery = $;

 

Autocomplete

If you are not using the autocomplete, then you can remove:

  • the autocomplete.js library,
  • and algolia_autocomplete.js.liquid.

InstantSearch

If you are not using InstantSearch, then you can remove:

  • the instantsearch.js library (both the CSS and JavaScript files),
  • algolia_facets.js.liquid,
  • algolia_sort_orders.js.liquid,
  • and algolia_instant_search.js.liquid.

Minification

Our JavaScript code is tiny, so minifying it won’t be beneficial. We chose to keep it unminified, so that you can modify its behavior easily. If you want to, feel free to minify it.

 

Last reviewed 16-11-22.

Related articles