diff --git a/source/components/index.html b/source/components/index.html
index 9839cf555ab..eea09566104 100644
--- a/source/components/index.html
+++ b/source/components/index.html
@@ -13,19 +13,24 @@ body_id: components-page
 regenerate: false
 ---
 
-{% assign count = site.components | size %}
-{% assign nocat = site.components | where: 'ha_category', null | size %}
-{% assign tot = count | minus: nocat %}
-{% assign components = site.components | sort: 'title' %}
-{% assign categories = components | sort: 'ha_category' | map: 'ha_category' | uniq %}
-{% capture current_version %}{{ site.current_major_version }}.{{ site.current_minor_version }}{% endcapture %}
-{% assign added_one_ago_minor_version = site.current_minor_version|minus: 1 %}
-{% capture added_one_ago_version %}{{ site.current_major_version }}.{{ added_one_ago_minor_version }}{% endcapture %}
-{% assign added_two_ago_minor_version = site.current_minor_version|minus: 2 %}
-{% capture added_two_ago_version %}{{ site.current_major_version }}.{{ added_two_ago_minor_version }}{% endcapture %}
-{% assign current_version_components_count = site.components | where: 'ha_release', current_version | size %}
-{% assign one_ago_version_components_count = site.components | where: 'ha_release', added_one_ago_version | size %}
-{% assign two_ago_version_components_count = site.components | where: 'ha_release', added_two_ago_version | size %}
+{%- comment -%}Can't use where to count nil because of https://github.com/jekyll/jekyll/issues/6038{%- endcomment -%}
+{%- assign tot = 0 -%}
+{%- for comp in site.components -%}
+  {%- if comp.ha_category -%}
+    {%- assign tot = tot | plus: 1 -%}
+  {%- endif %}
+{%- endfor -%}
+
+{%- assign components = site.components | sort: 'title' -%}
+{%- assign categories = components | sort: 'ha_category' | map: 'ha_category' | uniq -%}
+{%- capture current_version -%}{{ site.current_major_version }}.{{ site.current_minor_version }}{% endcapture -%}
+{%- assign added_one_ago_minor_version = site.current_minor_version|minus: 1 -%}
+{%- capture added_one_ago_version -%}{{ site.current_major_version }}.{{ added_one_ago_minor_version }}{% endcapture -%}
+{%- assign added_two_ago_minor_version = site.current_minor_version|minus: 2 -%}
+{%- capture added_two_ago_version -%}{{ site.current_major_version }}.{{ added_two_ago_minor_version }}{% endcapture -%}
+{%- assign current_version_components_count = site.components | where: 'ha_release', current_version | size -%}
+{%- assign one_ago_version_components_count = site.components | where: 'ha_release', added_one_ago_version | size -%}
+{%- assign two_ago_version_components_count = site.components | where: 'ha_release', added_two_ago_version | size -%}
 
 <p class='note'>
 Support for these components is provided by the Home Assistant community.
@@ -68,8 +73,9 @@ Support for these components is provided by the Home Assistant community.
 {%- endfor -%}
 {% endcomment %}
 
-<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script>
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
+<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/10.17.0/lazyload.min.js"></script>
 
 {% raw %}
 <script id="component-template" type="text/x-custom-template">
@@ -134,6 +140,9 @@ allComponents.pop(); // remove placeholder element at the end
    * filter all components, based on the location's hash and render them into the component box
    */
   function applyFilter() {
+    var logoLazyLoad = new LazyLoad({
+      elements_selector: ".option-card img"
+    });
     var rendered, i, filter, search;
     var hash = location.hash || '';
     var data = {
@@ -142,7 +151,7 @@ allComponents.pop(); // remove placeholder element at the end
         if(this.logo === '') {
           return '';
         } else {
-          return '<img src="/images/supported_brands/' + this.logo + '">';
+          return '<img data-src="/images/supported_brands/' + this.logo + '">';
         }
       }
     };
@@ -201,6 +210,7 @@ allComponents.pop(); // remove placeholder element at the end
 
     // remove previous elements and css classes, add the new stuff and then trigger the fade-in css animation
     $('#componentContainer').html('').removeClass('show-items remove-items').html(rendered).addClass('show-items');
+    logoLazyLoad.update();
   }
 
   /**