What is web performance really mean Why no one cares about Web performance.
How to make websites to load faster.
Web performance is the main thing for any website to gain profits or Loss .Any Websites that take more time to load will loss the traffic even "Google" kick them off and not recommended to that site to show on the first page.
I have seen many sites they have good design and clean code but
performance is Very low.
Whatever Language/Technology you choose to create a website.
Browser doesn't care about it. Because of we only ship Html, CSS, and JavaScript files at the end.
Have you seen Accept headers in the Network Tab
What really happens when we hit an URL on the tab
First Browser finds the DNS-Lookup for the URL.It transforms the URL to the IP address and Before send a request Three-way Handshaking has Happened it takes 56ms to get Acknowledgement. If we make redirections it will cost more Browser needs to find out new IP address it will take extra time.
Three Way Handshaking
It means both server and client can agree on what order data is transferred
Once Acknowledgement is received Browser Sends a Request to the server and server gives the response back.This is often we called as Client-Server Computing.
First, we get HTML document from the server then Browser starts parsing the HTML file and creates the Dom(Document object model).Once Parser reaches the Link tag Which is our CSS then browser Sends another request
to get the CSS. The browser only allows 6 requests per host.
When we made the 7th request Browser Places it in the queue.In Http/2 Multiplexing is allowed we can send more than 6.
Images
When using images in the sites google doesn't recommend png format use webp/jpeg.Currently, chrome supports webp others browsers are not supported.
Use images whenever required compress the images before shipping it to the Production.Crop the images to the required width/height
check on chrome dev tools it shows the required width/height.
Html/CSS
Minify the Html and CSS files if it possible remove comments from the code Because browser doesn't care about comments you write in the code.
Comments increases an extra number of bits from the file.
Use shorthand rules in the Css for example:Use 'margin' instead of margin-top/left/right/bottom.
Use Chrome audit tab to measure the web performance it clearly shows the messages which resources takes more time to fetch.
"If your site looks good/feels good doesn't make you more traffic site
needs to be load fast".
Check out these If you have time How Pinterest Increases Web performance
Case study
Top comments (0)