14 Tips To Improve Your Website Performance

14 Tips To Improve Your Website Performance

Posted on November 15, 2017

Improving your website should always be at the top of your priority list for any site you manage. Without it, your site is going to be dinged by search engines for not performing up to par, and customers are also going to quickly get frustrated by the slow browsing speed and how long everything takes to load.

Here are 14 tips to get your website on the right track.

1. Reduce Image Size

Images are one of the biggest culprits of a slow website. An image heavy site will result in slow loading and browsing speed. Most web experts will agree that image optimization is the biggest mistake many website developers overlook.

Here are some tools to optimize your images and keep your site moving smoothly:

Another problem that many people overlook is serving scaled images. You should resize your images using Photoshop or any other software of your choice to be a perfect match for your site. If they are too big - you are wasting precious bandwith, too small - your images look pixelated and ugly.

2. Enable Gzip Compression

When it comes to compression, Gzip is another excellent option for HTML content, CSS, and JS files. This compresses at the server level before sending anything to the browser. You can check if your site can be further compressed using the Gzip compression checking tool. It's simple to enable and you will notice a big difference.

3. Reduce Latency With Content Delivery Network

You can reduce latency on your website using a Content Delivery Network, or CDN. It works by caching your static content (images, JS, CSS) on datacenters distributed around the world, so it is always close to your visitors.

Here's a list of CDN services to consider:

4. Infrastructure

A good web host is essential to your website's performance - even more important than all the other things covered so far. With a cheap, shared host, everyone on the server is sharing the limited resources. You need to be on a private host where your website will not need to share anything with noisy neighhbors. Go with a VPS or a managed host if your website is using Drupal or Wordpress.

VPS stands for "virtual private server". Here are some good providers:

Managed hosting is a cost-effective and simpler option for those less experienced or in need of less resources/dedication than others. If you're just starting out, managed hosting will be what you need to get your site moving smoothly. Here are some popular options:

5. Reduce The Number Of HTTP Requests

Every time a browser fetches data from a server, it makes an "HTTP Request". This stands for "Hypertext Transfer Protocol" and it's a request/response between a web client and a host. In general, the more HTTP requests a web page makes, the longer it will take to load - and that's a problem for you and your users.

Luckily, there are countless tactics you can use to reduce the number of requests:

  • Use CSS Sprites
  • Reduce assets, like third-party plugins that use lots of external requests.
  • If your Javascript is very small, inline it.
  • Don't use any third-party frameworks unless it is critical to your website's design.
  • Combine your JS and CSS files.

Basically, use only what is really important. Unnecessary requests are eating away at your site's speed!

6. Minify CSS and JavaScript

Minifying means taking away everything that is not necessary for the computer to read the code. That means removing new line characters, whitespace characters, comments, and block delimiters.

This may seem simple, but depending on how many files are on the frontend of your site, this can be a huge boost for your performance. It reduces the amount of code overall that needs to be requested from your server, speeding things up.

Here are some plugins to do this:

Wordpress also makes it easy with the "WordPress Cache Enabler", for those running their site on Wordpress CMS.

7. Minimize Render Blocking Resources

This goes for JS and CSS.

Basically, your website will not be rendered (displayed in the screen) until all JS and CSS files will be loaded, that is why they are called "render blocking" resources.

Here are some recommendations for stopping CSS and JS from blocking the DOM:

  • JavaScript
    Move your scripts to the bottom of the page, placing it right before the tag.
    Use the async tag to make sure your JS will be downloaded without.
    Combine your JS files into one file.
    Finally, minify your JS and inline it if it's small.
  • CSS:
    Make sure you properly call your CSS files.
    Use media queries to make certain resources as non-render blocking.
    Decrease the amount of CSS files you have by combining them into one file.
    Minify your CSS.
    Finally, use less CSS overall.

8. Use Caching

There are multiple ways to use caching to your advantage.

The first is browser caching, whico keeps track of assets that rarely change. The max-age should be 7 days and you can use different types of HTTP headers, including Cache-control, Pragma, Expires, and Validators.

Another type of cache is the server cache. There are some different approaches you can take to server-side caching, and it's typically only used by sites with a good amount of traffic. You can use caching plugins for the specific CMS you're using or try to use one of these powerful server-side caching tools:

9. Web Fonts

Fonts are essential to the look and feel of your website and around 60% of websites are now implementing custom fronts. That's more than 8 times increase since 2011, which means fonts are quickly becoming a performance issue. Fonts like Google Fonts will add extra HTTP requests to call external resources, and they are also render blocking. Here are some suggestions:

  • Don't use or download fonts you don't need.
  • Keep character sets to a minimum.
  • Store in LocalStorage with Base64 encoding.
  • Host fonts on your local server, or prefetch them.

Additionally, you can move the Google Fonts you use to your CDN.

10. TTFB

TTFB stands for Time To First Byte. This is the measurement of how responsive a web server is. It's basically the time it takes your browser to start receiving information after it has been requested. TTFB is calculated by adding:

HTTP request time + process request time + HTTP response time

In Chrome Developer Tools, TTFB is shown as the green waiting bar. With the use of CDN, a good reliable web host, and a reliable DNS provider, your overall TTFB will dramatically decrease.

11. Avoid 301 Redirects

A redirect will kill your website's performance, and they should be avoided whenever you can. It will generate a round trip time, or RTT, each time one is performed, therefore doubling the time to load the initial HTML document. This will happen before the browser even begins loading other assets causing a slight delay.

12. Prefetch and Preconnect

Prefetching is a solution to resolving domain names before a user follows a link. Here's an example in the HEAD section of an HTML file:

<link href="//www.example.com" rel="dns-prefetch"></p>

Preconnect lets the browser setup connections before a request is actually made. Connections like DNS lookup, TCP handshake, and TLS negotiation can all be handled before a request is made, eliminating the roundtrip latency explained earlier and helping your users have a better experience.

13. Hotlink Protection

This refers to restricting HTTP referrers to prevent other website owners from embedding your assets on their site. This will save you bandwidth while stopping others from displaying your image. For instance, if your website is www.domain.com, if you want to prevent hotlinking of your images and instead show a replacement image, let's say it's called stealingisbad.jpg, we can place this code in your .htaccess file:

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?domain\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*\.(jpe?g|gif|bmp|png)$ http://i.imgur.com/stealingisbad.gif [L]

14. Fix 404 Errors

If a browser is trying to call a missing file, it will generate a 404 HTTP error. This can take quite a toll on your server depending on what platform you are running. For instance, those running Drupal will have a huge problem. An "average" site will take about 60-100MB of memory when they deliver a 404.

We don't suggest using a plugin or module to check for 404. Instead, run your website through a broken link checker every once in a while.

Summary

Getting your website off the ground and making sure it's running quickly and efficiently may seem taxing, but it's well worth the effort. Your clients will thank you, and search engines will reward you with better ranking for having a fast site.