ProjectsAboutBlog
  1. +
  2. +
  3. +
  4. +
  5. +

What can you do to get a faster website? Tips for beginners and advanced developers.

Published: 2020-04-20

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.

Beginner

File size

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.

Image size

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.

Advanced

Picture fill

If you feel comfortable working with Javascript frameworks, you could checkout picturefil.js. If you’re on a phone, you don’t want to load unnecessarily large images. With a JS framework like picturefill you can load different assets depending on what device you’re on. Fortunately, this technology is integrated into many services like Wordpress and Gatsby.js.

Lazy loading

Using the intersection observer in javascript you can check for what’s displayed within your window - in other words, what’s visible to the user. This gives you the possibility to load your images just before or as soon as they come into the viewport, meaning that you don’t have to load all assets at once. The result of this is phenomenal, since you’re simply loading relevant information leaving out the assets that are not yet to be displayed in the window because the user hasn’t reached it yet.

Placeholder illusion

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.

Placeholder illusion | Faster page load time | Kodex

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

Pages are loaded as HTML (Hypertext Markup Language). They are however, merely documents text containing information about the structure (and content to some extend) of your website. A Cascading Style Sheet or CSS contains information about the style of your page - and Javascript is said to contain information about the functionality of your page - but will in most cases contain information about a bit of everything due to its countless possibilities. What you should be aware of is the fact that CSS and Javascript are both rendered anterior to HTML, since they are wrapped within the HTML-document. In order to speed up your page, you can look into how many requests and scripts are being executed when your page loads.

Beginner

Limit or reduce unnecessary scripts (Plugins)

Assuming that you’re familiar with either fundamental coding principles or/and content management systems like Wordpress, I suggest that you look into if you’re loading unnecessarily amounts of scripts on your page. Plugins in Wordpress are in many cases Javascript or CSS libraries that will be placed in the ‘head’ section of your website. These tags will often contain a link to a library that’s either located somewhere on your own server or on a third-party server. Libraries located internally on your server are naturally loaded faster than those from an external source, but the more libraries (read plugins) you add to your website, the slower your it will become.

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.

Advanced

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 feel comfortable working with javascript or even javascript frameworks like React.js - I would suggest you look into Static Site Generators. For the most part, API-calls will be executed in order to pull content out of a database and into your HTML file, which is a timeconsuming process depending on the amount of content your site is rendering. What SSG allows you to do is to have all your content preloaded in your HTML document, which means that you don’t need to pull data out of a database when your page loads. Everything is in other words exactly where it’s supposed to be, and as a result, Statically Generated Sites are loaded exceptionally fast.

If you want to know more about Statically generated websites you can find more information about here:

The basics of statically generated websites.

In addition to this, you can read my article about Gatsby.js - a framework for building Statically generated websites:

Gatsby - Is static generated websites a technology of the future?

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.

Beginner

Internet connection

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.

Server location

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.

Advanced

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.

Serverside processing

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’re starting on a new project, you should consider working with Client-side processing. An example of this is React.js - a javascript framework developed by Facebook. Since its release in 2013, React has been used by prominent companies such as Netflix, Tesla, Reddit and many others. The biggest benefit of using React.js is that much of the processing is happening on the client-side instead of the server-side, resulting in incredibly fast page speeds.

If you want to know more about Server-side or Client-side rendering you can read through one of our previous blog posts:

Server side or client side rendering?



More Insights

  1. Published at: 2020-11-17

  2. Published at: 2020-11-16

  3. Published at: 2020-11-12

  4. Published at: 2020-04-13

  5. Published at: 2020-04-11

  6. Published at: 2020-04-10

  7. Published at: 2020-04-09

  8. Published at: 2020-04-09

  9. Published at: 2020-04-08

  10. Published at: 2020-04-07

Author

Morgan Grage

Full-stack developer