JavaScript is Driving Your Visitors Crazy
The announcement that Google will give websites a ranking boost when they have “passing” core web vital metrics has the publishing world in a frenzy. Google’s search algorithm is more guarded than Colonel Sander’s recipe, so when they provide information on even a single ingredient, we all rush to stock up on it. Of course, deep down, we all know that it will not be a game-changer; just like celery salt isn’t going to make our fried-chicken great. Regardless, we must try…
Google’s dominance of the web is now well understood, and its influence is only growing. Facebook briefly surpassed Google as the top traffic referral source in 2015, however, Facebook’s shift away from publishers resulted in Google retaking the crown in 2017. Google currently provides around 2 out of 3 visitors to web publishers, so when Google says jump, publishers must ask, “how high?” and when Google recently said “Core Web Vitals,” we collectively responded with “how?”
The Core Web Vitals currently consist of 3 user experience metrics created by Google. Today, I will focus on Cumulative Layout Shift (CLS) and why it will be the final blow to an outdated method of accessing technology – third-party JavaScript.
JavaScript is code that is run inside a web browser like chrome. When a visitor goes to a page, their browser calls a server, the server returns the web page, including a script reference. The browser then loads the page and calls to the server yet again to load the script. Only then is the browser able to run the script and make changes to the page. This results in the page loading and then changing after the user sees it.
For the last two decades, web publishers have been adding content and functionality to their sites simply by “including a single line of code,” and it is still, to this day, an incredibly convenient way to access technology. However, that single line of code usually loads countless other resources and then changes the page AFTER the visitor is viewing the page. Facebook comments and online ads are a couple of the most common examples. Here is one of the problems this implementation creates…
Cumulative Layout Shift is a measurement of how much a page’s content moves while viewing it. We have all experienced this, and it is universally hated. Google measures CLS using two factors: what percentage of the content moves and how far it moves. The most common cause of CLS issues is content added to the page via third-party scripts. Here are a couple of examples:
(above) baseball-reference.com – one of my favorite websites – is using a JavaScript ad provider. The image on the left is the page when it first loads, and the right a few seconds later. The red areas highlight the content that moves when the ads load – in my case, 6 seconds afterward. Approximately 30% of the page’s content moves, resulting in a poor user experience and a terrible CLS score. I also highlighted another problem on the page with green circles. The circles are around some links that a user might try to click on, only to discover that ads pop in as they click, resulting in an accidental click on an ad and contributing to ad fraud. Most likely, baseball-reference is not aware that their JavaScript ad implementation is causing this problem, but their ad provider almost certainly is.
The resulting core web vital metrics are, of course, atrocious. A score of .76 means that 76% of the content moves the equivalent of 100% of the screen size. Also of note is a nearly 37 second time to interactive — this means that a user has to wait 37 seconds before the page responds to their input quickly (less than 50ms.)
Like ads, any additional functionality added via JavaScript can cause the same problem. Here is an example of Facebook comments pushing down a substantial amount of content.
The good news is that there are far more efficient ways to access technology these days than JavaScript, and the world’s most innovative companies are already using it – cloud or server level integrations. Want to use Cloudflare’s innovative security offerings — integrate via DNS or name servers. Want to open a Shopify store – integrate via CNAME. Want to run a WordPress blog with your own domain? You would never dream of integrating WordPress via Javascript; it is a server-side technology because it’s important. Anything that you expect to provide significant changes to a page should NOT be done via JavaScript after the page loads.
Understand me – I’m not saying JavaScript is dead – it is beneficial for providing rich functionality and interactions and for performing behind-the-scenes functions like analytics; however, the days of expecting revolutionary functionality and content from a single line of code are over. Not only does it require an extra round trip, but it also causes major CLS issues and has privacy concerns as those scripts load from a third-party domain that you do not control and the end-user is not aware of. JavaScript implementation had its day and was helpful, but it’s time for all of us to move on. The next time you are looking at implementing additional functionality to your site, look for server-side and cloud solutions instead of JavaScript from 2005.
A simple way to get started with improving your CLS is to analyze what you are currently doing on your site. Most plugins and widgets use JavaScript libraries, and if they are adding content to the page, causing layout shifts. If you are unsure what is causing a shift, I find it helpful to use a screen recording software such as screencastify to record the page load. I can then pan through the video and see what moves.
So, while Core Web Vitals most certainly are not going to be a significant ranking factor – it is almost entirely your content that matters – they will play a small role in the future. I, for one, am relieved. For years, Google peddled in useless metrics like Page Load Time (still shown in analytics) and arbitrary page speed scores that did not reflect real user experience. Pages with high Content Layout Shift create an objectively terrible user experience, and this change represents a giant leap forward in measuring user experience.
The fact that Google had to drive this sensible change should cause publishers to look in the mirror. For the past decade, online publishers have been chasing easy-fixes and short-term gains. It is not uncommon for a single blog to have 50 to 100 plugins installed. We, collectively, need to wean ourselves off of our just-one-more-line-of-code, just-one-more-ad-on-the-page mentality and get back to our trade’s real purpose, which is fast, effective communication of information. No one is coming to your site because of your parallax slider or your fading transition menu.
Larger than that, it is important to realize that publishers aren’t competing against each other but are instead competing for visitors’ attention. T.V. kept adding more bells-and-whistles and more ads for decades, and eventually, consumers had enough – we need to be mindful of falling into the same traps. Every day, I see publishers making decisions to earn “20% more” without considering user experience or the long-term effects on traffic. Just this week, I spoke with a publisher who experienced a 40% traffic decline over the past two years and didn’t even notice, but they were still happy because their ad provider told them they were earning a higher CPM. It drives me crazy, and I hope publishing wakes up – the world needs us more than ever.
