My new blog present here.

Featured Post

Insights into Sitecore Search: A Definitive Introduction

A key component of digital experience management is effective information retrieval. A simplified approach is required for websites, applications, and platforms containing a lot of material so that consumers can easily get the data they require. This need is met by Sitecore, a well-known name in the field of digital experience platforms (DXPs), which provides powerful and comprehensive search functionality. We will travel into the realm of Sitecore Search in this article, learning about its capabilities, architecture , and the enormous value it offers both developers and end users. Introduction to Sitecore Search    A headless content discovery platform powered by AI , Sitecore Search enables you to build predictive and custom search experiences across various content sources. To extract and index you

Sitecore-Front-end performance tuning points


In the previous Sitecore Performance Tuning article, i tried to explain about that Sitecore website performance depends upon Front-end items and Sitecore items and shared the listing of items, which we need to consider.

Sitecore Performance Tuning Article Series:
Sitecore 9 Performance Tuning
Sitecore Front-end Performance Tuning
Collect Sitecore Site Performance Data Points
Sitecore 9 Performance Tuning :: Sitecore box performance tuning points

In the continuation of Sitecore performance tuning, I will try to explain the ways which needs to be consider in Front-end development of Sitecore website.

Page Weight: 
While creating the html schema of the page with media items, we have to taken care of :
  •  HTML schema of the page because unnecessary number of HTML object will also increase the page size, so need to use least number of HTML objects and to avoid use of HTML table objects and embedded objects.

  •  Optimized image needs to be used as per channel. Before starting of implementation, asset validation needs to be done and in which load time of image needs to be validated. If taking more time then optimize image can be used. For image optimization, some of the inputs are:
 
Dianoga Plugin:





Requests: 
In the Website development, if you have implemented more calls to request any type of resources then performance of the website will decrease, so you have taken care following items:

  •  Reduce the number of request and it can be image, static resources (css, js), Ajax call, Server side code to make many calls to third party resources, etc.

  • Minify the CSS and JavaScript files. In one of the session, I tried to explain how Static Resources (JavaScript, CSS) can be manged and impact of Static Resources Management strategies. You can check the slides at:


DOM (Document Object Model): 
In the Website development most of the times, we are writing JavaScript based code to manipulate the DOM. If we are using heavily  DOM manipulation then Site performance would be slow because manipulation or logic would be executed after page render and user will not be able to perform any action on the screen.
If you still need to perform DOM manipulation then use:

  •  JavaScript based Framework like ReactJS which will work on Virtual DOM not the actual DOM and will help in increasing the page performance. 

 •  Avoid DOM manipulation on CSS CLASS name and always good to write the JavaScript function and call the function on particular JavaScript event and maintain neat and clean JavaScript file. In my session MANAGE STATIC RESOURCES IN SITECORE IN HELIX WAY , I explained how to maintain JavaScript code.

 •  Avoid use of IFRAMEs because, it will fetch the data from other site and we are not having control on optimization of other site content.


JavaScript/JQuery: 
Refactoring and code optimization of JavaScript code is very important because after performance optimization at server side, if you site is not loading faster then route cause can be static resources. In this case:

 •  Use modular approach to write JavaScript code.

 •  Avoid repeatable code.

 •  Validate the JavaScript logic and remove unwanted objects which store large amount of data.

 •  Avoid JavaScript version conflicts.

 •  Rectify all JavaScript related errors.

 •  Avoid writing JavaScript at page level and wherever possible use require to load JavaScript file

CSS (Cascading Style Sheets): 
Develop framework of CSS file, so that easy to maintain. You can look into following items for CSS development:

 •  Organize the CSS file in proper way, it means write the css class as per the page structure like header, navigation, etc.

 •  Write code in readable.

 •  Use proper naming convention, Scalable vector graphics (SVGs) images for logo, icon charts, etc. and use ID selector for writing css class.

 •  Avoid inline styling, @import, !important, Base64 bitmap images

 •  Compress the CSS file by taking care of files order and reduce the size of css file.

 •  Avoid unnecessary nesting of css classes because while page load browser will go from top to bottom of page and will check each and every DOM element to find the required CSS classes.

 •  Modular CSS implementationformat  the number of request and it can be image, static resources (css, js), Ajax call, Server side code to make many calls to third party resources, etc.

 •  Load functionality specific CSS files wherever required.

 •  Avoid using background image and utilize the CSS for these type of effects.

 •  Remove un-wanted fonts


References/Ping back:
how to monitor javascript performance
how to benchmark javascript performance
how to analyze javascript performance
how to improve javascript performance
how to increase javascript performance
javascript best practices for performance
javascript performance best practices
css performance optimization
css performance tuning
css performance best practices
css performance selectors
css performance issues
how to increase css performance
how to optimize css performance
what is css performance
css performance analysissitecore 9 performance counters
sitecore 9 experience editor performance
sitecore performance guide
sitecore 9 performance issues/problems
improve sitecore performance
sitecore performance optimization
sitecore solr/sxa/redis/rendering/pipeline performance
sitecore performance white paper
sitecore 9 slow performance
troubleshooting sitecore performance

Comments

Popular posts from this blog

Sitecore GraphQL Queries

Configuring Sitecore Next.js Headless SXA Multisite App in a Sitecore Container

Sitecore Experience Manager Cloud (XM Cloud) Building blocks