5 Tips for Making your Website Faster
Learn from the pros on how to make your website faster with these 5 tips.
Website speed is a key component of providing a high quality user experience for your readers. Fast websites rank better on Google, project a higher quality, work better on mobile devices, and are overwhelming preferred by website readers. Making a website fast is not rocket science, but it does require a little bit of preparation and trial-and-error to get it right. With Fixture, our goal was to make websites really fast. Fixture is so fast, the homepage scores 91/100 in performance and has a first paint of just 2.3s. Read more to see how we make our website really fast.
1. Start with Static HTML
What is static HTML? Simply put, static HTML refers to building a website that uses HTML pages to serve content to the browser. The alternative, dynamic HTML, is the exact opposite. Dynamic HTML builds pages on the fly using a front-end language (e.g. Angular or React) or a backend language (PHP, Node) to combine template code with content to render the website. Static HTML is faster because fewer processing is done by the server and the client to create the site. As a result, static HTML just runs faster. Not only does static HTML run faster, but it also enables you to cache your entire site via a CDN (see #2), so this can also substantially speed up your site.
Pro tip: If you must use software that runs dynamic HTML, make this software provides a caching mechanism to deliver static-like content to the browser. While not ideal, it does make your website faster.
2. Use a fast CDN
A CDN or Content Delivery Network is a group of servers that sit around the world to reduce the geographic distance between where your content lives and where the reader is located. They literally bring your website closer to the reader. As you can imagine, this greatly speeds up your website simply because the content travels less distance. The catch is that CDNs only can cache static content. This makes sense because it needs to keep copies in multiple locations across the globe. That is why tip #1 is so important. The more content you can cache and distribute via a CDN, the faster your site runs.
Pro tip: Cache your entire site in a CDN for the best performance. If you can't cache your entire site, you should at least cache your images, CSS, and JS. This is an easy way to give your site a boost.
3. Avoid Frameworks
This tip is going to be a little contentious among technophiles, but hear me out. Avoid frameworks on your website at all costs. This includes Bootstrap, Angular, React, jQuery, VueJS, Font Awesome, etc., etc. These frameworks are awesome. And, I highly recommend them for efficiently building web apps. However, this post is about fast websites, not fast apps. If you want a fast website, you must (at all costs) reduce redundancy and inefficiencies. And, that means that frameworks have to go.
4. Optimize Images and Videos
Images and videos are typically have the largest file sizes and, as a result, take the longest time to load. Improperly sized and poorly optimized images can make a fast site seem slow. To fix this problem, use the appropriate size image for how it appears on a site. If an image takes up only a 1/3 of the screen, you can often get away with using a smaller image without distortion. The same is true with videos. Make sure to use the appropriate size and resolution for your audience and use case.
Pro Tip: Browsers now have good support for srcset and the picture element. Use these HTML elements to allow the browser to choose the appropriate image for the page.
Pro Tip: Use Developer Tools in Chrome (View > Developer > Developer Tools > Network) to see all the requests your site is making. Reduce any redundancies and unnecessary requests to make your site run really fast.
Bonus Tip: Use Lighthouse Audits
Google provides a powerful tool in Developer Tools called Audits (View > Developer > Developer Tools > Audits). You can see how your site performs on Mobile and Desktop. You can even throttle the connection speed to see what it is like to use your site on a slow connection. If you follow the tips above, you should easily score over a 90 for performance.
Love these tips? You should try out Fixture. It is completely free to start and it automatically optimizes your site so that it is really fast. In fact, Fixture sites perform up to 5x faster than similar sites built using our competitor's site builders. Fixture sites use static HTML, utilize the CloudFront CDN, avoid frameworks, and automatically reduce requests and resize images. That is why they are so fast.