Boost Your Site Speed: Essential Front‑End Performance Checklist for 2020

This article presents a comprehensive front‑end performance checklist covering network optimizations like OCSP stapling, IPv6 adoption, HTTP/2 deployment, HTTP/3 readiness, HPACK compression, security hardening, testing workflows, continuous monitoring, and quick‑win tactics to dramatically improve page load times and user experience.

WecTeam
WecTeam
WecTeam
Boost Your Site Speed: Essential Front‑End Performance Checklist for 2020

Network and HTTP/2

53. Enable OCSP stapling

Enabling OCSP stapling on the server speeds up TLS handshakes by allowing browsers to verify certificate revocation without downloading CRLs.

54. Adopt IPv6

With IPv4 address exhaustion and growing IPv6 adoption, update DNS to IPv6 and support dual‑stack to improve performance, as studies show 10‑15% speed gains.

55. Ensure all resources run over HTTP/2

Switching to HTTPS and HTTP/2 is widely supported; 54% of requests already use HTTP/2. Although HTTP/2 has priority issues, it is generally beneficial.

If still on HTTP, migrate to HTTPS and adjust build for HTTP/2 multiplexing.

According to the Web Almanac, 54% of requests were served via HTTP/2 at the end of 2019.

56. Deploy HTTP/2 correctly

Balance module merging and parallel loading; the ideal is fewer requests. Avoid bundling everything together; small modules reduce download size and parsing time, but excessive small files increase IPC overhead.

Progressive CSS loading is recommended.

57. Does your server/CDN support HTTP/2?

Check TLS speed, enable BBR congestion control, and ensure kernel support (Linux 4.9+). Major CDNs like Google Cloud and Amazon CloudFront support it.

58. Does your server/CDN support QUIC‑based HTTP (HTTP/3)?

HTTP/3 offers faster handshakes and better performance on lossy networks but uses more CPU. It is being standardized and expected as a standard in early 2020.

59. Are you using HPACK compression?

Verify that your HTTP/2 server implements HPACK to reduce header overhead; tools like h2spec can test this.

60. Ensure your server security is airtight

Set correct security headers, eliminate known vulnerabilities, enforce HTTPS, HSTS, and CSP, and load all third‑party scripts over HTTPS.

Testing and Simulation

61. Optimize your audit workflow

Use Tim Kadlec’s Alfred workflow to submit tests to WebPageTest, learn to read waterfall and connection charts, and integrate Lighthouse CI scores into CI pipelines.

62. Test in proxy and traditional browsers

Measure performance on browsers popular in Asia (UC Browser, Opera Mini) and use network throttling and real devices via BrowserStack.

63. Test accessibility impact

Understand how large JavaScript and DOM operations affect screen‑reader latency and test with various assistive technologies.

64. Establish continuous monitoring

Run private WebPageTest instances, use tools like Sitespeed, Calibre, SpeedCurve, and set up automated performance regression alerts.

Quick Wins

For a one‑hour sprint, focus on 15 actionable goals such as measuring TTI, limiting critical CSS to <script type="module"> for modern browsers, using resource hints, optimizing images with mozjpeg, enabling Brotli/Gzip, enabling TCP BBR, OCSP stapling, IPv6, HPACK, HTTP/3, and caching assets in a service worker.

accessibilityTestingNetworkHTTP2frontend performanceWeb Optimization
WecTeam
Written by

WecTeam

WecTeam (维C团) is the front‑end technology team of JD.com’s Jingxi business unit, focusing on front‑end engineering, web performance optimization, mini‑program and app development, serverless, multi‑platform reuse, and visual building.

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.