What can you do to get a faster website? Tips for beginners and advanced developers.
Speed is one of the most important aspects of web development. Pagespeed is usually considered to be the time span between a user enters a website until the content is fully loaded. Media assets, plugins and additional scripts can have a significant impact on the page speed of your website, but there are a few hacks, that can decrease page load time. Whether you’re a beginner or an advanced developer, I’ll sure that you can find some useful tips on how to optimize the page speed of your website throughout this article.
How does a website load its content?
Before we dive into what you can do to optimize the page speed of your website, I recommend you get a broader understanding of how content is being loaded to your website.
When a user visits your site an API-call is sent from their browser to a server. In Dev terms this API-call is often referred to, as being a pull-request, meaning that data is pulled out of a database and loaded into your browser correspondingly. What happens next depends on what type of website you have, but in most cases, there will be a short amount of time from the HTML-file is loaded until the fetched content is fully integrated on your page. This time span will depend on the amount of assets and the size of the content being rendered, and it’s often here that we’ll find room for improvement.
Reduce the size of your assets
Images, Gifs, and Videos are all necessary assets for all modern websites - but the downside is that they take time to load the bigger they get. If you want to reduce the load time for your website, I would reccomend you examine if you can reduce the size of your assets.
If you’re new to web development, the easiest way to make your page load faster would be to compress your images. You can get extremely good results with photoshop/lightroom while preserving the sharpness of your images. Other tools like ImageOptim seem to do the same - although I haven’t used it. I would say that you should try to get aim to get your images down to around 50kb for jpg/png. For videos and gif’s I would aim for 1-5 Mb. depending on the length. If you can go lower - do it.
You should also consider how big your image is. If you’re displaying a 500x300 image on your website then you should try to upload the image in the same size. By doing this you can reduce the image size to perfection.
If you want to take loading to the next level and give your users a more seamless experience on your website, you can fill the containing element that surrounds the assets with a background color. Major brands like Google, Facebook, Youtube and so on, all use this technique to give their users an illusion of a faster and smoother page-load. It takes a shorter amount of time to load a ‘div’-element with a grey background than it takes to render a photo. Usually, you’ll see a grey placeholder div being loaded, just before the image is shown.
You can alternatively load a smaller and much more compressed version of an image and use a blur effect, before loading the same image in full its full size. By doing this, you’re in a similar fashion giving your users an illusion of your site being faster.
Reduce the number of requests and scripts
Limit or reduce unnecessary scripts (Plugins)
If you’re about to build a new website you should really consider what’s most crucial for your website - features provided from plugins or page speed. Consider checking how fast your website loads every time you add a new plugin, so you know what plugins are causing load delays.
Style your site yourself
CSS takes little effort to learn and can go along way in terms of reducing loading time. Instead of rendering external libraries for styling purposes, “google” what you need to do, and see if you can find a quick CSS fix yourself. CSS has become very versatile over the last few years, so you should be able to find plenty of solutions.
SASS and CSS compilers
Speaking of CSS. If you’re styling your page yourself you should check out SASS, if you haven’t already. SASS is a Stylesheet language also referred to as SCSS. Not only does SASS provide you with clever features like scoping and nesting of your stylesheet - but it can also be compiled into a very compressed CSS file. Using SASS will not have a huge tradeoff in terms of page load reduction, since CSS files are relatively small in the first place - it is, however, an honourable mention since it can save you time in the long run as a developer.
Static Site Generators (SSG)
If you want to know more about Statically generated websites you can find more information about here:
In addition to this, you can read my article about Gatsby.js - a framework for building Statically generated websites:
DNS and CDN
Have you ever tried to visit a website in a country far away from you? In some instances you can experience what’s called “slow DNS lookup”, meaning that your browser is struggling to find the Domain Name Server (DNS) and connect you to the corresponding IP-address. As a web developer, this is something to be aware of - especially if you’re working with foreign customers.
Before I get started on what you can do to improve your DNS-lookup, I want to mention that you should make sure, that you’re working with a stable internet connection. Working in a bad Wi-fi environment will naturally have an impact on your DNS lookup.
The main reason for Lookup latency is the distance between your device and the server. If you’re in America and visiting a South Korean website it will most likely be slow, since the server of that website is located far away from you. You can accommodate this issue by making sure that your domain is hosted on a server near you or your client.
Get a fast DNS provider
DNS-providers can vary in speed. Small web hosting companies provide slower DNS-services, so it’s a good idea to check what your needs are in terms of DNS-lookup speed. The biggest players in the industry are currently ‘AWS’, ‘Cloudflare’, ‘Netlify’, ‘Dyn’ and ‘DNS made easy’. All of these services have massive infrastructures and are specifically designed for DNS with low-latency environments.
Get a fast CDN provider
Like you want a Webhosting service that provides your website with a fast DNS lookup, you also want to make sure that you’re getting a fast CDN provider.
CDN is short for Content Delivery Network. A good CDN provider will have multiple network servers located all around the world - often referred to as POP’s. They host and delivers the content of your website. The closer a CDN is to your browser the faster the service will become - that’s why it will increase your page speed if you have a good CDN provider.
There are many programming languages today - and a great deal of these are so-called Server-side languages. Whether you use PHP, C#, Python or something else, they are converted into HTML so the browser can recognize them and accordingly display your website. This conversion can be time-consuming depending on the size of your website.
If you want to know more about Server-side or Client-side rendering you can read through one of our previous blog posts:
SQL vs NoSQL: Critical Differences you need to know!
Published at: 2020-11-17
A professional web development workflow in a small team?
Published at: 2020-11-16
Gatsby.js vs. Next.js | First impressions with the best react framework tools currently!
Published at: 2020-11-12
What is the Pomodoro technique?
Published at: 2020-04-13
Four Day work week
Published at: 2020-04-11
Published at: 2020-04-10
Gatsby.js - Is static generated websites a technology of the future?
Published at: 2020-04-09
The basics of statically generated websites.
Published at: 2020-04-09
What is Netlify
Published at: 2020-04-08
First impressions of Sanity as a content management system
Published at: 2020-04-07