Web Performance Optimization.
Photo by Carlos Muza on Unsplash
Optimizing a website can mean Performance Optimization and it ensures your website runs faster and smoother.
Why is it important?
Photo by camilo jimenez on Unsplash
Serves website faster and uptime of the site
Less Amount of Data transfer
Less Load on the server
Usability
Smooth User Experience
How do we Optimize our website?
Photo by Austin Distel on Unsplash
Before Optimizing your website, go through writing ideas on how to improve the performance of your page. Think of what to improve and why it should be improved.
You may have a bunch of ideas, this is when you will have to prioritize. What ideas are most important and can’t be overlooked? Then you move to the test and analysis phase, this is where you write how to test and analyze some of these ideas.
The last stage is optimization.
Optimization Methods
Photo by Austin Distel on Unsplash
Minification of Assets
Minification is the process of minimizing your code, markup and script files. It can also be called compression. It is one of the major methods often used to reduce load times and bandwidth usage. This can be achieved by using tools like NanoCSS, UglifyJS etc,
Image Optimization
Image Optimization is about reducing the file size of your images so that your page load times remain low and faster. It is about delivering high-quality images in the right format, dimension, size, and resolution.
Image optimization can be achieved by reducing the file size of your images, naming images descriptively, optimizing the alt attribute, choosing the right file type and using image sitemaps.
Lazy Load Images
Lazing loading images is the process of loading images on our website asynchronously (at different times) which means if a user doesn't scroll to a particular section of your page, images of the section won’t even load.
Pre-loading
By using the Preload method, you are informing the web what to load first. Other assets may load later, but important assets that can aid first-time user interaction should load first.
You can use HTML attributes to inform the browser of the importance of resources loading at the same time.
Font Display
Avoid text that requires fonts to load before it displays on your page. Font-display descriptors can determine how a font should be displayed and when it is downloaded and ready to be used.
You can use the swap descriptor to swap fonts once they are loaded.
Remove Dead Code
Dead code is unnecessary, inoperative code that can be removed.
Removing dead code such as a variable, parameter, method, components, class etc will increase quality, lower load time and decrease file size.
Code Splitting
Code splitting is a popular technique and one of the most interesting features of webpack. It allows you to split your code into various bundles which can then be loaded on-demand or in parallel.