TOtoinbis·Dec 9, 2020
Sure! :) But I think it's all just about few principles. Elaborated a bit more on them:
1. Tailwind CSS classes extracted with purge-css, all inlined.
2. Favicon inlined, small images (<4kb) inlined. Not sure what’s the best threshold. Here is all https://turboeshop.com/inlinedimages/ is all page in one requests. Meaning two big images that are https://turboeshop.com/fastestpageintheworld/ were inlined - results are way worse. So larger images - definitely excluded.
3. Gzip stuff(as one commenter below commented, not done in turboeshop.com/fastestpageintheworld/).
4. Everything from same domain and subdomain. If you want cloudinary or friends, I guess they are only allow subdomain. This is totally OKeish exemption. Or maybe there is a way to work around that cloudinary serves, Cloudflare caches.
5. JS - inlined. Cash.js maybe if you need
Read the rest
jquery replacement, or just vanilla. Little content on vanilla js nowadays :), https://gomakethings.com/articles/ is something interesting. Don’t want to flame here, am not js expert, maybe someone can elaborate.
6. For compex components - svelte web components (or stencils or lithtml) - I’d prefer svelte but am not sure what’s best.
7. Google analytics a) - there is new google analytics (GA4) with measurement protocol2 and new server side google tag manager. Serve side gtm does two things a) serves gtag.js; b) accepts measurement protocol hits and sends to GA. Take a look how it’s done - https://www.simoahava.com/gtm-tips/build-custom-universal-an... , it’s very similar as cloudflare workers, cool stuff. But it’s hosted on Google App Engine, thus - slow. But you don't need google's server anymore, you control full infra, so why not setup simple cache here.
8. Google analytics b) To owerome latency to Google App engine, so you make async proxy in cloudflare workers - one worker to proxy for gtag.js download, one for serving gtag.js from your own domain. <script src=“http://yourdomain.com/workers/gtag/js?id=G-1234455> . Basicly just serve from js cache and check every once in a while if google hadn’t changed their code. Same for GA hits. It used to be google-analytics.com/collect endpoint, server side gtm allows to host collection yourself. You again make worker-proxy, define it in gtag’s transport_url:'https://turboeshop.com/measure' setting and make sure worker returns non-blockingly, and just then forward
the measurement protocol hit from worker async-ly with event.waitUntil().
9. Google analytics c) The gtag.js/analytics.js is a huge file and you have no control, so maybe just use https://github.com/segmentio/analytics.js instead or check out https://www.thyngster.com/app-web-google-analytics-measureme... (search “navigator.sendBeacon”) - craft measurement protocol yourself and send it to gtm. I plan on investigating this but have not yet done that.
10. All the stuff (fb tracking pixel, etc.) you are used to just ‘putting in html’, you instead send as measurement protocol hit dimension and do ETL in google tag manager.
11. All the 3rd party stuff that demands to be executed client-side - you just don’t use that :D (or use, but wisely)
12. HTML - bussiness as usual.
13. So after page reload - double check if all requests are done/received from your own domain. Use curl on each of them to find header CF-cache-status: HIT. They have this ‘varied’ or similar status which means something I can’t remember, but I always fix stuff till ‘Hit’ :)
14. I guess that’s it. Enjoy your own fastest website in the world :)