Web Performance Optimisation

Web Performance Optimisation > Reduce Downloading time > Get more conversion

Files in General:

Reduce number of files:

  • If WordPress: Deactivate unnecessary plugins > This will reduce JS and CSS files
  • Combine JS
  • Combine CSS
  • Reduce number of images (next section)

Reduce file sizes:

  • Minify JS
  • Minify CSS
  • 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
  • Do not 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:

Reduce image dimensions:

  • Do not use Retina images > You can save 75% of image file size!
  • Generate images at the bigger dimensions that they are going to be shown (responsiveness), never bigger

Use Correct image format and JPG compression (next section)

Image Optimisation: Photoshop

Master:

  • Start always with a high quality big master image
  • 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 to the dimensions that image is going to be presented at its bigger responsive scenario
  • Then Save for Web:

Use correct image format:

  • Photographs: JPG
  • 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 compress ratio is 50% to 60% but in some scenarios you can even drop it to 30%
  • You can also tick in “Progressive” that way images will load increasing the resolution, allowing the page to load faster as it reduces the render blocking

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:


Share this page in:

twitter sharefacebook sharelinkedin shareemail sharepinterest sharewhatsapp share

Be the first to write a comment.

Feedback