Website Optimization - 8 Speed up Tips
Web performance is an integral part of the success of your web projects. There are good reasons to focus on page load time. The first impression is what counts - never make users wait for your content.
Speed matters. Imagine visiting a slow-loading website that renders line by line. Would you be excited about what is next on this site? Probably not.
There are two main factors why you should care about website optimization:
Exceptional user experience
Our customers expect that your website is loading super fast. In fact, a slow web application affects your bottom line, and 47% of the users expect a website to load in 2 seconds or even less.
Search Engine Optimization (SEO)
Website speed impacts how Google's ranking algorithm will classify you. Your website might load fast in the country where your origin server is, but what about the speed on the other half of the globe? Having a globally fast website is important to get everywhere a high-ranking signal and not be penalized in some regions where your web application might load slowly.
Speed in desktop search results has been a Google ranking factor since 2010. Almost ten years later, mobile searchers were also taken into account. Since 2018, page speed for mobile search results has also been a ranking factor on Google.
As you can see, page speed has a big impact on how successful you are with your website. A high Google ranking leads to more traffic to your website, and at the same time, an excellent user experience leads to a greater willingness to buy.
We show you the following steps on how you can increase the speed of your site:
1. Reduce HTTP requests
Combine CSS and JavaScript files by concatenating them. This will reduce the number of requests required to download your assets. Either use automated build systems or do it "manually" (e.g. cat bootstrap.css fontawesome.css custom.css > all.css).
Concat plugins for the automated task systems
- Grunt: grunt-contrib-concat
- Gulp: gulp-concat
2. Minify CSS and JavaScript
The next logic step after you concatenated your JavaScript and CSS files is to minimize them. The automated task systems differentiate here between the JS and CSS file. Therefore you need separate plugins for each task.
Minify plugins for the automated task systems
JavaScript
- Grunt: grunt-contrib-uglify
- Gulp: gulp-uglify
CSS
- Grunt: grunt-contrib-cssmin
- Gulp: gulp-minify-css
3. CSS in the head section and scripts at the bottom
This approach might be a bit generalized but a good rule of thumb. You can go even further and include the CSS required for the initial rendering, typically styles for the above-the-fold content, directly in the HEAD section in <style></style> elements and move the rest of your CSS to the bottom before the </body> element as well. This will prevent render blocking. However you need to check if this optimization effort is worth the improvement as it might make your setup complex.
For your JavaScript consider using the async directive to avoid render blocking.
<script async src="foobar.js"></script>
Learn more about render blocking in this great article: Analyzing Critical Rendering Path Performance
4. Compress images
Images hold the biggest portion of the payload of a website. The benefits of optimizing images can have an enormous positive impact in the overall page load time. As of 2022, 44% of average bytes per page, whether on desktop or mobile, are accounted for by images alone. Compressing images is a must on the way to fast websites.
Whenever possible use PNG images as they offer a lossless compression. Keep in mind that JPEG will cause a loss on compression. However it is recommended to use JPG for photos. Further, define the image width and height in the <img> element to enable faster rendering.
Image minify plugins for the automated task systems
- Grunt: grunt-contrib-imagemin
- Gulp: gulp-imagemin
Online Tools
Local Tools
5. Use a content delivery network
Getting your assets closer to your users will reduce latency and increases the throughput. KeyCDN has highly optimized edge servers, which are strategically positioned to accelerate your content. This optimization task will lead to the best improvement results if you have a global audience. It is important to have features such as Origin Shield, HTTP/2, Gzip compression that can further optimize the download speed of your assets. OCSP stapling also improves the initial SSL handshake between your users and the edge server if you are using HTTPS.
6. Properly set the expires value to leverage caching
Leveraging the browser cache is crucial for assets that are rarely changing. It is recommended to have a max-age of 7 days in such cases. Learn more about different control mechanisms in this article: A Guide to HTTP Cache Headers
7. Avoid redirects
Redirects are performance killers. Avoid them whenever possible. A redirect will generate additional round trip times (RTT) and therefore quickly doubles the time that is required to load the initial HTML document before the browser even starts to load other assets.
8. Prefetch domain names and increase the TTL of your DNS records
Domain name prefetching is a good solution to already resolve domain names before a user actually follows a link. Here an example how to implement it in the HEAD section of your HTML:
<link rel="dns-prefetch" href="//www.example.com">
The double slashes indicate that the URL begins with a host name (this is specified in the RFC1808).
Another important aspect is to increase the TTL for your URL and also for you aliases (e.g. where your assets are loaded from). Resolvers will cache the DNS responses and therefore respond much faster to DNS queries, as they do not need to make additional lookups if the record is still in the DNS cache. We recommend setting the TTL to at least 3600 seconds if not a day (86400 seconds). Here an example in case you take advantage of CNAMEs when you are using a CDN:
cdn.keycdn.com. 3600 IN CNAME example-hexid.kxcdn.com