Read on Twitter
A thread on optimizing a bootstrap site (the new TF site is built on top of BS). Of limited interest to many, but probably to a few. Will update as I implement changes. Am using SpeedIndex as benchmark. Kickoff is a SpeedIndex of 11. So yeah the only way is up.
First step was to lazy load all display images using a small JS called echo. See: https://github.com/toddmotto/echo ">https://github.com/toddmotto... This immediately pushed SpeedIndex to 6.5, tho there is a trade off for fast scrollers as depending on their connection they get a placeholder image waiting for real image
Next, I used a CSS option for the hamburger instead of an icon, which means I don’t need to load FontAwesone anymore as that was all I was using it for. Details here: https://superdevresources.com/css-hamburger-menu/">https://superdevresources.com/css-hambu... More in a bit.
Sidenote, while all this is specific to BS (an appropriate acronym if there was ever one) much will equally hold for WP and other platforms - if messing around with code is your tilt.
Yes, just in case you were wondering, I am supposed to be writing. 
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🤣" title="Rolling on the floor laughing" aria-label="Emoji: Rolling on the floor laughing">
The existing TF homepage scores well, getting to this, with BS, will be a significant challenge.
Next is tackling DOM insanity (hence my silence for an hour or so) with eleventy million nodes ... The chrome add on DOM node tree viewer ( https://chrome.google.com/webstore/detail/dom-node-tree-viewer/jbplakkefflidgnjhckoahendgekokfc/related?hl=en">https://chrome.google.com/webstore/... ) can be useful in this regard...
DOM giving me a migraine, so switched to dealing with onboarded fonts. In this case am using Poppins font fm Google so added "&display=swap" to the font stylesheet call. More info here: https://web.dev/font-display/ ">https://web.dev/font-disp... SpeedIndex now to 4.2. Slowly getting there.
Who knew a heart was nothing but two circles and a square. Dropped the SVG file and made the hearts I needs with CSS. More here: https://css-tricks.com/hearts-in-html-and-css/">https://css-tricks.com/hearts-in... Reduced DOM by 1,100 elements...
Yet to tackle the css, but I reckon this is fair progress for a coupla hours—should be able to get it to 93-95, speed index to 2ish and FCP around a second. Server is in Singapore, I dunno where G does these tests from, may be an issue.
So back onto this (sorry @Bali_chris !) Got the page up to 96, but the TTFB was ridiculously slow. Seems the server was spitting out a giant furball, so went back to check the SQL and found this. Had forgotten to set keys so query was calling up 900k rows for 6 records. Ace.
Fixing the Key Index reduced the page generation time from around 0.7 seconds to 0.01 seconds. There is still something else wonky going on, but that was a big part of it!
