At the end of Part 2, I realized that JavaScript may be unnecessary to create the perfect landing page. Frameworks based on React and Vue seem to bundle large Javascript files and as a result, the landing pages carry an unnecessary complexity.
Perhaps these frameworks are better employed for designing Single Page Applications (SPA) with reactivity.
But I asked myself this question: Could I design a landing page with great design and performance with HTML/CSS and only very little JavaScript (analytics and maybe a little event handling).
I came across an article titled Create a blazing fast static website without Gatsby or Javascript by Bennett Hardwick.
In this article, he points out how “Javascript costs seconds†and how he used a Rust based static-site generator called Zola.
So I looked it up and found their themes pages. I took a look at one that closely resembled typical product or service landing pages call Juice.
Pagespeed Score: 99 on the desktop. 99 on mobile. Total requests 14. 178 KB. Wow!
I immediately installed the Zola binary.
These are the things I noticed: No package.json One scss file contained most of the styling normalize.css utility.css just three classes live reload still there A few SVGs HTML templating similar to what I find when using PHP (i.e. similar to Twig)
I mean, talk about a simple framework (If you can call it that). I absorbed the Life-Cycle very intuitively mostly by looking at the code. Their documentation is succinct.
There was just one thing to do for me. Try to recreate the Gatsby Startup Landing Page starter using Zola and test it.
I recreated most of the style of the Gatsby Startup Landing Page and included the Banner and Features sections. I wrote some simple CSS and JS without worrying about IE or much cross-browser support. I don’t think this matters since most landing pages would be targeting mobile devices anyway.
Since I was losing the SPA feature of Client-Side rendering, I made sure I prerendered my main menu pages.
The results. Drumroll… 99 on the desktop, 98 on mobile. 1. 0KB Js files. 10KB CSS. Check out the Pagespeed report.
Summary
Did I find the perfect landing page? No. I’ll explain.
What I managed to find is a way to generate landing pages that get very near to a perfect score on Pagespeed Insights.
That may not be enough for everyone. I deal mostly with small businesses, and for my clientele, getting a perfect score on Pagespeed Insights may be more than enough.
Here are three imperfections I thought about:
- Older browsers: Polyfills still need javascript (i.e. No image lazy-loading in older browsers)
- Developer Focused CMS: May not scale well with marketing teams
- Messy Code: A Templating engine is good, but Styled Components is way better at keeping code organized.
Because getting a perfect score on Pagespeed insights seems to be mostly about significantly reducing the amount of Javascript tasks that run at loadtime, I am interested in finding or developing a WordPress template to accomplish this, and also finding ways of significantly reducing the amount of Javascript bundled by Nuxt, Gatsby and other JAMStacks.
