Site Speed

Getting Started

Make sure that lazysizes.js has been added to your Resources Snippet

            
            
            
            <script defer src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" integrity="sha512-q583ppKrCRc7N5O0n2nzUiJ+suUv7Et1JGels4bXOaMFQcamPk9HjdUknZuuFjBNs7tsMuadge5k9RzdmO+1GQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            
            
          

Lazysizes Unveilhooks Extension

The unveilhooks plugin extends lazySizes to also unveil / lazyload scripts/widgets, background images, styles and video/audio elements.

Please Note: This extension code has already been added to the bottom of the master.js on newer templates.

            
            
            
            <script defer src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/plugins/unveilhooks/ls.unveilhooks.min.js" integrity="sha512-hQ7LIAYhD17CZh6bDzdQI7NThUHmZGcAbGDfCWHO/sOEPRAdlkQFg4gTsKhWWbI1PMUvjD7JjA+5x3pH23Bnyg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            
            
          

CSS (optional)

Add an animation to fade in image after lazyloaded

    			
    				.lazyload, .lazyloading { opacity: 0; }
    				.lazyloaded { opacity: 1; transition: opacity 300ms; }
    			
    			

Images

            
              
              
              <img class="lazyload" data-src="/images/your-image.jpg" alt="Your Image">
              
            
          

iFrames

This can be used on any iframe (videos, maps, widgets, etc.)

            
              
              
              <iframe class="lazyload" data-src="https://www.youtube.com/embed/NpEaa2P7qZI"></iframe>
              
            
          

Background Images

Add class="lazyload" and data-bg="/images/image-name.jpg" to the element you want the background image to appear.

** Remove background-image url from CSS.

            
              
              
              <section class="lazyload" data-bg="/images/image-name.jpg">
                <!-- [ content goes here ] -->
              </section>
              
            
          

Scripts/Widgets

            
              
              
              <div class="lazyload" data-script="/js/script-name.js">
                <!-- [ content can go here ] -->
              </div>
              
            
          

CSS

            
              
              
              <div class="lazyload" data-link="/css/my-style.css">
                <!-- [ content can go here ] -->
              </div>
              
            
          

CSS & Scripts Combined

            
              
              
              <div class="lazyload" data-script="/js/script-name.js" data-link="/css/my-style.css">
                <!-- [ content can go here ] -->
              </div>
              
            
          

Blogs

Lazyload featured images & iframes on blogs

            
              
              {% if post.featuredImageUrl contains 'youtu' %}
                <div class="video-wrapper">
                  <iframe class="lazyload" title="{{ post.title }}" data-src="{{ post.featuredImageUrl | replace: 'youtu.be/', 'youtube.com/embed/' | replace: 'watch?v=', 'embed/' }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                  <span class="sr-only">Video</span>
                </div>
              {% elsif post.featuredImageUrl contains '.jpg' or post.featuredImageUrl contains '.png' or post.featuredImageUrl contains '.gif' or post.featuredImageUrl contains '.jpeg'  %}
                <div class="post-image">
                  <img class="lazyload" data-src="{{ post.featuredImageUrl }}" alt="{{ post.title }}" width="100%">
                </div>
              {% endif %}
              
            
          

Vcard Images

Hidden Vcard images may still show up on PageSpeed Insights even if lazyloaded, make sure to change it from <img> to <object> instead:

            
              <object class="photo" itemprop="image" data="/images/social-sharing.jpg" type="image/jpg">social sharing</object>
            
          

Image Optimization

Alway optimize ALL of your images! This even includes FB Offer Images & social sharing images.

Resizing Your Images

Make sure to save the image as close as possible to the same size that it will be displayed on your site.
Example: if your image will be 900px wide, save your image at 900px wide.

Full-width Background/Banner images are typically saved at 2000px. Please also create a cropped mobile version of background images at 500px wide.

Compress Your Images

There are multiple ways to reduce your image file sizes:

• If you have Photoshop, make sure to use "Save for Web". You can find it in the upper menu under File > Export > Save for Web (Legacy) or use the keyboard shortcut option + shift + command + s

• If you don't have photoshop, there are many online image compressors available online. Here is one below:

  Online Image Compressor >

Large Images (above the fold)

Create Mobile versions of banner images at 500px wide and use CSS to swap the image on moble devices:

            
              @media (max-width: 500px){
                #home-banner { background-image: url('/images/home-banner-mobile.jpg');}
              }