Performance over vanity.

I guess this applies to most cases, but perhaps a few would be a combination of both. eCommerce websites spring to mind,

With the continual increase of mobile device usage for browsing the web and online purchases. It makes sense to spend time ensuring that the web page size is condensed as much as possible.

47% of consumers expect a web page to load in 2 seconds or less. source

There’s little point of having a visually stunning website with all the bells and whistles if it takes 10+ seconds to load, users will become infuriated and bored, thus increasing the bounce rate.

Think about your design, instead of using lots of heavy JS plugins try CSS3 alternatives.

Hosting

Use Analytics to determine the location that the majority of your users come from. Then select a hosting provider that has servers in that country, it’s a smart move to also consider a CDN to serve JS / CSS files.

Optimise imagery

Images tend to be the main culprit of downloaded bytes on a web page and it stands to reason as they take up most of the visual space. Therefore drastic performance improvements in load time can be noticeable after you’ve compressed images into fewer bytes.

There is a balance of performance and quality, and by this I mean you don’t want the image to lose too much quality the image start to show artifacts but then you also don’t want it clogging up the client’s bandwidth.

*Tools: *

Adobe PhotoShop – Save for web

TinyPng

SmushIt

If you’re using lots of pngs within your design for line breaks, logos and social media buttons – consider what images could be combined in the form of a sprite, one file therefore less HTTP requests thus reducing load time.

Use a preprocessor

Allows you to work more efficiently and write cleaner code, compile your files into one main css file and also make sure you remove white spacing in an attempt to further shrink the size of the file.

CONCATENATE JAVASCRIPT

In a similar way to CSS it’s important to reduce the amount of unnecessary HTTP requests which jquery & javascript plugins are notorious for doing. Use a tool likeGrunt, Gulp or if you’re afraid of the command line like I used to be Prepros (it’s great but can be a bit slow). Essentially set a folder to watch, any change that’s made to files will automatically be condensed into a .min file.

I have one main core.js file which includes all my JS files like so:

// @prepros-prepend “jquery.parallax-1.1.3.js”

Be careful though as you’ll need to get the stack order correct for dependencies. I.e. put JQuery at the top.

USE CDN’S

Content delivery network’s are fantastic for deploying your web page content across multiple data centers and serving this to end-users efficiently based on location.

DELETE OLD CODE

Commented out code is still being rendered and can be viewed by looking at the webpage source. If you’ve developed a cool bit of functionality that you don’t want to delete but is hogging up real estate on the page then save it as a snippet to Bitbucket or GitHub.

PLUGINS

If you’re using a CMS like WordPress avoid using hundreds of plugins as they tend to hijack the page with extra JavaScript and CSS more often than not inline styles as well as external.

Instead carefully select a few good plugins and dequeue their custom CSS, compile this with your preprocessor and enqueue using the functions.php file.