Next level website optimization (WordPress Ahmedabad Meetup April 2020)

We will try to cover some untouched things which are very important in terms of speed optimization. This session mostly includes the technical topics along with the normal basic introduction for the non-developers too.

In this session, We will include some future techniques of the optimization which are listed below:

-> Server Response
-> DOM in detail
-> Preconnect to required origins
-> Use cookie-free domains
-> Eliminate render-blocking resources
-> Algorithms of Compression
-> Expiry Header and etc...

Speaker:
==============
Jinal Parekh

Transcript

1. Next Level Speed Optimization.? Here you go… 26th April
2. Outline • Server Response • DOM in detail • Preconnect to required origins • Use cookie-free domains • Eliminate render-blocking resources • Algorithms of Compression • Expiry Header • Etc
3. 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
4. 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?
5. DOM?
6. 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
7. 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..
8. 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.
9. 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
10. 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 <link rel="preconnect" href="https://fonts.gstatic.com" >
11. Improve page load speed with preconnect
12. Improve page load speed with preconnect
13. Browser support : Preconnect
14. 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 <link rel="dns-prefetch" href="https://fonts.gstatic.com" > <link rel="dns-prefetch preconnect" href="https://fonts.gstatic.com" > Note : Firefox only performs the DNS-prefetch for HTTP only
15. Browser support : Dns-prefetch
16. 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 <link rel="prefetch" href="/checkout.js" >
17. Prefetch :
18. Browser support : Prefetch
19. Preload : • Preload download late-discovered resources needed for current navigation. <link rel="preload" href="used-later.js" as="script"> • 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.
20. Browser support : Preload
21. 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
22. 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/
23. 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
24. 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: <IfModule mod_brotli.c> 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 </IfModule>
25. 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 <IfModule mod_headers.c> <FilesMatch ".(js|css|xml|gz|html)$"> Header append Vary: Accept-Encoding </FilesMatch>
26. 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.
27. 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.
28. Thanks! Any questions?