Page History

...

Question: I just used submitted my site to PageSpeed and my website's pages are loading very slowly. Why?

...

Question: I have just tested the speed my website loads pages and I am worried about the score. How can I increase the page load speed? 

Perhaps you have just tested your website load speed on a tool like PageSpeed or WebPageTest. And the score came back so low!

We all should want faster page load speeds. Slow load speeds influence visitor user experience - and ultimately, for business, it may lower website conversions, especially on mobile devices. Slower than expected page load speeds can also have other effects you might not have considered, like your Google rankings. 

There are several variables that can affect the

...

page load speeds of your Customer Self Service eCommerce Platform website. Some of the most important are:

• • Heavy CSS and JavaScript use
  • Content (e.g., large banners)
  • Many campaign products
  • Script Bundling (Using Scripts and Styles) 
  • Deferred Scripts
    Lazy Loading
    Complexity in the customisations
    Background tasks etcmany banners, media not optimised for online)
  • Customisation complexity
  • Background tasks

We will go through them one by one and suggests some actions. 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 may require technical analysis and expertise.  

css and Javascript use

If you checked your web page, at the top of the list of culprits may have been something like 'Eliminate Render-blocking Resources'. 

For your website, render-blocking resources will typically refer to uses of css but especially JavaScript. Such coding is part and parcel of how web page content is created. Web page styling and functionality would not be the same without them. Especially dynamic content. However, bear in mind that your visitors' browsers have to process each css and JavaScript request 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 loaded and executed (or just executed). This slows down the overall page render time. One

So one of the most beneficial ways to increase load speed things you can do is to make sure your JavaScript files are located in the most efficient .   

Things you can do

Use Scripts and Styles where possible

...

ensure your styles and (especially) scripts follow page load efficiency practices and utilise the tools your 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 use 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,
  to function
  • so be called as a unit
  . Or you can load
  • instead of multiple units,
  • loading multiple Scripts and Style widgets to operate independently on a page
  . You can also easily turn them on and off by ticking
  • ,
  • allowing you to disable unneeded scripts and styles by easily turning them off (just tick the checkbox next to the widget in the page layout).
   Consult with Professional Services to minimise JavaScript blocks using

What else you can do:

•  Book a time to discuss what consultation with Commerce Vision's expertise and tools developed just for these purposes. JavaScript Defer defers all JavaScript files in an orderly way by loading JavaScript and inline script blocks containing JS that depend on jQuery or other script files having already been executed. This functionality will first be placed on your logged out home page but can be added elsewhere. The Defer functionality can currently be configured per page taking into consideration whether the user is logged in or out on that page.
  
  •  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

•  Ensure you are doing as much as possible to increase page load speeds.
•  Arrange with Commerce Vision Support to use Professional Services consulting services to assess and implement Professional Services can do to help.
•  We can also implement our specially created features that help to minimise render-blocking resources on your web pages so that they appear more quickly to users:
  • Our JavaScript Defer feature helps minimise render-blocking by deferring JavaScript files (including inline script blocks) in an orderly way until the HTML has been parsed on a page. Expertise includes ensuring the page does not break. (For versions 4.17+.)
  • Our JavaScript Dependency feature reduces JavaScript execution to only those a particular page needs. The solution determines what JS files are necessary, bundles them and provides a single link to the browser to minimise resource use. (For version 4.25+.) 

Content Creation

Think about the content on your pages, especially high traffic pages. TIP - The home page should be priority since it is usually the first page for visitors. 

What you can do:

•  Ensure images and other rich media are optimised for online use as they load faster and require less bandwidth. 
•  Consider the number of banners loading on the one page, e.g., campaign banners. As these are usually image-based, having too many campaigns on your webpage can slow down page loads. TIP - Check the page load speed before and after adding a campaign. 

•  Minimise hotlinking. This is where web pages on other servers (yours or those from other sites) are linking to your web page's content.

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 in view (on screen). Here's an example of how it works. Suppose your home page has a slider campaign. Not all slides are currently viewable on your visitors' screen. With lazy loading enabled, media files will not be loaded until the user can see them.  This allows non-critical files to be delayed until needed. 

  • • Lazy loading is enabled by default for all websites. If you think lazy loading is not on for your site, please contact Commerce Vision Support.

Summary

There's quite a bit your eCommerce team can do to help increase page load speeds. If you require further assistance than this, book a Professional Services consultation to assess and implement additional measures.