In this blog post, we will tell you how to boost your website performance with proven optimization techniques to speed up your site. Page load speed is one of the most important indicators for any website! An optimized site will increase rankings, improve user experience, and maximize your conversion rate.
We will give some tips on how to optimize your website performance by using Image Optimization, Minimizing HTTP Requests, and Code Optimization.
Image Optimization
Large and uncompressed files will slow down your website. Normally, when you access any page, your browser loads all of the included images.
“Simply compressing images and text can be a game changer—25% of pages could save more than 250KB and 10% can save more than 1MB that way”. (Google, 2018)
Lets say you want to present the content of any specific page with some text and 5 raw, uncompressed, high quality images. In this case, we will state that the average file size of the 5 images is 3mb. Only from the 5 images, our browser needs to load around 15 mb of information because 3mb x 5 images equals 15mb. The average webpage will be around 3mb so in this scenario, your webpage will be at least 5 times slower as the average site! You still need to add the time that it takes to load the HTML, CSS, Javascript, and any additional code that is requested by the page.
Now, after compressing the image files, we will state that the average file size of the 5 images is now 200kb. Only from the 5 images, our browser needs to load around 1mb (around 1000kb) of information because 200kb x 5 images equals 1000kb. With image optimization, your site will probably be faster than the average page!
Free image compression tools in 2023:
We compress our project’s images directly in professional software such as Photoshop but the presented free alternatives will be of great use as well.
Image optimization is not only about compressing files! Sometimes, you want to present the image in its highest possible resolution. For example architects will want every detail of their render to be crisp. In these cases, it is recommended to give the users the option to click on a scaled-down version of the image to display the full version. This way you can load the page faster and still be able to present the images in high resolution.
Minimizing HTTP Requests
When we open a webpage, our browser must also load every requested file. Some of these files include CSS, JavaScript, or any code file that is requested in the page.
When working with CMSs like WordPress, it is very easy to add and remove widgets and plugins. We have seen many WordPress websites with dozens of activated plugins… most of them not actually used! Every active plugin will add HTTP requests, as most of them call for CSS and JavaScript files. Naturally, this bloats the code and increases the load time of the page.
It is the job of the web developer to optimize the website performance with the efficient use of plugins to keep the load time low with the least possible amount of HTTP requests. This is one of the reasons why we always recommend Professional Web Design instead of Free Website builders.
It is also very common to see multiple CSS files requested per page. When possible, we recommend creating one CSS file with all the style code. This way you can call for one CSS file instead of having multiple requests.
Code Optimization
Just as it is necessary to optimize image files, it is also important to optimize your code files! We will present two methods for code optimization: Clean Code, and Minification.
Clean Code means writing the code in a clear, organized, understandable and maintainable way. Any written piece of code needs to be easy to understand by any programmer. It is common, specially when the code does heavy processing, that the code is a mess. By having clean code, you get the possibility to constantly improve its efficiency.
Lets say there is a given function code. If the code is not easy to understand, you will not want to change anything to avoid generating errors. So the code stays untouched, even if the processing could be more efficient.
With a clean and clear code, you can identify every part and dissect the code into smaller sections. Now you can detect possible improvements and implement them easily.
Minification is the process of minimizing code. Its goal is to reduce the code file size and markup.
/* Non-minified css code */
body {
font-style: normal;
font-weight: 300;
font-size: 14px;
line-height: 1.6;
font-family: Roboto, sans-serif;
letter-spacing: 0px;
text-align: left;
color: #3b3d42;
}
.containter {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: auto;
margin-left: auto;
position: relative;
}
/* Minified css code */
body{font-style:normal;font-weight:300;font-size:14px;line-height:1.6;font-family:Roboto,sans-serif;letter-spacing:0;text-align:left;color:#3b3d42}.containter{display:-webkit-box;display:-ms-flexbox;display:flex;margin-right:auto;margin-left:auto;position:relative}
