Web Dev: Strategy to maximise user website display speed

Question

There are many specific 'display speed' amelioration techniques discussed on stackoverflow, however, you need to be aware of a particular option, before searching for how to do it.

Therefore, a guide-line strategy would be useful, particularly for those new to website development.

Due to this concept covering numerous individual areas.... the answer may prove best to be collaborative.

My website involves the usual suspects: js, css, google-fonts, images, and I have yet to embed 3 youtube videos.

As such, it likely represents a standard web site, encompassing the needs of many users.

I propose to commence an answer that can subsequently be added to, so that a general strategy can be determined.

Answer 1

Web Dev: Strategy to maximise user website display speed (work in progress)

Step 1. Compression & Caching Enable Gzip, or deflate compression, and set cache parameters. (Typically achieved in .htaccess, unless you have control over your server.)

Step 2. Fonts Best option is to stick with 'safe fonts'. (Tested 'linked Google Roboto' in Dev-Tools - 2.8 seconds to download!… ditched it for zero delay.)

Step 3. Images A single image might be larger than all other resources, therefore images must be the first in line for optimisation. First crop the image to the absolute minimum required content. Experiment with compression formats - photos (jpg), block colours (gif), pixels (png). Then re-size the image (scale image) to the maximum size to be displayed on the site (controlled using css). Reduced max-display size, allows greater jpg compression. (if a photo site - provide a link to full size, to allow user discretion.) Consider delayed image loading eg, LightLazyLoader where images are only loaded when the user scrolls to view more images.

Step 4. Arrange load sequence to provide initial user display This requires the sequential positioning of linked resources. Eg. If using responsiveslides, the script must be read before the images begin to display, otherwise many images will be stupidly displayed; until the script is read. Ie. Breaking the ground rule, and loading scripts early, can present a working display, whilst other 'un-required elements' continue to load.

Step 5. Combine CSS and JS resources according to load sequence Simply open a css resource in Notepad++ and copy it into, and above, your 'my.css' file… and repeat for JS.

Step 6. Minify the combined resources Various program exist to achieve this… google tools offers this online… upload the file and download the minified version with your comments and white space stripped out. (Remember to 'version name' the files, so that you keep your comments.)

Notes: Keep testing the changes that you make (say) in google-dev-tools Ctrl+shift+I, Tab: Network. This graphically shows element load times, and the overall timeline until fully loaded.

Where multiple elements begin loading at the same time… this is ideal. Typically, another group will begin loading when the previous lot have finished. It is preferable that all elements are downloaded simultaneously. We are advised that this can be achieved by storing the different elements in different locations, to facilitate multi-threaded downloads (where elements cannot be combined).

Comment Using 2Mb/s throttling, and a clean load, my 1st image display is now ready @ 2 seconds (down from 15 seconds). The 2s delay is due to other threads being occupied.

My objective is to commence the '1st image' load earlier, whilst ensuring that in less than 500ms the 2nd image is ready to be displayed.

This is a work in progress.