Advanced performance checklist Performance Budget Validation Testing Design Code Server Performance Budget Just an example; discuss with your team for what’s best for you. Load time: < 1s (1000ms). Speed index: < 800.WebPageTest Page size: 800 KB transfer size maximum. Requests: 15 requests maximum. Pass: Google Mobile Friendly Test. Google Page Speed: achieve green on Mobile & green on Desktop. Validation Testing Tested with a slow/unreliable Internet connection. Testing in many large screen browsers & devices. Testing in many small screen browsers & devices. Achieves high grades in web performance tests.WebPageTest, Google Page Speed, YSlow. Passes Google Mobile Friendly Test. Design Conforms to your performance budget. Images aren’t bigger than they need to be. Unnecessary images have been removed. Images are as optimized as they can be. Images properly saved using “Save for Web” from Photoshop. All images smushed after saving them.ImageOptim, Spritebot As few font styles are used as possible. Font special features are used sparingly—no text-rendering: optimizeLegibility Appropriate PNGs have reduced colour palettes.ImageAlpha Use CSS sprites or DataURIs where appropriate. Page scrolling is smooth. Web fonts have been sub-set to reduce file size. Web fonts don’t block rendering.Font Face Observer Code Redundant HTML has been removed: no divitus, no hidden content, etc. All broken links and resources are removed. HTML has been minified.CloudFlare SVGs are embedded when only used on a single page. Offscreen images are loaded on demand. Put CSS <link> tags at the top, inside <head> Duplicate and redundant CSS has been removed. CSS has been concatenated and minified. Gulp, Grunt, Prepros, CodeKit Consider putting critical CSS in <head>. JS has been concatenated and minified. Put JS <script> tags at the bottom, right before the closing </body>. Redundant JavaScript has been removed. JavaScript doesn’t cause browser to hang. JavaScript is loaded asynchronously. Tracking & ad display scripts are minimum or non-existent. Server Resources sent in a compressed format. Specify character set for all text-based resources. Proper caching headers sent. Use a content delivery network (CDN) to serve your images.CloudFlare, KeyCDN, MaxCDN Website hosted on a fast server, ideally with CDN features. Server uses HTTP/2 where possible.
