Who doesn’t like speed? Get instant answers with one click!! As we advance to the modern era speed is becoming a huge factor in almost every walk of life. Everyone wants to get their order instantly, pay their bills with one quick scan, or transfer their data in few seconds. So in this world where time is money, the web performance of your website plays a huge role in generating traffic, getting visibility, and beating your competitor.
In this article, we will discuss various ways which affect your website speed and simple steps you can take to increase your website’s performance.
What is Page Speed?
Page speed is said to be the time taken by the website to render all its components like images, videos, texts, or the time taken to receive the first batch of data from the server.
There is also a page speed difference for the same website between the desktop and mobile, they are measured with different parameters because of the different experiences the user gets on desktop and mobiles.
Page Speed vs. Site Speed
Although they may sound the same but they have a significant difference between these two terms, Site speed is said to be the average speed of the several pages of the website and whereas Page speed is said to be the loading time of the individual speed.
Also read, How does JavaScript works? A detailed explanation of JavaScript’s Engine Working
Why Page Speed Matters?
If you think your website loading or speed doesn’t matter then you need to think again !! According to Google research, and only a one-second delay in loading of your page can cost to,
- 10% less visibility or few page views
- 18% customer bounce rate
- 5% less conversion rate
So you can see, how much your website loading time affects the website’s traffic and increases the bounce rate ( Bounce rate is an SEO term, which means the percentage at which customers visited your website and leave without further continuing to view the rest page). According to the research, Here are some interesting facts which explain to us how much important is the speed of your website.
- 47% Consumer said they expect website to load within 2 seconds or less
- 40% people leave the website if it doesnt load withing 3 seconds
- If your e-commerce website is making around 100,000$ then one second delay can cause you 2.5 million lost
- If you website take as much as 5 seconds in loading, bounce rate of that website can reach upto 95%
What is Web Performance?
Web Performance of any website is said to the objective metrics and user experience of load time and interactive session of the website. In layman’s terms, the Web Performance of any website is said to be the total time taken to load the website, become interactive and how smooth was the content interaction.
Factors that affect Web Performance
Core Web Vitals
Core Web Vitals are the set of specific factors that Googles consider important in measuring the website’s overall user experience.
Largest Contentful Paint (LCP)
It is a time period taken to load a page from point of the actual user. In other words, the total time taken from click on the link and then seeing the major content appearing on the screen. It is Ideal to have a measurement of 2.5s or faster.
First Input Delay (FIP)
It is the time taken by the website to respond to the user’s first interaction and when the browser was able to respond back to that interaction. It is Ideal to have a measurement of less than 100ms.
Cumulative Layout Shift (CLS)
It refers to the stability of the page when it loads, the amount of the unexpected layout shift of visual page content. It is Ideal to have measurements of less than 0.1s.
Critical rendering path
Critical rendering path is the process or sequence of steps the browser has to go through in order to parse HTML, CSS, and JavaScript into pixels and render on the screen. Optimizing the critical render path of the app can exponentially increase your web performance. Critical Rendering path includes Document Object Model, CSS Object Model, Render Tree, and Layout.
Document Object Model
The Document Object model is referred to the programming interface of the HTML and XML documents. It defines the structure of the content and how can it be accessed and rendered. It is represented by a logical tree, in which each branch has a node that contains branch objects. With the help of DOM elements, you can define the structure, style, and attach events to nodes.
CSS Object Model
CSS DOM works similarly to DOM, where DOM is defined all the content of the page, CSS DOM defines the style of the page. It is pretty much similar to DOM but has a significant difference in the execution. While the browser keeps on executing DOM objects as it moves forward but CSS is a render-blocking, which means browser render block the execution and first process all the CSS because, CSS rules can be overwritten, so content can’t render once CSSOM is not executed.
Render Tree
Render Tree renders both the content and styles, which means DOM and CSS DOM tres are executed and rendered into a single tree. In order to construct a render tree, the browser checks every node, starting from the root, and determines which style is attached to it.
It is important to remember that the render tree only executes the visible content, which means any data in the header section of the DOM is not included in the render tree and if there is any display: none is mentioned to any element, neither that element nor its descendent get attached to render tree.
Layout
A Layout determines how and where the elements are positioned on the page, defining the width, height, and relation to each other. A new layout is structured every time the device is rotated or the screen is resized.
Layout performance is highly impacted by the DOM, if the number of nodes is high it will take more time to render the layout. It can also become the bottleneck due to various animations and scrolling effects, anytime the render tree is updated new layout is created.
Paint
The last stage of displaying content to the screen is painting the pixels to the screen. Once the render tree is created and the layout is defined, the pixels can be painted on the screen.
Bad Server/Hosting
Type of server or hosting service you are employing highly affects the performance of the web. So it is wise to choose the plan and type of server according to your need. For example, a website that has massive user transactions may not perform well with sharing hosting.
Factors to keep in mind before choosing the right hosting of you –
- Server Response Time – period of time taken by server to respond back.
- Storage – type of storage like SSD or HDD, your server is employing to store the data.
- Accounts Per Server – If you are using crowded shared hsoting platform, it can probbably affect the performance of app.
Also read, 25 Practical Blogs To Sharpen Your Coding Skills
Steps to Optimize your Web Performance
Minify CSS and JavaScript
Minification of resources is one of the best ways to improve the performance of your website. Minification means removing all the unnecessary components from your HTML, CSS, and JavaScript which is not required,
- New line characters
- Block delimiters
- White space characters
- Comments
Removing all the unnecessary elements speeds up the execution time, as the requested amount of code from the server is reduced.
Lazy loading
Lazy loading is an easy technique to identify the resources which are non-blocking and loading them only when needed. Thus helping in reducing the critical rendering path’s length resulting in reduced page load time.
Image optimization
Optimizing the size of the images used in the website can drastically uplift the performance of the web. According to the 2016 report from HTTP Archive, 64% of the page weight is made up of the images on the website.
Accoring to the Google, WebP's lossless of the image are Critical path and render blocking resources
It is very important to analyze and recognize the elements which might cause the render-blocking and optimize them so that it doesn’t affect the load time of your website. Here are some rules you can follow to optimize your render-blocking resources,
CSS
- Minify your CSS file
- Lessen the amount of CSS files (use Webpack to assemble all the css file into one)
- Properly call CSS file
- Do not use complex CSS animations which might result in extra work for the browser, to convert complex animation into a smooth frame rate.
JavaScript
Do you know how JavaScript files are executed inside the browser? Here are some steps the browser goes in order to execute the Javascript files:-
- It loads the JavaScript files
- It parses the JavaScript files
- It executes the JavaScript Codes
So it is very important to do not to let the browser load, parses, and executes the JavaScript code before it renders the contents.
- Minify your JavaScript codes (remove extra spaces, characters)
- Move your JavaScript file down to the bottom of the body tag, instead of calling then in header.
- Concentrate all your Javascript files into one (use Webpack to assemble all the JavaScript file into one)
Using Async or Defer tag in Script
You can easily optimize your web performance by using async or defer attributes in your script tags. When you normally use your script tag, browsers generally start to parse HTML, and when it encounters the script tag, the browser stops HTML parsing, then fetches the JavaScript code from the network and executes it, and then finally resumes the HTML parsing again.
Async Attribute
<script async src="scriptURL/PATH"></script>When you use the Async attribute in the tag, Browser parses HTML, and when it encounters the script tag, it continues with parsing HTML and fetches Javascript code asynchronously, and once the code is available, it stops HTML parsing, executes the JavaScript code, and then continues HTML parsing.
Defer Attribute
<script defer src="scriptURL/PATH"></script>When you use the Defer attribute in the tag, Browser parses HTML, and when it encounters the script tag, it continues with parsing HTML and fetches Javascript code asynchronously, and once the code is available, it does not stops HTML parsing, and it continues HTML parsing till whole content is parsed and the finally executes the JavaScript code.
Caching
It is a best practice to store the data which rarely changes, thus reducing the time to load, which gets exhausted in loading the same assets again and again. It is recommended to have 7 days the age of the assets. For websites having high traffic can have server caches to optimize the website performance.
Using DNS Prefetch
Using prefetch DNS in the link tag helps to reduce the time because in general, the browser first requests the firm(third-party) where the cross-origin’s domain name must be resolved to an IP address before making any request.
Reduce HTTP requests
When you make an HTTP request to fetch data, it takes few seconds for data to get available from the server, so if your website is too much dependent on making a lot of HTTP requests to fetch its data, it will affect your web performance and makes the website slower to load.
Using Content delivery network (CDN)
Using CDN can dramatically decrease your website latency by accessing assets in a more efficient way than in normal practice. According to the report, the latency between the normal server(without CDN) and server( with CDN) is an average of 83%.
Also read, What is JavaScript Event Loop?
Final Words
Web Performance really matters when it comes to selling products or writing blogs in the competitive domain. Having bad web performance not only make your website slow but also affects the traffic and user experience which might result that consumer may not visit your website again.
I hope you like my article and if you found the article helpful please share more with your friends and colleague, and Bookmark this website to get an awesome articles like these.
Image Courtesy:- Developer Googles, BackLinko, w3Schools