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