Performance of Webpages

tl;dr (too long, didn't read)

Webpages should be checked for performance ratings before being given to a client; do not trust the developer(s) to do it themselves! There are two different performance tests that will give you reliable results, links below, perform BOTH tests. Results must be in top 15% (85/100+ or Grade A) and be written in GREEN.

Introduction

It is important to remember that, here at Parasol Island, we have an above-average internet connection which will often result in web pages loading much quicker for us than they would for our clients and their customers. Therefore, it is very important to perform two performance tests on any web page that will be given to a customer to verify that the web page will perform optimally for all users and not just for those with an incredibly quick internet connection.

Remember! If a web page takes too long to load, a visitor will simply hit the back button and not come back; think about the bigger picture and perform a performance test!

Available Tests

There are two different tests that we recommend you to perform. The first is provided by Google and can be found here and the second is provided by GTMetrix and can be found here.

It is very much recommended to perform both tests as they do not share the exact same testing criteria.

Performing a Test

Performing a test is not difficult; simply type in the URL of the web page that you'd like to test and submit the form. Each test will take approximately 2-3 minutes to perform. Please note: if your web page is hidden behind a password protection mechanism, you may need to ask your developer to temporarily remove the protection in order for the testing tools to perform the test.

The Always Forgotten Feature: Browser Caching

The #1 performance-enhancing feature that is always forgotten is the configuration of efficient cache headers. Put simply, each and every file that is downloaded by an internet browser is accompanied by a "cache header" which is a small piece of text which instructs your browser on how long to wait before re-requesting that very same asset again in the future.

For example, imagine that we have finished developing the CSS and JavaScript that is to be used on our webpage so we, quite rightfully, decide to set the "cache header" for all CSS and JavaScript files to be "now + 1 month". This means that, unless you clear your cache, your browser will only download the CSS and JavaScript files once a month and whenever you visit the webpage within a month, it will use the files which it has already downloaded instead of downloading them again and again.

As you can probably tell, having correctly configured (and sensible) cache headers can significantly improve the performance of a web page.

Example of Sensible Cache Headers

You should always configure cache headers with the context of the webpage in mind; there is no "all-in-one" or "perfect" header configuration because it solely depends upon your project and its needs.

For example, a website which constantly changes its content should not have its cache headers for HTML to be "now + 6 months" otherwise the visitor may not see the new content until 6 months after their first visit. Similarly, a webpage which serves content that is only changed every 12 months, should not have cache headers of "now + 1 day" because there's no point in downloading the same information over and over again.

Although there is no "perfect" header configuration, the following example is always a good starting point and can be declared in the project's .htaccess file:

# EXPIRES CACHING ##

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType text/html "access 1 month"          # This rule should always be double-checked!
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

# EXPIRES CACHING ##

Please note that the mod_expires module must be activated on the server in order for the above example to work.