Performance - acnorrisuk/coding-style-guide GitHub Wiki

Files

HTML/CSS/JS files should be minified to decrease file size.

Files should be concatenated where possible to reduce http requests.

Scripts should be loaded in the footer to prevent render blocking unless there is an explicit reasons to load in the head (e.g. Modernizr).

Images

Images should be optimised for the web. This can be done as part of the build process or in a CMS.

Responsive images should be used to provide images which are displayed in their best form regardless of the device being used. A CMS such as Wordpress has responsive images built in, otherwise the srcset and sizes attributes can be used.

<!-- Example of a responsive image -->
<img src="images/space-needle.jpg" sizes="(max-width: 40em) 100vw, 50vw"
srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,
images/space-needle-hd.jpg 600w">

Server Settings

Gzip compression should be enabled on the server to reduce load times.

# Enable gzip on apache servers
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Browser caching can be used to further reduce load times.

# Enable caching on apache servers
<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/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
⚠️ **GitHub.com Fallback** ⚠️