7 Tips to improve your website performance

Tip 1: Optimize your images

Optimizing your images should be your number one priority when optimizing your website’s performance. Many websites still use the source size of the image, nowadays camera’s take better pictures than needed for the web, so it’s wise to resize and compress them before publishing 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.

You can read more about how to automatically resize and crop images in Symfony.

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 website performance optimization tweak will for sure increase your website’s 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

Website performance optimization

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.

Conclusion

With these 7 tips you will quickly see a performance boost in both your loading times and your website’s bounce rate.

Why bounce rate? Users don’t like slow webpages, so as soon as they see it takes too long to load a page they’re gone, which has a negative impact on your overall SEO.

So make sure your website’s performance is as quick as can be, by following this website performance optimization tips.

Leave a Reply

avatar
  Subscribe  
Notify of