Improve performance

[stevenguyukai]

Summary

1. Eliminate render-blocking resources

⭐️Main Change:

Change rel="stylesheet" to rel="preload"
Add as="style" onload="this.rel='stylesheet'"

Render-Blocking resources:

• google_font_roboto_300_400_500_700.css
• https://unpkg.com/leaflet@1.5.1/dist/leaflet.css
• https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
• https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css

Official Doc - render-blocking-resource

2. Preload Largest Contentful Paint (LCP) element's image

⭐️Main Change:

Preload the patchNote's gif image to the index.html

LCP element:

• PatchNotes.tsx

Optimizing LCP element

3. Pre-connect to required origin

⭐️Main Change:

Pre-connect to https://fonts.gstatic.com in the index.html

Resources using this website:

• google_font_roboto_300_400_500_700.css

Official Doc - uses-rel-preconnect

4. Ensure text remains visible during webfont load

⭐️Main Change:

Add font-display: swap to some font family

Official Doc - Font display

Issue

Closes #957