Website owners can spend a lot of time and money to ensure that their website looks perfect: with an effective CTA, informative design, and intuitive navigation. However, they often ignore the effect this has on the page speed (the loading speed) of their site.
Regardless of the platform or browser, all users love a website that is immediately available to them – because users have become more impatient. And even with Google, a fast page is often rewarded with a better ranking in the SERPs. Enough reasons to take a look at the page speed of your site!
Also Read - Linkbuilding Guide – Generate Backlinks For Your Website
Before you start optimizing, it is recommended that you know the status quo of the site. There are several tools available for this – Google Insights, for example, is suitable for this. The tool is free and allows you to measure the performance of your website in detail. After entering your website URL, you will not only receive information about your loading speed but also information about how you can improve it. Admittedly, the tool is somewhat confusing – but it is worth familiarizing yourself with it.
Which tool you ultimately want to use is, of course, up to you. Important: Use the same tool before and after your optimization to see the “real” difference in your efforts.
In the following, I would like to show you in 4 steps how you can improve the loading time of your website. Since these are concrete, practical tips, a little prior knowledge is required.
Table of Contents
Step 1: Optimize static files
The first step relates to the optimization of static files – most often in the form of style sheets (CSS files) and scripts (JS files).
CSS “up”, JS “down”
Your website will not be fully displayed until all CSS files and JavaScripts have been loaded. The ideal position for CSS files is in the <head> area of the website; JavaScript may like “down,” so in the footer. The logic behind it: In general, style sheets are smaller than scripts.
As soon as stylesheets have been loaded into the <head> tag before the browser reproduces the text of the page, all elements that are displayed on the page are correctly styled.
The functionality of the scripts usually comes into play as soon as the content of the page is loaded so that scripts are usually built into the footer of the website.
Minification of the source code
Minification or downsizing in the source code is the process of removing those parts of a file that are not necessary for correct execution. When you access a website, these unnecessary parts of the source code are read out line by line. An unnecessary space here and a few comments there will certainly not have a serious and negative impact on your page speed – but: the sum makes the difference!
Some pages consist of hundreds of lines of source code. If there is unnecessary code in every second line, this will have a significantly more negative effect on the loading time. For style sheets or scripts, it is, therefore, necessary to check the following factors for the execution and then delete them if necessary:
- Whitespace for indentation (unnecessary spaces)
- Comments in the source code
- long function and variable names
- unused code
Use GZIP compression
GZIP compression is a technique for compressing resources using HTTP requests. To put it simply: With GZIP, a complete website can be compressed. This reduces the files to be loaded and thus also improves the loading time. One advantage of this measure: All modern browsers support GZIP and automatically negotiate GZIP compression for all HTTP requests.
A browser or a search engine bot takes less time to render your website, and the site loads faster.
Step 2: Optimize images
Images are essential for a website – this is the only way to make it vivid and attractive. These should be compressed to such an extent that the size is reduced without the image quality being drastically lost.
Merely optimizing the images for page speed could quickly fill the pages of a white paper, but here are a few essential tips:
- Compress your images before loading the image on your page. Image editing tools such as Gimp or Adobe Photoshop are suitable for this.
- Use the correct image type. The two most common types of images on the web are JPGs and PNGs. They are often used interchangeably – but they are not. JPG images are for photos and other complex images with lots of color information. PNG images are perfect for graphics with little color information, such as screenshots of user interfaces.
An example: For your e-commerce website, you have a product image with a resolution of 4000x3000px. For your product overview page on your website, you only need a small picture with a 200x300px resolution. To compress the original image because – you guessed it – smaller images = faster loading time.
Step 3: Optimize HTTP requests
To minimize the load of HTTP requests, you should combine similar resources on the one hand and minimize redirects on the other.
Merging CSS files
CSS defines the font size, colors, and other design elements. However, if each individual style is stored in the HTML code with its CSS command, a new query is carried out for each of these elements, which can harm the page speed.
The browser sends an HTTP request to the web server for each of these files, which are linked in your HTML and should be loaded when your page is called up. The server then sends a request for the required files back to the browser. Logical consequence: The more files there are in your HTML document, the more requests are made and accordingly slow the loading time.
So what to do? For example, you can combine all stylesheets (CSS files) and all custom JavaScript files into a single file.
Minimize the number of diversions
A redirect is an instruction that points from one website page to another. For example, if the user clicks on a link, he does not land on the URL that was clicked but is redirected to another URL. Redirects can be very useful, for example, to avoid duplicate content or to redirect URLs that are no longer required to a new URL, as is often the case with a website relaunch.
However, each redirection increases the loading times of your website. Therefore: If not necessary, you should avoid diversions.
Important: Do not use a 301 redirect to point to another 301 redirects because the 301 redirect forces the web browser to access a new URL – with this new URL, the browser has to wait again until it receives the HTTP request becomes. Also, the Google bot, for example, only follows three redirects, so chaining redirects is also disadvantageous for crawling – and thus possibly also for ranking.
It would be advisable to document the URL structure of the page, including all 301 redirects. If a link is noticeable here (redirect to redirect), you should find the first site or redirect in this chain and then lead it directly to the desired URL.
Step 4: Caching
There is hardly a guide to speeding up websites without a section on caching. Here, a resource is stored in a buffer so that it can be quickly restored if necessary.
If browser caching is activated, the elements of a website are saved in the user’s browser, so that the next time the browser is visited, the browser can load them immediately without having to send another HTTP request to the server for one of the cached elements.
As soon as the first page has been loaded and its elements are stored in the user’s cache, only new elements need to be downloaded on the subsequent pages. This can dramatically reduce the number of files that need to be downloaded during a typical browser session.
Use a CDN
A content delivery network (CND) is a decentralized server at different locations on which parts of your website are stored.
With a CDN, it is possible to load elements of the website without burdening your server. This applies to all parts of the website that must be loaded by request. As described in the previous section, these can be CSS files, but also scripts and images. Each of these elements must be loaded via an HTTP request. By using a CDN, you can save some of these HTTP requests to your own server. An additional advantage: CDNs work regionally. What does it mean exactly? If your client in Germany is to load parts of the website, then these will also be loaded directly at a location in Germany. In this way, you can improve the loading speed through shorter transmission paths.
A low-cost CDN is, for example, Amazon CloudFront or Google App Engine. However, whether a free content delivery network offers acceptable speeds and services should be checked individually.
Conclusion
If your website is slow, it will probably be used less, bounces will occur faster and more often, and many visitors will not come back to the page.
You can often achieve a positive and sustainable impact and increase the page speed of the website by taking the points of this blog post into account:
- Reduce / shorten HTTP requests
- Use only a CSS style sheet
- Optimize your pictures
- Use GZIP compression
- Reduce 301 redirects
- Use of server-side caching
- Using a CDN
Regardless of whether you want to improve the loading time of your website, in order to achieve a better ranking, to improve the user experience or to achieve a better conversion: There are many good reasons to re-optimize your page speed from time to time Agenda to call.
