5 Tips for Making your Website Faster

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.  

Pro Tip:  Browser adoption of advanced CSS and JavaScript techniques have come a long way.  Before trying to solve common problems with a framework, try to find a solution that uses plain CSS and JavaScript first.  A great way to do this is by searching Google and Stack Overflow for solutions that use "plain JavaScript" or "vanilla JavaScript".  This will often lead to a great solution that is fast as well.

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.

5. Reduce unnecessary requests

Be careful with third party scripts and plugins.  While these can appear to make your life easier, they can also result in a lot more requests to third party servers.  Ever wonder why web pages today appear so slow.  It is primarily because you they are making third party requests to Twitter, Facebook, Ad Networks, and lots of other places.  Sometimes, it is not just third party content that ads requests.  Watch the number of stylesheets and JavaScript files as well.  Your goal should be to just have a single CSS file and single JS file to server your styles and interactions.  To have the fastest website in your market segment, you must be very cautious as to how many requests your site is making.

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.