Make your website faster with these practical tips 💥
When creating a website, it is important that you think about the conversion. It is only logical that conversion plays a big role within a website. Initiating action by a visitor is what you as a website owner need to focus on, but how do you increase that chance now that you have a slow loading speed on your website? Visitors expect a fast website where their needs are met. They want to quickly find what they're looking for. With a slow website this is quite prevented.
Advertisement
In this article I will give you practical tips to speed up your website. With these tips, your website will soon become as fast as a train. So improve your conversion with these tips and thank me later :D.
1. Compress texts
This is the biggest tip in accelerating your website. By compressing your texts, you make your website smaller in bytes, which means the browser will load your website faster. With this practical tip, you have already accelerated 50% of your loading speed.
Compress your website texts by creating an .htaccess file. This file is read by the browser when you visit your website. This file re-directs and compresses your texts, for example. By adding the following to your ‘.htaccess’ file you will compress your website texts making your website super fast!
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_include mime ^text/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_include handler ^cgi-script$
</IfModule>
After adding the above code in the .htaccess file, you will need to save and transfer it to your server. You can also do this with FileZilla, for example. After you have transferred the file, your website text will be compressed by the browser, which will make your website a lot faster.
2. Photo cache
The photos on your website often take a lot of time, then having your photos cached by the browser will load your website faster. The browser saves the photos if you visit the website for another time. This way the website loads faster and you avoid frustration while waiting. By adding the following to the ‘.htaccess’ file you can cache your photos.
<ifModule mod_gzip.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 5 months"
ExpiresByType image/jpeg "access plus 5 months"
ExpiresByType image/webp "access plus 5 months"
ExpiresByType image/gif "access plus 5 months"
ExpiresByType image/png "access plus 5 months"
ExpiresByType text/css "access plus 5 months"
ExpiresByType application/pdf "access plus 5 months"
ExpiresByType text/x-javascript "access plus 5 months"
ExpiresByType application/x-shockwave-flash "access plus 5 months"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 30 days"
</IfModule>
Copy the code above and paste it into your ".htaccess" file. Now save the file and upload it to your FileZilla server. You have then made sure that the browser will cache your photos, but in addition the browser will also cache your code. This will make your website a lot faster.
3. Load JavaScript and CSS later
The browser loads your formatting and javascript when you visit a website. This does take some time for the browser to load. It often takes two to three seconds to fully load the website, due to formatting and javascript. It is therefore also convenient to load the important parts of the layout first, and the less important ones a little later. This makes the website load faster and visitors can see the content sooner.
Use defer and async attributes in javascript scripts. This will ensure that the script does not load until the essential parts of the website are loaded. The browser then delays the loading of javascript, which speeds up the loading time.
<script defer type="text/javascript">
[code]
</script>
The defer attribute ensures that the script does not load until the visible elements of the website appear. The javascript loads in this way in the background instead of the foreground. This prevents the javascript from blocking the page by loading it first.
4. Compress photos
Websites like imagecompressor.com allow you to compress your photos. This is important when the file size of your photos is a bit high. By using photo compression websites, you reduce this file size and at the same time maintain the quality. The browser takes about one to two seconds to load the photos. Compressing the photos speeds up that process.
5. Postpone image loading
You can also delay loading images to speed up loading time. This is because there is an option to load an image only when it needs to be displayed. For example, the images that are out of sight do not load until it is in sight. This will ensure that the loading speed is accelerated.
Use the code below to apply this option to your photos:
<img src="example.png" loading="lazy"/>
This feature is supported by Google Chrome. See this website which browsers support this option. For unsupported browsers, there is another way to load the images only when they are visible.
<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages = document.querySelectorAll("img.lazy");
var lazyloadThrottleTimeout;
function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
});
</script>
Paste the JavaScript code at the bottom of your code so as not to slow down the speed of your website. Change the photos in your website from:
<img src="voorbeeld.png"/>
to
<img class="lazy" data-src="voorbeeld.png"/>
After you have done this for all your photos in your code, the browser will not load the photos until the photo needs to be displayed.
Having trouble applying the lazy loading feature? Then you can view the article on Lazy Loading CSS-Tricks.
Static website and CMS
For websites created with a CMS system such as WordPress, the speed of a website is often slower. WordPress retrieves its data from a database. The database must be fully read by the browser and this often results in a longer loading time. If your speed is very important, then I recommend going for a static website. These are often faster than a WordPress website.
Conclusion
Have you come this far in this article? Then I want to thank you for your attention. With the tips listed, you can greatly improve your conversion. If you want to know how to greatly improve your conversion, you can check this article for some great tips be given.
Advertisement