When is a site fast? It’s fast when:
- it loads quickly,
- and, being loaded, it works quickly (meaning animations don’t skip frames, scrolling is smooth, and so on)
And the site loads quickly when:
- the server responds to requests in a short time,
- and the app itself loads and renders quickly.
What really happens when we hit an URL on the tab
First Browser finds the DNS-Lookup for the URL.It transforms the URL to the IP address and Before send a request Three-way Handshaking has Happened. If we make redirections it will cost more Browser needs to find out new IP address it will take extra time.
three way handshaking
It means both server and client can agree on what order data is transferred
Once Acknowledgement is received Browser Sends a Request to the server and server gives the response back.This is often we called as Client-Server Computing.
First, we get HTML document from the server then Browser starts parsing the HTML file and creates the Dom(Document object model).Once Parser reaches the Link tag Which is our CSS then browser Sends another request
to get the CSS. The browser only allows 6 requests per host.
When we made the 7th request Browser Places it in the queue.In Http/2 Multiplexing is allowed we can send more than 6.
optimize JavaScript
minification
script标签使用async或defer
async - download asynchronously, execute it when downloaded
defer - download asynchronously and execute it only after the document is parsed
code splitting
webpack中使用动态import
optimize CSS
minification
Extract critical CSS and fetch it first
critical.css & non-critical.css
Remove styles and hide page elements till the page starts to look really funny (or incorrect). The remaining CSS is critical.
<link rel="preload" as="style" href="non-critical.css" onload="this.rel = stylesheet"/>
critical styles
- styled-components + server side rendering
- critical by Addy Osmani
- penthouse by Jonas Ohlsson Aden
optimize HTTP
minification html
compress using gzip ，compress only text resources（css,js,html and etc）
use a CDN
preload resources
Preload: When we use preload in link tag it makes early fetch request to get the resource. Mostly used to fetch high priority resource that is used in current route.Preconnect: It resolves the DNS and TCP handshaking.DNS-Preconnect: It only resolves the DNS.Prefetch:It helps to fetch the resource and places it in the cache whenever the resources needs take it from the cache instead of making another request.
<link rel="preload" as="style" href="non-critical.css" onload="this.rel = stylesheet"/>
<link rel="dns-prefetch" href="//example.com" />
<link rel="preconnect" href="//example.com" />
<link rel="prefetch" as="style" href="style.css" />
<link rel="prerender" href="//example.com" />
optimize Images
choose a proper format
svg:vector images such as icons or logos
jpg:photos
png:display without any quality losses
webp:only chrome
gif:don’t use at all
<picture>
<source srcset="img.webp" type="image/webp">
<img src="img.jpg" type="image/jpeg">
</picture>
compression
optimize Fonts
add font fallback
font-family:'xx xxx', sans-serif;
use font-display
@font-face {
src="...";
font-display:fallback | optional;
}
