Have you ever considered the performance of your website, how fast your content loads, and what is the response time of your page?
All these things should be your priority whenever building any product for real-world users.
Even a one to two seconds delay on your website can drastically affect the user experience and your site traffic.
Consider any big company such as Amazon or Uber, just a 1-second delay on their website can make them lose hundreds and thousands of customers, a considerable number I know. Now try to apply the same for your website or app.
Just by taking care of few things and following some best practices, you can make your site a lot faster, and you will see a massive improvement in your product performance.
So, now let's see what those small details that you can focus on to increase the performance of your website are.
1. Optimize your media files size and format
We all put images and media files in our page to make it more appealing, but the images and gif files that you put on your site have to be downloaded by the browser to show to your users, so if you put large-sized images on your site, it will surely make your website slow.
So it is recommended to use some external picture tools to resize your image and also decrease their size without degrading the quality of your files. For the optimized loading time of your page, it is best to stick to some standard file formats such as jpg, png for images.
And also, don't try to use images for showing some text stuff; prefer to use text instead because the image will increase unnecessary loading time and won't even help in SEO.
These tools can help you achieve this:
2. Avoid using inline JS and CSS files
It is an excellent practice to write the JS and CSS code for your website in external files. Not only the external files are easier to maintain, but they are also cached by the browsers to save time on further loads.
If you define everything in a separate CSS and JS file, the browser will find it easier to apply the styles and functionality to your page.
3. Write Cleaner HTML
Most of the time, what we do is add unnecessary HTML on our page and fill it with different types of headings, strong and italics tags when we can quickly achieve the same effect with CSS. So rather than putting a lot of code on your HTML file, try to keep it simpler and use CSS alternatives, which will make your page cleaner and more comfortable to load. But it comes on a cost that some old browsers may not support some CSS properties, so make sure you take care of all browsers while writing CSS.
4. Load JavaScript files asynchronously or at the end of the page
It's always a good practice to put your script tags just before the body tag closes so that your javascript files load after the whole content part of your webpage is loaded. Or, if you want to put these above the body, then make sure to put defer attribute inside the script tag to make sure the file loads after everything is done loading. It allows the browser to render everything before getting started with JS.
Also, you can use asynchronous javascript so that it loads parallelly with the content and doesn't disturb the flow of the website. Ajax can help you achieve that so that instead of reloading an entire page when a user acts, we can update parts of that page. You can also put an async attribute on your script tags to load the file asynchronously.
5. Utilizing the Browser Caching Feature
A lot of files on your website don't often change with time,
Web caching is when files are cached by the web browser for later use so that when a user revisits your site, the browser doesn't have to load everything from scratch. Things that browsers can cache include CSS files, JavaScript files, and images.
So, make sure you make a website that takes maximum benefit of the caching feature, the local storage, cookies, and server cache.
This highly reduces the server response time, and a user can visit your website again and again, and the user experience gets better every time.
If you want to learn more about how to leverage browser caching, then check out these articles.
6. Minify and Combine your files
All the files that you put on your page have to be downloaded by the browser to render, so by reducing the number of files, and you automatically make the rendering faster. Take into consideration the number of Html, CSS, and JavaScript files on your page. They all add to the number of requests your site makes every time a user visits your page.
You can reduce this number by "minifying" and combining your files. Minifying the files reduces the size of each file, and combining the files reduces the number of files.
Minifying a file involves removing unnecessary formatting, whitespace, and code. There are a lot of online tools that can help you achieve the result. Every unnecessary piece of code adds to the size of your page, so it's essential to use minified files to load your page. This ensures that your pages are as clean as possible.
If your site uses multiple CSS and JavaScript files, you can combine them into one and achieve the same result.
Check out these fantastic tools if you want to optimize your files:
- I highly recommend using Gulp for minimization and optimization of your files, so do check it out.
- YUI compressor
- UglifyJS
- cssnano
7. Using the right hosting option and service for your product
When you are doing projects for yourself or demo purposes, it's good to go for free hosting options rather than paying for a domain name and hosting services. Still, once you start making apps for the real world that attracts a significant amount of traffic, it's better to move to a good paid hosting service rather than choosing the cheapest option. Read for reviews of different platforms and choose what suits your needs best.
Some popular hosting services are:
- Bluehost
- HostGator Cloud
- DreamHost
- GoDaddy Hosting
- SiteGround
8. Use an online tool like Lighthouse
Once your website is complete, you can go and use any page speed analytics tool available online. If you are using chrome, then there is a lighthouse tool present in chrome dev tools, it gives you analytics about your webpage performance and also provides you some tips with which you can increase your page's performance, so give it a try.
And that's it. These were some best practices that, if you start using your webpage, will perform a lot better.
Daily delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.
Top comments (4)
Glad you liked it 😊
Actually for critical CSS, it's usually recommended to inline them to improve FCP
web.dev/extract-critical-css/
You are right, sometimes it becomes necessary to include inline css but it depends on the amount of css if you wanna write just few lines it won't affect the rendering but if you put a large amount of css code in your html file, it will affect the load time and the html of your website will load slowly