Next Level Speed Optimization.? Here you go… 26th April 

Outline ● Server Response ● DOM in detail ● Preconnect to required origins ● Use cookie-free domains ● Eliminate render-blocking resources ● Algorithms of Compression ● Expiry Header ● Etc 

Server Response ? ● Time to First Byte (TTFB) is the total amount of time spent to receive the first byte of the response once it has been requested. It is the sum of "Redirect duration" + "Connection duration" + "Backend duration". This metric is one of the key indicators of web performance. ● In the Waterfall Chart, it is calculated at the start of the test until just before receiving on the page request and represented by the orange line. ● Some ways to improve the TTFB include: optimizing application code, implementing caching, fine-tuning your web server configuration, or upgrading server hardware. ● In short Redirect Connect + Backend = TTFB 

As Per Billy Hoffman ● To summarize, your ideal targets for your initial HTML page load should be: ○ Time to First Byte of 500 ms or less ○ Round Trip network latency of 100 ms or less ○ Back-end processing of 400 ms or less ● So if your numbers are higher than this, what can you do about it? 

DOM? 

W3C? and Where the DOM came from ● w3c is a vendor organization. main vendors are microsoft and Netscape ● DOM is recommended by W3C. ● Browser wars in 1990 between Netscape Navigator and Microdoft Internet Explorer ● 1996 within Netscape Navigator 2.0 “DOM Level 0" or "Legacy DOM” ● W3C in late 1998 - > 2000 introduce.. DOM Level 1 and 2. ● 2005, large parts of W3C DOM were well-supported by common ECMAScript-enabled browsers ● Different as per the browser 

What is a Node & levels of DOM? ● The DOM presents documents as a hierarchy of Node objects that also implement other, more specialized interfaces. ● Element Node – contains an HTML tag ● Text Node – contains text ● Text Nodes are contained in Element Nodes ● Comment nodes and so on Levels of DOM? Another Normal Ways.. 

Virtual DOM? ● At any point in time, the React library maintains two copies of the Virtual DOM; ● Pristine Version and Dirty Version ● later on it will perform a diff operation between the pristine version and the dirty version and a delta is computed. Later on, this delta will be applied to the real DOM so that only the required part of the web page is updated, instead of repainting the entire web page. 

Resource Hints ● Resource Hints is used for Predictive Caching. ● As Http caching is only used for the next request or Second request , Resource Hints tells the browser to point to the resource that is used for the same request or the next one. ● Types of Resource Hints : ❏ Preconnect ❏ Dns- prefetch ❏ Prefetch ❏ Preload 

Preconnect : ● Preconnect allows the browser to setup early connections before an HTTP request is actually sent to the server. ● Preconnect : ○ Resolve DNS ○ Perform TCP handshake ○ Setup TLS 

Improve page load speed with preconnect 

Improve page load speed with preconnect 

Browser support : Preconnect 

Dns-prefetch : ● Dns-prefetch is only effective for DNS lookup. It is useful for the resource which is loaded later. ● E.g. Autocomplete api for search list of website Note : Firefox only performs the DNS-prefetch for HTTP only 

Browser support : Dns-prefetch 

Prefetch : ● Prefetch download resources for later use that might be used for future navigations. ● Prefetch download the resources at low priority and store it in the cache until the next use. ● E.g. checkout related script 

Prefetch : 

Browser support : Prefetch 

Preload : ● Preload download late-discovered resources needed for current navigation. ● The as attribute, give the browser more context about the destination of preloading request being made. ● It ensures that the browser will set appropriate request headers, request priority, as well as apply any relevant Content Security Policy directives that might be in place for the correct resource context. 

Browser support : Preload 

Use cookie-free domains ● Create a subdomain such as static.yourwebsite.com ● Point your new subdomain to the /wp-content directory of your WordPress installation. ● Edit your wp-config.php file to reflect the following: ● define("WP_CONTENT_URL", "http://static.yourwebsite.com"); ● define("COOKIE_DOMAIN", "www.yourwebsite.com"); ● Run the following command in your SQL database, this will ensure all post URLs are directed to the new subdomain: ● UPDATE wp_posts SET post_content = REPLACE(post_content,'www.yourwebsite.com/wp-content/','static.yourwebsite.com/') ● Also, re-configure your WordPress site and Use Cookie-Free Domains – WordPress Plugin (WP2Static : https://wordpress.org/plugins/static-html-output-plugin/) ● Reference : https://authoritywebsiteincome.com/setup-a-cookieless-domain/#4_Direct_url_to_new_s ubdomain 

Eliminate render-blocking resources ● Defer parsing Of Javascript ○ https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html) ○ Support - https://caniuse.com/#feat=script-async ○ https://flaviocopes.com/javascript-async-defer/ 

compression? Text compression minimizes the byte size of network responses that include text content. Less bytes downloaded means faster page loads. When a browser requests a resource, it lists what text compression encodings it supports in the accept-encoding request header. The server encodes the response in one of the formats that the browser supports and indicates which format it used in the content-encoding response header. Compression Formats: Brotli (Short name: br - A newer compression format), Gzip (Universally support by all modern browser) Deflate 

Enable text compression How to enable text compression on your server? Brotli configuration: https://www.tunetheweb.com/performance/brotli/ https://wiki.centos-webpanel.com/enabling-brotli-compression-on-apache Config to .htaccess to enable Brotli compression: AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/x-javascript application/javascript application/json application/x-font-ttf application/vnd.ms-fontobject image/x-icon 

Specify a Vary: Accept-Encoding header Fixing “Specify a Vary: Accept-Encoding Header” NGINX server: SSH access needed /etc/nginx/nginx.conf => Find “gzip_vary” and change to “gzip_vary on” Apache server: FTP client access needed .htaccess file and add below code Header append Vary: Accept-Encoding 

Expiry Header What it is? ● Expires Headers tell the web browser how long to store a file in the cache. ● Keeping the files in the cache of your computer means on future visits to that page the browser will not need to download the file again. How it works? ● Expires headers can be set on file types or specific files. ● When the browser comes to the website it can see when was the last time it downloaded the specific file types. If it was recently it will display them from the cache, if you haven’t visited the site in a while it will download the newest version from the web server. If a file is missing from the cache it will be downloaded from the server. 

For items that change rarely on your site, like your logo or favicon, you can set the images to expire later. For items that tend to change more often, you can shorten the time. Again you can do this on a per file or file type basis. You can set the expiry times in minutes, hours, day, months & years. The expiry time to set depends on 2 things: ○ Resource Type ■ CSS ■ JS ■ Images ○ Change Frequency ■ CSS, JS files are less likely to change after development. ■ On the other hand images may change and mostly managed from the back-end. I.e. product images ● Therefore, we can set different time for each resource type. ● For e.g. CSS ~ 1 month, JS ~ 1 month, Images ~ 7 days etc. ● Note: Expires Headers don’t improve page speed for a first visit, after all you need to have downloaded the files at least once to reference them again. But for return visitors, page load times will be faster. 

Thanks! Any questions?