Third-Party Images on your Shopify Page & Impact on Speed

Overview

• 1. The performance of a website can be significantly affected by third-party images.
• 2. Page performance can be affected by slow server response times, slow DNS lookups, Location of third-party servers, and third-party related network aspects.
• 3. Decision between third-party hosted images VS images hosted on your Shopify can be one of the simple but critical factors for your site speed

Identification of Tools for Optimizing Third-Party Images/Block

• Google Pagespeed insights (Recommended)
• GTMetrix
• Google Lighthouse

How Does Third-Party Image Affect Page Performance?

1. Increased Page Load Time

• No control over image format
• No Control over image size
• There is no control over responsive images if it comes with HTML blocks
• Additional DNS lookup
• No control over setting expires header
• Might be delivered from a distantly located server
• Slow servers can add to image load time

2. Increased Bandwidth Usage

• No control over image format image size
• No control over setting expires header

How to Reduce the Impact of Third-Party Images?

1. Optimize third-party images that come from social media/applications

• You need to understand the different options available to the third party (like social media) for images.
• While uploading images on Social Media and using that feed for your website, consider the impact of the image payload on your website while uploading on Social Media.
• If these images are not changed frequently then we recommend uploading these images on shopify rather than using it from the social media feed. ensure that your images are high-quality and of efficient size, or redesign your website section so that third-party images can be used more effectively.

2. Optimize third-party images/block

• There is no scope for third-party images present so we do not have control over third-party images.
• Rather than using HTML sections from social media/ third-party websites, fetch them (if legal and with no copyright infringements) and use your own defined HTML and CSS. By using your own HTML CSS, you will be able to apply lazy loading and picture tags simultaneously. as a result, the image payload for the above fold will be reduced.

Conclusion