PROJECT ENQUIRY

Knowledge Base

What optimisation is performed on our client’s websites?

Website optimisation improves speed and performance. In an age where speed drives user experience, SEO and in turn, your website’s profitability, it’s hugely important.

As part of our hosting service, we provide server caching and a vast array of website optimisation strategies to the WordPress sites we host. This is so we can get the websites to perform as best they possibly can.

But what optimisation is carried out on the websites? Often web hosts will throw the optimisation term around and not really back it up. Well, that’s where we’re different.

What optimisation is carried out exactly? #

We employ a number of strategies aimed to reduce the DOM size & streamline content. This includes optimisation of the HTML, CSS, JavaScript & images.

It’s worth noting we do not necessarily enable all of the features on every website, but rather choose the best strategies we see fit on a case by case basis.

HTML #

  • Collapse Whitespace: Reduces the transfer size of HTML files by replacing contiguous whitespace with a single whitespace character.
  • Combine Heads: Attempts to combine multiple <head> tags into one.
  • Elide Attributes: Reduces the transfer size of HTML files by removing attributes from tags when the specified value is equal to the default value for that attribute.
  • Hint Resource Preloading: Uses resource preloading HTTP headers to inform browsers of CSS and JavaScript resources early in page processing, to permit them to fetch them earlier than would otherwise be possible.
  • Pre-Resolve DNS: Provides hints to the browser at the beginning of the HTML, which allows the browser to pre-resolve DNS for resources on the page.
  • Remove Comments: Eliminates HTML comments, which are often used to document the code or to comment out experiments. This reduces the overall size of the DOM.
  • Remove Quotes: Eliminates unnecessary quotation marks from HTML attributes.
  • Trim Urls: Trims URLs by resolving them by making them relative to the base URL for the page.

CSS #

  • Combine CSS: Seeks to reduce the number of HTTP requests made by a browser during page refresh by replacing multiple distinct CSS files with a single CSS file.
  • Fallback Rewrite CSS URLs: Parses linked and inline CSS, rewrites the images found and minifies the CSS.
  • Flatten CSS Imports: Reduces the number of HTTP round-trips by combining multiple CSS resources into one.
  • Inline CSS: Reduces the number of requests made by a web page by inserting the contents of small external CSS resources directly into the HTML document. This can reduce the time it takes to display content to the user, especially in older browsers.
  • Move CSS To <head>: Seeks to reduce the number of times the browser must re-flow the document by ensuring that the CSS styles are all parsed in the head, before any body elements are introduced.
  • Prioritise Critical CSS: Improves page render times by identifying CSS rules needed to render the page, inlining those critical rules and deferring the load of the full CSS resources.
  • Rewrite CSS: Parses linked and inline CSS, rewrites the images found and minifies the CSS.
  • Rewrite Style Attributes With URLs: Rewrite CSS inline style attributes that contain URLs, for example background-images can be targeted using this filter.

JavaScript #

  • Canonicalize JavaScript Libraries: Identifies popular JavaScript libraries that can be replaced with ones hosted for free by a JS library hosting service (the default is Google Hosted Libraries).
  • Combine JavaScript: Seeks to reduce the number of HTTP requests made by a browser during page refresh by replacing multiple distinct JavaScript files with a single one.
  • Include JavaScript Source Maps: Source maps are files that tell browsers how to map between a minified JavaScript file and the original, readable version so that you can see the readable version while debugging minified production code.
  • Inline JavaScript: Reduces the number of requests made by a web page by inserting the contents of small external JavaScript resources directly into the HTML document. This can reduce the time it takes to display content to the user, especially in older browsers.
  • Move CSS Above Scripts: Seeks to make sure scripts do not block the loading of CSS resources.
  • Minify JavaScript: Rewrites JavaScript files to remove excess whitespace and comments. In OptimizeForBandwidth mode, the minification occurs in-place without changing URLs.

Images #

  • Convert to WEBP Animated: Converts animated images to WEBP animated images.
  • Convert to WEBP lossless: Converts any images to WEBP lossless.
  • Deduplicate Inlined Images: Reduce the transfer size of HTML files by eliminating redundant image data URLs.
  • Inline Images: Replaces references to small images by converting them to inline data: URLs, eliminating the need to initiate new connections for fetching the image data.
  • Inline Preview Images: Generates low quality versions of the images that are inlined in the HTML page. Users experience faster rendering of the page and the low quality images are replaced by high quality versions after an onload event is triggered.Requires:  Insert Image Dimensions
  • Insert Image Dimensions: Adds width= and height= attributes to the <img> tags if they are missing. Values for the width= and height= attributes are computed from the image.
  • Lazyload Images: Optimise browser rendering and reduce number of HTTP round-trips by deferring the loading of images which are not in the client’s viewport.
  • Recompress Images: Recompresses images, removing excess metadata and transforming gifs into pngs.
  • Resize Images: Shrinks the dimensions of an image to the width= or height= attribute specified in the <img> tag or in the inline style= attribute.
  • Resize Mobile Images: Generates low quality versions of the images that are inlined in the HTML page.
  • Resize Rendered Image Dimensions: Shrinks images to their rendered dimensions on the web page. Unlike resize_images, it ignores any width and height attributes specified for the images.
  • Responsive Images: Makes images responsive by adding srcset attributes which provide multiple versions for different pixel density screens.
  • Optimise Images: Performs common image optimisations, including recompression, transcoding to optimal formats, reduction of image dimensions, and inlining of small images into HTML or CSS.
  • Sprite Images: Detects GIF and PNG images used as backgrounds in CSS, and combines all such images referenced from a CSS file into a single large image. The individual CSS backgrounds are then rewritten to point to the single large image.