I’d like to see what others have used CloudFlare tech for. I think it can be a good source of inspiration for everyone. Answering questions here (and sometimes being corrected!) has taught me a lot. Perhaps this topic will help with learning by example as well.
Link the site you built or own, and describe what CF features make it special and why.
This is a one-page site for now. I wanted it to load fast on mobile but also be more than a static one-page template . So it was a bit of a challenge with two 1080p videos.
The site uses a page rule to cache everything, including the HTML, for 1 day. Also I am using ColdFusion to minify the page source to one line before serving. That is what CF has cached.
If you want to see the page source you’ll have to beautify it, or view source of https://gravitywebworks.com/?nominify
- CF is minifying CSS, JS, and HTML.
- I am not using Mirage or Polish. Instead I used ImageOptim on my desktop.
- HTTPS is in use for hopes of browsers using SDPY or HTTP/2.
The two videos are responsive - with multiple sources for each, with your device loading the proper resolution, quality, and frame rate. Since they are small videos, CF is caching them, too.
The video sources are lazy loaded. That definitely helps with the initial load and first paint of the page.
Videos were really tricky, especially on mobile / WebKit. Firefox, as usual, is a pleasure to work with.
Images are lazy loaded as well. Again, that helps with the initial load and first paint.
The loading animation is not an image. It’s a DIV with rounded corners, each has it’s own border-color to match the main colorful black hole video. This of course is VERY fast to load!
Since this is a one-pager, I am loading critical CSS, using a server side include. Then at the very bottom I load the full CSS and bootstrap. Some of the css is duplicated, but still very worth it!
- Time To First Byte: 19ms
- Downloaded: 4ms
- First Paint: 219ms
- OnLoad: 571ms
- Done: 676ms
- Mobile 100
- Desktop 100
(sometimes it’s 99, if I have Google Analytics enabled) sshhhh.
Think With Google:
- 2s Loading time: Excellent
- Is 2x faster than the top-performing sites in the same sector
OK - your turn!