| Table of Contents |
|---|
...
Question: I just used submitted my site to PageSpeed and my website's pages are loading very slowly. Why?
Have you just tested the speed your website loads pages for users, e.g., using a site like PageSpeed and wonder why the score came back so low?
There are several variables that can affect the speed pages load on site:
- Content (e.g., large banners)
- Many campaign products
- Script Bundling (Using Scripts and Styles)
- Deferred Scripts
Lazy Loading
Complexity in the customisations
Background tasks etc
We will go through them one by one. Some of these are in your control. We'll discuss these first. Others require consultation with Commerce Vision to implement...
Upgrade to the latest LTS version
Ensure your website is upgraded to the latest LTS version as that will always have the most up-to-date modifications to ensure best site performance.
Create Content Thoughtfully
- Think about the content on your pages, especially the home page since this is usually the first page for visitors.
- Ensure images are optimised as they load faster and consume less data. Use extensions especially created for online.
- Consider the number of banners, e.g., for Campaigns, that are on one page. Campaigns are usually image rich, and having too many campaigns on your webpage can slow down page loads. Check the page load speed before and after adding a campaign.
Use Lazy Loading
Lazy loading means that the loading of non-critical files are delayed until they are viewed. Suppose you have a slider campaign for more images than what is currently viewable on the screen. With lazy loading enabled, the images that are not on screen will not be loaded until the user can see them. This allows non-critical files especially from banners and articles to be delayed until needed. By default, this feature is automatically enabled for your website.
- Check that lazy loading is on for your website. If you think lazy loading is not on for your site, please contact Commerce Vision Support.
Consider customisation complexity
Eliminate render-blocking resources
Render-blocking resources prevent or slow down page load speeds. When a browser normally renders a html page, it will pause parsing the html if it finds a JavaScript <script> tag, and continues only when the JavaScript has been loaded and executed (or just executed). This slows down the overall page render time. One of the most beneficial ways to increase load speed is to make sure your JavaScript files are located in the most efficient .
| Info | ||
|---|---|---|
| ||
JavaScript is a scripting language used to create and control dynamic website content. This includes anything that moves, refreshes or otherwise changes on your screen without requiring you to manually reload a web page. When users on your site view a page, the JavaScript code executes/runs the tracking operation for Google Analytics and stores this as a visit. It will also track a user if they have gone to a product view page or checkout. |
Things you can do
Use Scripts and Styles where possible
...
CSS and JavaScript use
If you run a page of your site through a page speed tool, it is likely that at or near the top of the suggestion list are things like reduce unused JavaScript and CSS or 'Eliminate Render-blocking Resources'.
This critical factor typically means take a look at the CSS and especially JavaScript resources added to the page. First though, such coding is part and parcel of how web content is created. Web page styling and functionality would not be the same without them. Especially dynamic and interactive content. However, bear in mind that each CSS and JavaScript request has to be processed by your users' browsers or the server before a page will load fully. When a browser normally finds CSS or JavaScript <script> tags, it will stop loading HTML until the scripts have been parsed, compiled and executed. And having to do this multiple times slows down the overall page render time.
And even even if the JavaScript is not render-blocking, it competes for bandwidth with other resources while it's downloading, which has significant performance implications. Sending unused code over the network is also wasteful for mobile users who don't have unlimited data plans.
So one of the most beneficial things you can do is to ensure your styles and (especially) scripts follow page load efficiency practices and utilise the tools the Customer Self Service eCommerce Platform has to help achieve this.
What you can do:
- Ensure your custom styles and scripts have been written to best coding practices:
- Efficient coding with no unnecessary elements.
- Do not add too many widgets and independent scripts on the one page
- Utilise the Scripts and styles function in the CMS where possible instead of uploading each JavaScript and referencing it in a HTML Snippet widget. Scripts and styles has been designed to maximise efficiency by:
- bundling related scripts and styles into one widget and called as a unit instead of multiple units,
- allowing you to disable unneeded scripts and styles by easily turning them off (just untick the checkbox next to the widget in the page layout),
- taking advantage of layers and only serving up the Scripts and Styles if relevant for that audience / functionality.
...
- The locations that will be considered includes:
- Our built in widgets, razor files and script references need to have the above changes built in.
- Resources sometimes include script blocks, whether that be js code or script file references.
- Html Snippets or Custom Widget sometimes include references to js files that need 'defer' attribute on them.
- Customer JavaScripts that may not have been written the most efficiently, e.g., document ready sometimes runs too early.
- Consult with Professional Services to minimise JavaScript loading to only those the page requires at the time. Javascript Dependency determines what JS files are needed and generates a bundle of these JS files. It then provides that link to the browser instead of the user agent getting ALL script files via the theme.min.js and related files. This function is not intended to be turned on for the whole site but for Home.aspx pages.
...
Summary
...
What else you can do:
- If you need deeper analysis and technical expertise, book a time with Commerce Vision's Professional Services to discuss what we can do to help.
- We can also implement features we have specially created to minimise JavaScript render-blocking on your web pages so that they appear more quickly to users.
- Our JavaScript Defer feature defers JavaScript loading and execution (including inline script blocks) until the HTML has been parsed on a page. The solution uses our expertise to defer in an orderly way (For versions 4.17+)
- Our JavaScript Dependency feature reduces JavaScript execution to only those a particular page needs. The solution automatically works out what JavaScript files are necessary, bundles them and provides a single link to the browser to lower resource use. (For LTS 2022.1 version onwards)
Image Optimisation
Think about the content especially images (and other rich media) on your pages, especially on key pages such as the home page and SEO landing pages. As a guide, keep an image’s dimensions (h x w in px) to only as large as is needed to fill its container. And experiment with compression to reduce file size (kb) while making sure visual experience is not compromised. TIP - The home page as well as product pages should be priority since it is usually the first page for users and SEO search results. Find out what other pages are common SEO landing pages on your site. Here is an article with useful tips.
Also consider the implications of campaigns, and the number of products in them. TIP - Limit to one campaign with a maximum of 5 products for desktop and 2 for mobile.
What you can do:
- Minimise the use of images on key landing pages as much as possible (without compromising the aims of the page to your users).
- Ensure images and other rich media are optimised for online use. This means striking the right balance between quality and performance (how load speed is affected). Compression, format and size matter. Your image editing software, e.g., Photoshop, will have image optimising tools, and when exporting the file, choose the best file format, compression setting, and dimensions. Here are some tips.
- Consider the number of banners that are loaded on the one page, e.g., campaign banners. As these are usually image-based, having too many banners on your home page can slow down page loads.
- Utilise device optimisation for banners in the CMS.
What else you can do
Ensure Lazy Loading is enabled. The Lazy Loading feature ensures that the loading of non-critical files are delayed until they are scrolled into view (on screen or what is called 'above the fold').
- Lazy loading of banners, images and product images is enabled by default for all websites. If you think lazy loading is not on for your site, please contact Commerce Vision Support.
Here's an example of how lazy loading works. Suppose your home page has a slider campaign. Only one slide is viewable on your user's screen. With lazy loading enabled, an image file will not be loaded until the slide is in view. This allows non-critical files to be delayed until needed.
Background tasks
If your site uses third party plugins and addons such as marketing and tracking software and scripts, test that they are not adversely affecting page load speeds.
Summary
There's quite a bit your eCommerce team can do to help increase page load speeds. Keep monitoring, testing and optimising! If you require further assistance than this, book a Professional Services consultation to assess your site and implement additional measures.