Web Performance Optimisation > Reduce Downloading time > Get more conversion to your business.
Files in General:
Reduce number of files:
- If you use WordPress: Deactivate unnecessary and unused plugins > This will reduce JS files and CSS files
- Combine JS files and Combine CSS files
- Reduce number of images per page if possible (next section)
Reduce file sizes:
- Minify JS, Minify CSS and Minify HTML
- Reduce image file size (next section)
Images:
Reduce number of images:
- Do you really need so many images? > Remove some images, specially the big ones in dimensions
- Do you have your website in one page? > Create other pages and move images to other pages
- Do not use Sliders: They are bad for usability + they use more than one image, see these resources:
- Sliders suck and should be banned from your website: https://yoast.com/opinion-on-sliders/
- Why Sliders Make Your Website Suck: https://thrivethemes.com/why- sliders-suck/
- Why website sliders aren’t as great as most people think: https://mhthemes.com/blog/why-sliders-are-not-great/
Reduce image dimensions:
- Do you really need big images > Reduce dimensions of images if possible
- Do not use Retina images > You can save 75% of image file size!
- Generate your images to the maximum dimensions that they are going to be shown on any device (responsiveness), never bigger
Use correct image format:
- For photographs, use always JPG (never ever PNG)
- Logos with many colours or transparencies with gradients: PNG-24
- Logos with few colours: PNG-8
Use correctly the JPG compression:
- You can do this by using correctly the compromise in quality vs the file size… Use your judgement
- A normal JPG compress ratio is 50% to 60% but in some scenarios you can even drop it to 30%, use your judgement
Others:
- You can also use Progressive JPG, that way images will load increasing the resolution, allowing the page to load faster as it reduces the render blocking
- Use Image Lazy loading technique, that way images only will be loaded when they are going to be shown in the browser’s viewport
Image Optimisation: Photoshop
Master:
- Start always with a master image with high quality big dimensions
- Never use an already optimised JPG, as when you save this image, the JPG re-compression will reduce image quality (degradation)
Operations:
- Do all your operations, trim, adjust levels, etc…
- Check that image is RGB (and not CMYK as this is for printing)
- Resize the image to the maximum dimensions that they are going to be shown on any device (responsiveness), never bigger
- Then Save for Web and choose JPG for photographs and PNG for graphics with few colours
Images in WordPress:
- WordPress generate different image dimensions for you (Large, Medium, Thumbnail) but there is a tricky scenario… If your Large wordpress image is, let’s say 1024, and you upload your image at 1024, you will have 2 images at the same resolution called: Original and Large… They are both same dimensions but depending on different JPG compression the file size can be very different and also the quality can be very different as you are recompressing at image with same dimensions… so have this in mind… If in doubt upload the image always bigger than your Large and then use the Large as your bigger image, never the Original!
- WordPress has got capabilities to load smaller images when you use different screen sizes (responsiveness), is done by “srcset”
More on Speed:
- Enable compression: Compressing resources with gzip reduce the number of bytes sent over internet
- Eliminate render blocking JS in above the fold: move your JS files to the footer
- Reduce server response time: Speak with your hosting provider about it
- Leverage browser caching: Set an expiry date or a maximum age in HTTP headers for static resources to instruct the browser to load previously downloaded files from local computer instead of over the internet.
Online Resources:
- https://tools.pingdom.com/
- https://developers.google.com/speed/pagespeed/insights/
- http://www.webpagetest.org/
Contact me about: Web Performance Optimisation, by:
WhatsApp Email