Website showcase


#1

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.

Here goes…


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 :sleeping:. 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.
  • Rocket Loader is handling the javascripts.
  • 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!

SPEED RESULTS

  • Time To First Byte: 19ms
  • Downloaded: 4ms
  • First Paint: 219ms
  • OnLoad: 571ms
  • Done: 676ms

PageSpeed Insights:

  • 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! :slight_smile:


#2

We are also adopting Cloudflare for our website for the last couple of years. I would like to recommend it to new webmasters. Just because of it, We have improved website loading time & User Experience.
Kids Regards,
Robert Rex


#3

A post was split to a new topic: Do I need to renew?