Paravel recently updated the look and feel of our portfolio site. Redoing your portfolio is always an exciting opportunity to express the newest and latest methods of how your organization likes to build things. We added color, trimmed copy, simplified content, and moved it all from a custom PHP Frankenstein to Jekyll.
Like any responsible web developer who had their 2012 website fat-shamed by another agency, I started a #webperf issue on Github and collected some metrics on the original site. I created a branch and set off on the journey to async all our fonts, javascript, and non-critical CSS. This is when things started to get weird and I entered the “gray” area of cognitive dissonace.
As I async’d the fonts and throttled my connection, the progressive rendering started kicking in. I was prepared for this, I recommend this for clients and do this on my own blog. But this time my opinion was different. This time everything just felt broken. As you clicked through every page, you could feel the “hurk-jerk” of the page assembling before your eyes.
I define “hurk-jerk” as a special kind of “jank” that appears as the page loads.
For 3G connections, this is an optimal experience. You get a readable, usable page in first packet from the server. But anything faster with a larger screen, it’s a noticable shift.
The workaround for this is to set a COOKIE1 and use some server-side determination on whether or not this is the users’ first page load or not. Then serve one page architecture to newcomers and a normal webpage to repeat pageviewers. I summed this up in a tweet.
function criticalPath() {
if(website.firstLoad) {
codeWebsiteWithHurkJerkRendering();
} else {
codeRegularWebsite();
}
}
— Dave Rupert (@davatron5000) August 18, 2015Not only have I made my static site non-static, I’m now in the business of managing state (“firstload” and “after”) for a small portfolio. In addition to state management, each page is different enough –and by “different enough” I mean the 2nd component after the header is different on each page– that each template would need to be run through a Critical CSS generator. This is somewhat unscalable even on a small 14 page site.
A note on browsers
On my critical rendering version of the site, Edge and Firefox never let me feel the hurk-jerk on successive page navigation. Chrome was surprisingly the biggest underperformer. Even with cached assets, Chrome was painfully slow to watch assemble on every click…and everyone I know uses Chrome.
The Third Heat
Even though I know Maeda’s Third Law of Simplicity, I’m left feeling like the hurk-jerk of progressive rendering is maybe not the best experience. For our portfolio, where we sell websites, it’s important that a (not-so) Mythical CEO visiting our site never feels like our pages are broken, it could cost us. I suppose the rebuttal to this thinking is maybe the Mythical CEO cares about Progressive Rendering, or Typekit times out, or they visit our site on 3G, we’ve also lost the bid.
My closely held beliefs were shaken. And when that happens, suddenly all options become available:
- Be TEH FAST and use Progressive Rendering and provide a great experience on mobile, kinda bad on desktop.
- Be NORMAL and do nothing special and provide a nice experience.
- Be SLOWER and provide an extremely rich experience with a JSMVC framework to animate state between all the pages.
We opted for NORMAL this time around. Truth be told, although it’s very “un-Paravel”, the SLOWER JSMVC route was the most tempting. I know JS frameworks are terrible on mobile, but creating a smooth User Experience between pages seemed more apropos for the situation than optimizing for the first page load.
In closing
We could spend lots of time making Google and 1% of web developers happy. I am sort of wondering if we’re chasing metrics as opposed to paying attention to simplicity. Admittedly, our stats aren’t great but compared to the hurk-jerk rendering I feel good about building a NORMAL, mildly-performant, well-coded website without any tricks to speed things up.
This may be the longest most self-justified hand-wringing I’ve ever done, but I’d love to have a well-formed discussion about all the hoops and shit we’ve invented just to build simple sites.
-
If you do set a COOKIE and someone from Europe visits your site, be sure to add one of those Cookie Notification banners. ↩