PageSpeed problem

Hello, i have problems with my shopify website : my PageSpeed Score is very bad and the problem is algolia

What the solution for fix the delay for loading my website !? thanks

Hello,

We’re currently working on improving the size and load time of our Shopify plugin, the update should be available in the coming weeks.

Meanwhile you can at least defer the JavaScript files to improve load time:

  1. Go into your theme code editor and open theme.liquid
  2. Replace the following lines:
  {{ '//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 }}
  {{ '//cdn.jsdelivr.net/npm/instantsearch.js@4.0.0/dist/instantsearch.production.min.js' | 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 }}

by:

  <script src="{{ '//cdn.polyfill.io/v2/polyfill.min.js' }}" defer="defer"></script>
  <script src="{{ 'algolia_dependency_lodash-3-7-0.min.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'algolia_dependency_jquery-2.min.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'algolia_dependency_hogan-3.min.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'algolia_dependency_autocomplete.jquery-0-24-2.min.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'algolia_dependency_algoliasearch-3.min.js' | asset_url }}" defer="defer"></script>
  <script src="{{ '//cdn.jsdelivr.net/npm/instantsearch.js@4.0.0/dist/instantsearch.production.min.js' }}" defer="defer"></script>
  <script src="{{ 'algolia_config.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'algolia_init.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'algolia_analytics.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'algolia_translations.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'algolia_helpers.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'algolia_autocomplete.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'algolia_facets.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'algolia_sort_orders.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'algolia_instant_search.js' | asset_url }}" defer="defer"></script>
  1. To avoid any flickering during Algolia initialization you may want to hide the result page during the page load, for this you can add an inline style in theme.liquid:
  <style id="algolia-content-hide">.my-results-css-selector { visibility: hidden }</style>

then remove it after InstantSearch is initialized, at the end of algolia_instant_search.js.liquid, after instant.search.start(); add

  var contentHide = document.getElementById('algolia-content-hide');
  contentHide.parentNode.removeChild(contentHide);