Front End Website Optimization Checklist

Website optimization is a essential skill for all front end developers and a feather to put in the cap for other types of developers. There is nothing more beneficial to site conversion rates and encouraging user engagement than a quick loading web page. Most users expect a site to load in two seconds or less, and may leave if it does not. Check off the following front end website optimization list as you work to cut website lag:

  • Reduce HTTP Requests (file concatenation, sprites)
  • Enable GZIP Compression (GZIP)
  • Enable Leverage Browser Caching
  • Optimize Images (with task managers, online Tools, image editors)
  • Load Important Content First (defer JavaScript, lazy load images)
  • Minify Assets (js & css)
  • Load Assets From a Content Delivery Network (CDN)
  • Test Site With Online Tools

I’ll now layout instructions on the implementation of each of the list items.

Reduce HTTP Requests

WHY? Each HTTP request adds load time to your page while the browser waits for the server to serve up the asset.

HOW?

  • Concatenate CSS and JavaScript files (this can be done manually or with a task runner like GRUNT).
  • Combine images into image sprites. This can be done easily with online tools such as http://wearekiss.com/spritepad.
  • Only load content that will be used on the page.

Enable GZIP Compression

WHY? Enabling GZIP compression allows the server to compress the files that are sent to the browser making them smaller and thus faster to load for users.

HOW? Can be enabled via the .htaccess file by adding the code snippet below:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Enable Leverage Browser Caching

WHY? We are able to specify parameters to tell our server to which files to cache and for how long.

HOW? Enabling leverage browser caching can be achieved by adding the code below to your .htaccess file. You can adjust the time parameters for each file type.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

Optimize Images

WHY? Images can be large in file size and are quite often the cause of slow websites. Shrinking the file size of images displayed on the website will dramatically decrease load time.

HOW?

NOTE: Images should rarely by over 200KB in size and typically smaller than 50KB.

Load Important Content First

WHY? User’s perception of how fast website loads depends on what they see on their screen. HTML and CSS should be loaded before JavaScript.

HOW?

  • Defer parsing of JavaScript (typically should be placed in footer of website)
  • Lazy load images (can be done with JavaScript plugins or CMS plugins, example: https://www.midphase.com/website-hosting/)
  • AJAX loading dynamic content

Minify Assets

WHY? Minifying your assets will cut out extra white spaces and shorten code to decrease the size of your CSS and Javascript.

HOW?

Load Assets From a Content Delivery Network

WHY? It takes users longer to download website files when they live far from the website’s server. A CDN distributes the website assets around the globe to allow the user to download the assets from the closest CDN location.

HOW?

Test Site With Online Tools

WHY? Testing the site with these tools will give you a good idea of things you may need to do in order to speed your site up.

HOW?

Leave a Reply

Your email address will not be published. Required fields are marked *