http://www.webpagetest.org/result/110314_KT_5AHD/1/pagespeed/ makes these key recommendations:
- Leverage browser caching
- Parallelize downloads across hostnames
- Enable compression
- Combine images into CSS sprites
- Minify CSS
- 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 http://code.google.com/p/minify/ as tool to get us started.
Google's online Page Speed tool gives these results
Additionally there are other standard practices we should be following:
- optimize images
- 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.
- Reduce the number of requests where possible (CSS sprites, concatenate CSS and JS)
Liam has also pointed out images may not be correctly compressed and looking at http://www.webpagetest.org/result/101101_A72Y/1/performance_optimization/#compress_images it indicates a saving of 309.8 KB.
We have not yet looked at optimising our HTTPS serving. There is a resource here http://blog.httpwatch.com/2009/01/15/https-performance-tuning/ which appears useful.
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.
General rules for SVG structure & optimisation
Declare height & width
<svg> tag should always include defined width and height values. Values can be in px or percentages.
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.
The viewBox attribute in the
<svg> tag should be set to display the full SVG .
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.