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)
- 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.
- 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:
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.
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.
- Online tools like https://kraken.io/web-interface
- Image Editors like Photoshop
- Task runners like GRUNT
NOTE: Images should rarely by over 200KB in size and typically smaller than 50KB.
Load Important Content First
- AJAX loading dynamic content
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.
- Many CSS and JS libraries offer loading via a CDN
- Companies such as https://www.maxcdn.com/
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.
- Google Page Speed Insights – https://developers.google.com/speed/pagespeed/insights/
- Pingdom – https://tools.pingdom.com/
- GTMetrix – https://gtmetrix.com/