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  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
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. 🤣
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 ) 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/  SpeedIndex now to 4.2. Slowly getting there.
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!
You can follow @travelfish.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled: