Optimize Homepage Load Speed

Question

Any way I can reduce these numbers? This is the only page that loads incredibly slow compared to others. I enabled Debug in Experience Editor to see this. Sometimes the page loads slow sometimes it loads fast

Answer 1

You can try below things

1. Put Sitecore cache on particular component.
2. Check if unnecessary JS and CSS files rendered on page, tried to render those in optimize format. It will help you to improve page performance
3. Render images according to container size from server side by setting up height and width parameter on image.
4. Move all JS files at bottom on page.

Answer 2

There are a few things you can check on the front end side and Sitecore side.

Front End

In the front end, there are multiple tools are available to check performance on mobile and desktop which also provide suggestions as well.

1. GTMetrix: GTMetrix is a tool that analyzes page speed and performance. It generates scores for our pages and offers Pagespeed and WiSlow. It is a free tool that we have found to be used to get detailed reports about site performance. It creates scores for the pages and also provides recommendations to fix them

2. PageSpeed Insight: Shows speed field data for your site, alongside suggestions for common optimizations to improve it. PageSpeed Insights (PSI) reports on the performance of a page on both mobile and desktop devices and provides suggestions on how that page may be improved. PSI provides both lab and field data about a page. Lab data is useful for debugging performance issues, as it is collected in a controlled environment. However, it may not capture real-world bottlenecks. Field data is useful for capturing true, real-world user experience - but has a more limited set of metrics. See How To Think About Speed Tools for more information on the two types of data.

3. Lighthouse: Lighthouse is a chrome plugin that gives you personalized advice on how to improve your website across performance, accessibility, PWA, SEO, and other best practices

4. Sitecore Speedy: This is a Sitecore package that you need to install in Sitecore. Speedy provides a Sitecore Layout and Asset provider that structures your HTML in accordance with Google's recommendations. Google ranks your website with a score out of 100 and provides recommendations on how to achieve better scores. Implementing Critical CSS and Deferred Javascript loading can be tricky. This module provides a framework and brings together the tools needed to automate the process.

Other than this many other tools are available like dotcom-monitor and JMeter for load testing.

All front tools provide you suggestions like to reduce image size, use defer or async, remove used js/css, show blocking resource, avoid multiple network calls, use CDN, apply lazy loading on image, add js into bottom instead of the top.

Sitecore Side

On the Sitecore side there are multiple things you can check which is mentioned in below points:

1. Sitecore Cache: Make sure the Sitecore cache is implemented. Configuring sub-loyouts and rendering to use cache, this can give a real user browsing experience to site users. Also, check cache.aspx page for more detail.
2. GetDescendants: GetDescendants can prove to be really expensive, it is best to use indexes or fast queries.
3. Log Review: Review your logs if any error is coming. Seems like some issue with BaseLayout.cshtml
4. Sitecore Stats: Check /sitecore/admin/Stats.aspx page. The Sitecore Stats page provides rendering statistics for all registered sites. This includes load times, cache sizes, average time, last run, total items etc. It also identifies how many times components have been loaded from the cache.

Answer 3

Try to see Sitecore logs for any errors on that specific page load. Otherwise if possible use db backup in dev env and debug the renderings associated with your placeholder "homecontent" to see which line of code is causing delay/issue and take action accordingly.

Answer 4

There are number of reason when a page takes time to load, so first need to analyze its cause.

• you can check your website page speed online e.g. using site https://pagespeed.web.dev/ , it will also suggest you the resolution
• for media - You can use CDN to serve the request or cache the components
• you can also optimize image using tool like Dianoga
• Minimize your JS and CSS files and it will be good if you only load required jss/css for the page
• you can also use lazyloading on images -Check Network tab and see which part of page is taking more time to load.

First apply all these check then it will give you fair idea for next step.