There are many variables that can affect the speed of the sites, such as
Josh I understand you have worked with OMX on this to improve their Page Speed Score,
Can you please share with Sarah the steps and findings?
What I am after is a publicly available document that can assist customers to self troubleshoot - including optimising images, reducing the number of banners, upgrading to LTS which has additional functionality like lazy load, defered scripts etc.
This will be a document that our Support team can refer our customers to, and if they need additional help from there, we will then be able to offer consulting services.
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 .
What is JavaScript?
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
- Use Scripts and styles where possible instead of the old way where JavaScripts was uploaded in the CMS, referenced in a HTML Snippet widget, and then applies to a page(s) by adding these in HTML snippet. By using the Scripts & Styles widget, you can bundle related scripts and styles into one widget, to function as a unit. Or you can load multiple Scripts and Style widgets to operate independently on a page. You can also easily turn them on and off by ticking the checkbox next to the widget in the page layout.
- Consult with Professional Services to minimise JavaScript blocks using 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 measures.
