2018 Frontend Performance Checklist
This article presents a comprehensive 2018 frontend performance checklist that guides teams from establishing a performance culture and selecting metrics to optimizing build processes, static assets, HTTP/2, security, and monitoring, while offering quick‑win actions for immediate impact.
Performance is critical for modern web applications, yet many teams still lack a clear understanding of where bottlenecks lie—whether in heavy JavaScript, large images, slow fonts, or inefficient rendering. This checklist aims to embed performance into the development workflow, turning it from a post‑mortem concern into a proactive culture.
1. Establish a Performance Culture – Encourage collaboration, gather real‑user feedback, and use data‑driven case studies to prioritize loading order and trade‑offs early in design.
2. Choose the Right Metrics – Focus on time‑to‑first‑pixel, First Meaningful Paint (FMP), Speed Index, Time‑to‑Interactive (TTI), and other user‑perceived metrics rather than generic file size reductions.
3. Set Realistic Goals – Aim for a 100 ms response time, 60 fps animation, Speed Index < 1250, and TTI < 5 s on 3G, using mid‑range Android devices (e.g., Moto G4, Nexus 5X) as reference hardware.
4. Define the Environment – Select build tools that are fast and maintainable; avoid “cool” but fragile solutions.
5. Progressive Enhancement – Build core functionality first, then layer advanced features for capable browsers.
6. Set Hard Performance Budgets – Limit core HTML to ~15 KB, total JavaScript/CSS to 170 KB gzipped, and keep critical chunks under 14 KB to fit within the first RTT.
7. Choose the Right Framework – If a framework is needed, prefer one with server‑side rendering (SSR) support and evaluate both SSR and client‑side rendering on mobile devices.
8. Consider AMP/Instant Articles – Use AMP or similar solutions for fast mobile delivery, but they are optional.
9. Select an Appropriate CDN – Use a CDN that supports compression, HTTP/2, and edge‑side includes; consider a JAMstack approach for static assets.
10. Optimize the Build – Prioritize resources into core, enhanced, and lazy‑load groups; use standards‑compliant techniques (cutting‑the‑mustard) to serve only what the browser can handle.
11. Reduce JavaScript Size – Remove unused dependencies, apply tree shaking, code splitting, and scope hoisting (e.g., via WebPack) to shrink bundles.
12. Micro‑optimizations & Progressive Startup – Use SSR for fast FMP, then load minimal JavaScript for interaction, displaying skeleton screens instead of generic loaders.
13. Asynchronous Loading – Add defer or async attributes to script tags; prefer defer when IE 9 support is not required.
14. HTTP Caching Headers – Ensure proper Expires , Cache‑Control , and Max‑Age settings, using Cache‑Control: immutable for fingerprinted assets.
15. Static Resource Optimizations – Enable Brotli or Zopfli compression, serve WebP images, use responsive <picture> or srcset , subset Web Fonts and serve WOFF2 with font-display: optional .
16. Distribution Optimizations – Push critical CSS in the <head> , use HTTP/2 server push or resource hints ( dns-prefetch , preconnect , prefetch , preload ).
17. HTTP/2 Preparation – Migrate to HTTPS, balance module size versus parallel loading, and test both HTTP/1.1 and HTTP/2 paths.
18. Security Hardening – Verify security headers, SSL certificates, CSP, HSTS, and OCSP stapling.
19. IPv6 & HPACK – Enable IPv6 support and HPACK header compression for HTTP/2.
20. Service Workers – Cache static assets locally to eliminate network latency.
21. Testing & Monitoring – Use Lighthouse, WebPageTest, Calibre, SpeedCurve, and custom RUM to continuously track performance, and monitor mixed‑content warnings after HTTPS migration.
22. Quick‑Win Actions – Prioritize real‑user metrics, core CSS in <head> , lazy‑load scripts, add resource hints, subset fonts, convert images to WebP, verify cache and security headers, enable Brotli/Gzip, activate HPACK and OCSP, and cache everything via Service Workers.
Architecture Digest
Focusing on Java backend development, covering application architecture from top-tier internet companies (high availability, high performance, high stability), big data, machine learning, Java architecture, and other popular fields.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.