Skip to end of metadata
Go to start of metadata makes these key recommendations:

  1. Leverage browser caching
  2. Parallelize downloads across hostnames
  3. Enable compression
  4. Combine images into CSS sprites
  5. Minify CSS
  6. Optimise SVG file

The first three are server-side changes, the latter-two can be done by Web Services.
See Webserver config change requests.

For the minification and concatenation of CSS and JS we could look at as tool to get us started.

Google's online Page Speed tool gives these results

Page Speed results April 1 2011


High priority. These suggestions represent the largest potential performance wins for the least development effort. You should address this item first:

  • Leverage browser caching

Medium priority. These suggestions may represent smaller wins or much more work to implement. You should address these items next:

  • Combine images into CSS sprites,
  • Optimize images

Low priority. These suggestions represent the smallest wins. You should only be concerned with these items after you've handled the higher-priority ones:

  • Inline Small JavaScript,
  • Defer parsing of JavaScript,
  • Minify CSS,
  • Minify HTML,
  • Minify JavaScript,
  • Specify a Vary: Accept-Encoding header

Additionally there are other standard practices we should be following:

  1. load JavaScript at the bottom of the page rather than the top
  2. optimize images
  3. Late loading of resources where not immediately necessary (images/HTML that are off-screen or accessible via JS, images/JS/HTML loaded later in the document where not immediately needed) - for example, work from China page loading time can be seen here - click on Agent Location.
  4. Reduce the number of requests where possible (CSS sprites, concatenate CSS and JS)

Other notes

Phil also suggest creating a JSP that works out what Javascript/CSS to include from the various ones specified for a page. This would reduce the number of requests massively. Many of the resources are specified as a page property, and we already know what the template would use.

Liam has also pointed out images may not be correctly compressed and looking at it indicates a saving of 309.8 KB.

We have not yet looked at optimising our HTTPS serving. There is a resource here which appears useful.


SVG optimisation

Ideally any optimisation of SVG assets will take place automatically within a Grunt build process. However there are a number of manual optimisations that can be implemented that can drastically reduce both the file size and the likelihood of import or display errors in vector programs such as Sketch or Illustrator.

Minimum validated SVG structure

The first step should be remove any redundant XML tags, IDs, non-CSS colour declarations and other unnecessary meta information to leave a lean file structure.

Minimum SVG file structure

General rules for SVG structure & optimisation

Declare height & width

The <svg> tag should always include defined width and height values. Values can be in px or percentages.

(warning) Sketch does not currently honour SVG sizes declared in percentages. Importing an SVG file declared as <svg width="100%" height="100%" fill="#cccccc" /> results in a 100px x 100px grey square.

 viewBox attribute

The viewBox attribute in the <svg> tag should be set to display the full SVG .

SVG title

The <title> should describe the topic, subject or name of the SVG.

Grouping paths and elements

Related paths should be grouped with a <g> tag. Each group should have a unique id. Group sparingly and use ids only where necessary.

Colour definitions should be applied to <g> tags using the fill attribute in hexidecimal (#000000) format.

Grouped elements can have a preceding <desc> which describes the contents of the group. Add descriptions where necessary but do not overuse.

  • No labels