How I built this website?

The rise of No-Code

How I built this website?

Pre-requisite

I implement my Project Management Knowledge about critical-path scheduling to how browsers works when calling a website. Using a priority and coverage of the chrome inspector we can see how each and every items is being downloaded and what are the critical CSS applied to the component to prevent render blocking resources. I realized that I need to pre-load some of the resources, pre-connect or dns-pre-fetch some of them.

Prior to implement any of these written here, you should try to compress images, reduce class naming and use CSS more as a functions.

Problem:

  • when there is an update to the website class, webflow will update also the CSS file and its name, Similar also for the JS file.
  • I still want to use google tag manager and also google analytic
  • I still want to use some of lottie animations
  • I still want to use locomotive scroll
  • I still want to use type js - as I always want to be able to do that.

As CSS is one of the render-blocking resources, I use the code below to preload the CSS and make sure to update the file number when I do update something that will make Webflow updating the CSS file.

<link rel="preload" href="https://assets.website-files.com/5ff4e5ad9286ac5797d66c13/css/hartexinity.XXXX.min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://assets.website-files.com/5ff4e5ad9286ac5797d66c13/css/hartexinity.XXX.min.css"></noscript>
<script>
   /*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
   !function(a){"use strict";var b=function(b,c,d){function j(a){if(e.body)return a();setTimeout(function(){j(a)})}function l({f.addEventListener&&f.removeEventListener("load",l),f.media=d||"all"}var g,e=a.document,f=e.createElement("link");if(c)g=c;else{var h=(e.body||e.getElementsByTagName("head")[0]).childNodes;g=h[h.length-1]}var i=e.styleSheets;f.rel="stylesheet",f.href=b,f.media="only x",j(function({g.parentNode.insertBefore(f,c?g:g.nextSibling)});var k=function(a){for(var b=f.href,c=i.length;c--;)if(i[c].href===b)return a();setTimeout(function(){k(a)})};return f.addEventListener&&f.addEventListener("load",l),f.onloadcssdefined=k,k(l),f};"undefined"!=typeof exports?exports.loadCSS=b:a.loadCSS=b}("undefined"!=typeof global?global:this);
/*! loadCSS rel=preload polyfill. [c]2017 Filament Group, Inc. MIT License */
 !function(a){if(a.loadCSS){var b=loadCSS.relpreload={};if(b.support=function(){try{return a.document.createElement("link").relList.supports("preload")}catch(a){return!1}},b.poly=function(){for(var b=a.document.getElementsByTagName("link"),c=0;c<b.length;c++){var d=b[c];"preload"===d.rel&&"style"===d.getAttribute("as")&&(a.loadCSS(d.href,d,d.getAttribute("media")),d.rel=null)}},!b.support()){b.poly();var c=a.setInterval(b.poly,300);a.addEventListener&&a.addEventListener("load",function(){b.poly(),a.clearInterval(c)}),a.attachEvent&&a.attachEvent("onload",function(){a.clearInterval(c)})}}}(this);
 </script>
<link rel="preconnect dns-prefetch" href="//www.googletagmanager.com/"crossorigin>
<link rel="preconnect dns-prefetch" href="//www.google-analytics.com" crossorigin>
<link rel="preload" as="script" href="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXX">
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXX');</script>
<!-- End Google Tag Manager -->
<link rel="preload" as="fetch" crossorigin="anonymous" type="application/json" href="//assets.website-files.com/5ff4e5ad9286ac5797d66c13/60331985ea6027a286f56998_Nav-Menu_exinity.json">
<link rel="preload" as="fetch" crossorigin="anonymous" type="application/json" href="//assets.website-files.com/5ff4e5ad9286ac5797d66c13/60331ac76cfc0c2504f45a68_Loading-Pack-exinity.json">

Coverage Tool

Coverage Tool

Using the Coverage too and surely with trial and error, slowly I was able to reduce the total blocking time from over 1 thousands to 0 for desktop and about 240ms for mobile. Also by making some of the CSS rules being utilized above the fold available in-lined as imbedded style. Specially for the header part where I've decided to make all as in-line and use the embed symbols.

To keep images below the fold as lazy loaded, I use the webflow native lazyloading and also lazysize.min.js.

It is then required to preload other resources such as google analytic where I set up to fire only when footer is in-view, this will prevent the need to early loading google analytic.

Reduce total blocking time

Reduce total blocking time

The above steps will reducing total blocking time, and as this website is new, I will see when it grow larger with more pages. There is always a limit to any tools we are using, we just have to play within the boundary of acceptable limits.

Try by your self it is free

Did I tell you that it is free to learn webflow? Yes, it is and the amount of guidance and resources are just as easy to follow. There are rooms to learn and improve, and it is up to ourselves to use it for our purposes. It is a no-code (kind-of) development platform, you can use it without code, but you can also use it to learn how to code. I have published a detail blog on medium post, this including more detail steps - I hope this give contribution to Webflow Indonesia.

Silahkan click gambarnya atau hover menggunakan mouse.

No items found.
Webflow
Rocket Hart Exinity