Drift Facade

Drift Facade for a Faster Website

Having issues with downloading a lot of Javascript on your site when making use of the Drift chat? Leverage a Facade that downloads all the drift content only when you need it - making your pages load much faster.

As Google steadily implements their core website vitals standards, it will establish a benchmark for how streamlined web applications are. The goal for this project and any others similar in scope is to ensure we continue to meet these benchmarks and maintain a consistent service for our customers. 

The Drift Facade is meant to lighten the Largest Contentful Paint (LCP) report of the websites we implement the Drift bot with.  This metric measures the time it takes for the website to render for the end user relative to the moment the webpage begins to load.  One of the bigger drags on load time right now is the implementation of the Drift chat bot and the chunk of JS that comes with it.

The solution we have opted to implement is a facade in the place of the Drift toggle button in the lower right corner. The button that will now load will actually be an element constructed using the website’s CSS elements in the place of where the Drift toggle button will eventually go. 

When it’s clicked, it will briefly show a small loading circle as it downloads the needed JS for the bot.  After it’s fully downloaded and functional, the facade will be removed from underneath the installed button.  What this is meant to achieve is to put off the downloading of unnecessary JS for the website’s function to after the website has rendered when it’s at the user’s volition.

For mobile devices and screens too small to support the Drift bot, the button has been removed through some light CSS.  The CSS takes into consideration the screen monitor width to determine this function and may need some adjusting from what I determined as a base size.  Additional information on average user screen sizes from both tablets, mobile phones, and computers can be found here: https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide

To reiterate, this modification to the Drift bot is an attempt at reducing the drag on our website from installing extra JS elements.  After disabling it on the WebPress backend, we replace where the button previously was using extra CSS elements, including the shift in color upon hovering with the cursor. 

Utilizing the block of code used for automatically downloading the bot upon accessing the website, this was changed to an onClick event.  Furthermore, the code was simplified by removing the function determining the client’s platform in favor of additional CSS elements removing the button if the screen is too small. 

Finally, an asynchronous function was added to remove the CSS button shortly after the bot was installed.  Ideally, the changes made will reduce load times for the user end where the Drift bot is applied.

  1. AllCode Test Site unmodified
Before implementation of the Drift facade
Drift Image Facade 2
Lighthouse score for drift facade

2. AllCode Test Site Modified

Drift
Lighthouse score for drift facade
Lighthouse score for drift facade

Related Articles

Dolan Cleary
Dolan Cleary

I am a recent graduate from the University of Wisconsin - Stout and am currently interning with AllCode as a web technician.

Download our 10-Step Cloud Migration ChecklistYou'll get direct access to our full-length guide on Google Docs. From here, you will be able to make a copy, download the content, and share it with your team.