Versions Compared

Old Version 4

changes.mady.by.user Documenter

Saved on

compared with

New Version 5

changes.mady.by.user Documenter

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Slower than expected site load speeds negatively affect user experience. Especially on mobile devices where fast sites that don't use up too much precious data are taken for granted these days. For eCommerce websites, load speed can be critical . Slow sites can cost potential customers, conversions and ordersROI. There may also be other effects. For example, SEO position rankings now take page load speed into consideration when returning search results for both organic and paid ads ad positioning.


If you have tested your site with a tool such as PageSpeed or WebPageTest, the report would have come back with a list of issues and suggestions for improvement.  

 

There are several variables that can make a difference to how fast your Customer Self Service eCommerce Platform website loads. In a nutshell, most will be related to decreasing file size, storage space, and the amount of information that the server needs to send to each user. We have broken up to

 

Specifically for your Customer Self Service eCommerce Platform website loads, there are several variables that can make a difference to how fast your site loads. Here, they have been broken up into these:

    • CSS and JavaScript use
    • Content optimisation (e.g., many banners, media not optimised for online, images, videos, etc)
    • Customisation complexity
    • Background tasks

Some of these optimisation strategies are in your control. Others may require technical analysis and expertiseconsultation to implement.  

CSS and JavaScript use

If you run your site through a page speed tool, it is likely that at or near the top of the list of suggestions is something like suggestion list are things like reduce unused JavaScript and CSS or 'Eliminate Render-blocking Resources'. 


For If this is one critical factor to address for your website, render-blocking resources will typically refer to uses of CSS but especially JavaScript. Such it will typically mean take a look at the CSS and especially JavaScript uses. First though, 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 and interactive content. However, bear in mind that your visitorsusers' 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 parsed, compiled and executed (or just executed). This Doing 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 your the Customer Self Service eCommerce Platform has to help achieve this.   

...

  •  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, so to be called as a unit instead of multiple units,
    • loading multiple Scripts and Style widgets to operate independently on a page,
    • allowing you to disable unneeded scripts and styles by easily turning them off (just tick untick the checkbox next to the widget in the page layout).

What else you can do:

  •  Book 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/offer services we we have specially created to target minimise JavaScript render-blocking on your web pages so that they appear more quickly to users. 
    • Our JavaScript Defer feature/service 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/service 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 version 4.25+) 


Content

...

Optimisation

Think about the rich media content on your pages, especially high traffic on key pages such as the home page and SEO landing pages. TIP - The home page should be priority since it is usually the first page for visitorsusers and SEO search results. Find out what others are SEO landing pages on your site. 

What you can do:

  •  Minimise the use of images on key landing pages as much as possible.
  •  Ensure images and other rich media are optimised for online use as they load faster and require less bandwidth.  . This means the right balance between quality and load speed. Compression, format and size matter.
  •  Consider the number of banners loading on the one page, e.g., campaign banners. As these are usually image-based, having too many campaigns banners on your webpage home page 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.
  • You can enable widget lazy load for each banner slider. 

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 scrolled into view (on screen or what is called 'above the fold').

    Here's an example of how it works. Suppose your home page has a slider campaign. Not all slides are currently Only one slide is viewable on your visitorsuser's screen. With lazy loading enabled, media files each image file will not be loaded until the user can see themslide is in view.  This allows non-critical files to be delayed until needed. 

      • 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.

...

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 and implement additional measures. 

...