7 Tips to improve your website performance

Tip 1: Optimise your images

This one will affect the speed of your website the most. Many websites still use the source size of the image, nowadays camera’s take better pictures than needed for the web. Therefore I use tools to compress my images before I post them online.

On Mac: ImageOptim On Windows: Any online service will do

The problem with online tools is that they do half work. They don’t shrink images to the correct size. A 2000x2000px image will still be 2000x2000px but with a lower file size.

To solve this as a developer I use a tool called LiipImagine as this helps me automagically create those sizes as soon as my image gets visited online and from then on it will be stored in the server cache.

Tip 2: Compress your assets

Developers don’t write compressed or minified assets (CSS or Javascript files), they use tools to build these.

I have both used Gulp and Webpack to build my assets and both work perfectly fine for this use case.

For example:

html, body {
    margin: 0;
    padding: 0;
}
.container {
    height: 100%;
    background: red;
}

Results in:

html,body{margin:0;padding:0}.container{height:100%;background:red}

This may not look like much but even this code results in a magnificent change in file size: 108bytes for the uncompressed file and 67bytes for the compressed one. This will for sure increase the website speed.

Tip 3: Minimize HTTP Requests and database calls

Limiting the number of HTTP Requests is a big one, this might have slight changes since HTTP2 is launched which can load these requests asynchronously but it is still an ongoing problem.

Combining your assets is the first step, let’s say you like to keep your code separate (which you should) and you have three javascript files. test.js, test1.js, test2.js which will result in 3 requests sent to the server. You can limit this by bundling it into a file named bundle.min.js for example which will result in 1 request only.

Tip 4: Reduce server response time

The response time of your server is the time needed to compile the request page to HTML and serve it to the browser, so without any assets (images, CSS, js).

This will highly depend on the framework or CMS you’re using, you can use its tools to see where you can improve your page response time, usually by using a timestamp in your code to pinpoint the issue.

Not only is it dependent on the framework or CMS, but the server and server setup is key. Managed vs. shared hosting, server caching (opcache) and PHP version, for example, all play big roles in your website speed.

If you found the issue you should try and solve it, but if you can’t skip this code you can have a look at caching the result. Caching the result or even the complete template will avoid the longer compute time.

Tip 5: Use Webfont Loader

The Webfont loader found here at Github is used to load your fonts asynchronously and therefore not blocking the initial load of your page and makes sure your visitor sees the website faster.

Native support for Typekit and Google fonts but also supports custom fonts by loading in the CSS file afterward.

Tip 6: Content above the fold

The above the fold content is the content that the user sees without starting to scroll. The image above is a preview of this page, where the red is the part that the user doesn’t see yet.

If the user doesn’t see it yet, why load the styling for it? If you want to have the fastest load time possible this is what you got to do. Split the above the fold CSS/JS files with the other. Load the above the fold CSS/JS first and afterward load the other styles.

The user will not notice a difference, the only thing he’ll get is a faster browsing experience.

Tip 7: Make use of a CDN

CDN stands for content delivery network and does only one thing, but does it really well, delivering your content faster.

CDN’s are great for storing your CSS/JS and even images in the cloud, which will take part of the load off your server but will also choose which server to load from (probably the closest one).

Why are CDN’s better than the server itself? CDN’s are highly optimized for caching these type of static files, your web server is not.

And to avoid confusion, your server is not calling the CSS/JS or image files, your browser is after the browser loaded the HTML.