providence-screen
checkProject Type: Full Stack | Web Development
checkRole: Project Lead
checkTools: Node | Express | AMP | EC2
About

In 2017 one of our clients came to us looking to increase their site speed. Our strategy team at the time was interested in trying out Google’s AMP pages. We decide to test it out, so we started out manually creating a handful of AMP pages for some of their top-ranking category pages. Because of the CMS that they were on the CMS did not allow you to create blank HTML pages. In order to have valid AMP pages we could not have the CMS’s ASP form tags on the page. These extra html tags break the AMP syntax and keep it from being valid.

My task was to create AMP pages for 10 top level category pages and 10 sub level category pages and host them outside of their website. Link to them on the category pages so they can be indexed by Google.

I built a template for the top-level category page and sub level category page and copied pasted the page content into my template for about 5 pages. I then decided I didn’t want to copy paste all this content into my templates so I wrote a script that I could run in the console and it would output the correct html for everything between the header and footer. This increased creation speed by quite a bit but was still tedious. So, I decided to build a node, express server that could page scrape pages on request and return an AMP page. Once built I was able to turn it on and it will generate AMP pages all of their category pages dynamically and show live data for each page request.

Timeline
timeline
Challenge

Because the CMS that the site was hosted on could not create blank html pages the need for this tool was born. This product lives on a sub domain and based on the query string parameters passed in the URL will pull the correct template then make a request to the live page, turning that data into an AMP format. At the time scraping pages and turning them into a virtual DOM was not as easy, but we were able to use tools such as Cheerio and JSDOM to complete the project.

Conculsion

Wheelhouse was able to turn this tool into a product offering and we were able to implement it for multiple other clients such as Providence Health & Services and consulted with NASA on their AMP implementation. Client’s using the tool saw a decrease in page load time averaging 2-3 second to ~500 milliseconds.

badge-big badge-small