Web Site Optimization(Faster Loading): Maximum Website Performance
First Of all let me tell you for what this topic is? :-
Optimization is for how to make our website more faster. If i am saying faster that means faster in loading of page(images,css,javascript,outer resources).
"Web site optimization produces highly competitive web sites that out-perform on every measure; traffic, speed, conversion rates, sell-throughs, and, most importantly, return on your investment."
When we develop any website that time we need to take care certain things in mind . these below topic plays a key role for website optimization :-
1 )Minify CSS :- The term Minify or compression of CSS means removing all unnecessary characters, such as spaces, new lines, comments without affecting the functionality of the source code. The Reason Behind This is that unwanted characters become extraneous: being insignificant for code execution, they increase the size of code to be transferred. Therefore it is considered good practice to remove them before deployment.
2 )Put CSS in the document head :- The STYLE element, placed in the HEAD of your document, works better than inline styles, but it still isn’t the best way to add styles to your documents. There are some advantages to this method as well:
--Lets you apply styles to multiple elements with just one style property
--They can be added more quickly than external style sheets, but not as quickly as inline styles
3 )Minify HTML :- Compacting HTML code, including any inline JavaScript and CSS contained in it, can save many bytes of data and speed up downloading, parsing, and execution time.
4 )Minify JavaScript :- The main purpose of JavaScript minification is to speed up the downloading or transfer of the JavaScript code from the server hosting the website’s JavaScript. The reason that minification makes downloads go faster is because it reduces the amount of data (in the minified JavaScript file) that needs to be downloaded.
Minifying JavaScript is to removing all characters that are not necessary from the JavaScript source code.But also keep in mind that removing line of code should not effect on the existing functionality.
In javascript minification we used to remove whitespaces, newline,comments etc.
5 )Inline small CSS :- If we have small css codes and we are writing it into external css files, and externally if we are including to our html files, then compare to inline css external css files will take more time to load. Because loading of one file will take less time as comapre to downloading two files.So it will be better practise to include small code of css into html head section. this will lead to website performance.
6 )Optimize the order of styles and scripts :- Style tags and calls to stylesheets should be placed before your scripts. If you do this your pages load faster.
Correctly ordering external stylesheets and external and inline scripts enables better parallelization of downloads and speeds up browser rendering time.
7 )Serve scaled images :- It is a bad practice to not to use scaled images to website. the reason behind this is that a webpage has to download full size image in spite of it is not in use.
suppose if we want to show a image on our website of 50*50 px size image, and for showing that we are using a image whose size is 1024*1024 image. This image will be scaled to 50*50 size image on website but it will make a page slower becaue browser has to load image size of 1024*1024 , wich will take more time compare to load image of sixe 50*50 px.
The basic logic is that if you are showing a smaller version of that image to your users, then why not make the image file itself smaller too? If you do it will speed up your webpages because the browser won't have to download such a large image.
8 )Optimize images :- Image optimization is using the most compressed (smallest file size) yet visually acceptable image in the proper file format for the specific role of the image.
optimized images are essential for the success of a website, especially if images play a large role in the site.
