How do I improve the loading time of my website?
Why do some websites with images load faster than text websites?
You will find the necessary knowledge in this tutorial!
Let’s start.
Why should the website be a few seconds faster?
Why should I optimise the loading time at all?
Isn’t a functioning website enough? A sales website that loads in 1 second has a 250 percent better conversion rate than a website that loads in 5 seconds. This means that 2.5 more sales are made per 1000 users (conversion rate) 1.
The difference in sales between a slow and fast website justifies any website optimisation that does not explode the budget. The greater the website traffic already is, the higher the return on investment (programming costs vs. plus in sales) will be.
Steffen Lippke
Don’t I just need better hardware?
You should always look at the efficiency of the website and software before you think about improving the hardware.
Instead of throwing money at a problem in the form of better hardware, you should always exhaust the software options. A bad website will quickly exhaust your new hardware and cost you more money and nerves in the long run.
How do I measure loading times?
Classic online tools
The worst option is to sit next to your computer with a stopwatch. The loading time depends on the internet line (fibre optic vs. DSL) and the processor power (cucumber vs. workstation). The online tools assume a standardised average device or pay attention to the absolute amount of data transferred.
The more realistic “surveys”
Instead of simulating a PC, Google, with its browser dominance, can measure the speed directly on the devices of the end users (clients).
The clients report the loading times back to the PageSpeed Tool.
How fast does the website load on the computers and mobile phones of real customers or website bus visitors?
Google tells you
If you write a blog about gaming, the web pages load faster because of the gaming CPU and good connections than if you write a blog about travelling nomads (bad 3G connection). For the second blog, you need to think about this topic.
Choice of framework, themes and extensions?
Two websites. Same features. But different speed.
The code base for a blog can be different in size, even if all the standard features are
- Show text
- Comment function
- Share
- Contact form
… are present.
Depending on the framework (Angular, React, WordPress, …), the power of simple things like a form can greatly affect the load time. Some software has grown over the decades and have not been optimised, while some “fresh” software is light and lean.
The best on-server optimisation
Self is the hoster! If you provide scripts, images, videos and other content centrally on your server, you have many advantages …
- High, guaranteed speed (if the server is not a cucumber)
- Independence (no failures, changes at the other hoster)
- Data protection – DSGVO makes it mandatory that you do not download fonts from American companies
Think about how you can cleverly pack all services onto one server or server cluster.
Timing is everything
Loading at the right time is important! Websites load slowly when they are crammed with content. Nevertheless, the operator wants to provide the user with a detailed article or an extensive online shop.
The timing of the loading of the components is crucial. The browser should load the content that is high up or of central importance first. AJAX allows the website to reload content, such as images, as soon as the user scrolls.
Caches are a blessing and a curse
Caches are brilliant if you want to improve website speed. The big disadvantage is on your side. You have to invalidate and reload all caches on the way to the user’s eye every time you make a change. Therefore, caches are both a blessing and a curse.
No unnecessary work – database cache
Databases are ultra-flexible and allow thousands of ways to query them. The complicated and computationally expensive queries can cost you valuable time. The reality is that the database has to process the same queries over and over again. Therefore, you can simply cache the output.
Collected Works – PHP Object Cache
The PHP application on your server can also cache content. A folder in the file system stores the dynamic content as static files, so that PHP does not have to regenerate them every time. The cache helps with all content that users view on a regular basis.
Quick help – Reverse Proxy Cache
A Nginx or Apache sits in the front of your PHP application. These tools provide caching options. You can optimise the storage time of frequently requested static files this way.
Don’t send too much – browser cache
Certain HTTP headers, which your browser sends with every transmission, prevent reusable files from having to be retrieved from the network again. Why does the browser have to download the same logo twice when changing the blog entry?
Local caching by end users is interesting here. Fonts and JavaScript libraries can remain in memory for much longer.
Fast and secure transmission
The only way to be efficient – HTTP/3 and QUIC
Fast! HTTP/3 and QUIC are the magic words here. The HTTP standard used to transfer data inefficiently in text form or base64. Today, simultaneous data streams in binary format are possible. The number of questions and answers are minimised, while the content is prioritised. Modern reverse proxies are capable of this standard. So can new browsers (Firefox, Chrome, Opera)
Secure with TLS
Secure! The Transport Layer Security protocol version 1.2/1.3 guarantees secure transmission of web pages in 2024. Older protocols are no longer recommended.
Most end devices support these standards, but a few old boxes do not. The big question is whether you necessarily want to connect to virus-infected Windows 95 computers.
Download from whom or what?
One Source! Use only one server if possible. All scripts, images, fonts should come from one server. The browser has to resolve other domains via DNS and load content from another server. This costs time.
Optimisation for browsers
Reload! Always load images and script after the HTML (async and defer). First load only the texts and images in the upper part of the web page. The images that follow further down the web page can be loaded later.
Even scripts that are necessary for navigation can be loaded later, because the user only wants to see content at the very first moment. Does the website work at all? Then the user must first orientate himself and think about where he wants to click next.
Minimal! Text files like HTML and JavaScript can be compressed by software. Humans can no longer read them, but a browser understands them.
Avoid useless stuff! Avoid that your website is cluttered with different JavaScript frameworks, analytics software, A/B testing software, chatbots or anything else.
The software that comes from outside is usually so extensive that a single piece of software can make the website incredibly slow. The analysis is costly.
Therefore, start with an absolutely minimal website and add extensions step by step. Test the speed of the website when you change something.
