Wollstra Tech | How We Engineered Our Website to Load Within a Second
Originally published at www.wollstratech.com on August 10, 2017.
Once not long ago at WollstraTech we had a nice looking WordPress website as most companies do. Problem was, it took more than 15 seconds to load in a browser. And according to recent studies, visitors tend to be driven away when sites load slower. Hence we needed a super fast website with cool looking pages.
Approach
The main problem was, our site was showing dis-aligned content while loading the site. Because of this, it took a long time to show meaningful content; which in turn delivered a bad user experience to a visitor of the website. WordPress was slowing down the website by adding many garbage content and codes along the way which site doesn’t really require.
Static Site Generators
Then we realized …
We don’t need WordPress. Most of our website content is static apart from a few parts(Blog, Careers, Contact). And further, we can even take measures to make those parts static too. Cool right?!
Our website was planned to be multiple pages (Which would require to re-use headers, footers and common scripts). We couldn’t go back to writing the site using plain HTML, since it would make the site really cumbersome to maintain.
We needed a solution to our problem. Which led us to Jekyll. A static site generator.
Static Site generator is a framework which provides templates and layouts in a reusable way and generate plain HTML pages based on the markup in compile time. It is easier than editing plain HTML, and gives us more control and is safer than WordPress. Its the best of both worlds really.
Jekyll comes with a powerful templating engine. A Jekyll generated project contains specific folders which are used for specific tasks. “_includes” folder stores reusable and repeating HTML content like headers, menus, etc. “_layout” contains the layout for the HTML pages. These layouts are extendable and can be parameterized.
We created the web site using Jekyll. We used many Jekyll plugins to automate many tasks like contact scripts and CSS, minifying, optimize images and file name hashes for cache invalidate.
Since our whole website is just plain html. We hosted the site in a S3 bucket. Now the website was loading better. But wasn’t good enough. The home page still took some time to load and would block users for a few seconds.
Static Site Generators vs WordPress
WordPress is heavy. It is a multipurpose CMS framework which initially built for websites, but evolved to build many other web applications other than websites. It adds many redundant scripts and content to a web page. Hence the web page is heavier and slower. Using plugins makes this much worse. On the other-hand static site generators sole purpose is to create static websites. It only add the content we require. Which makes the website light weight and easy to optimize.
WordPress runs dynamic programming code in the server. Hence WordPress is open for attacks by hackers. There are many exploits that can be found in WordPress (read more). Sure, you can add security patches to make it more secure, but someone has to closely maintain it by updating the websites with security updates frequently. Many website creators fail to do these patches which results in websites being attacked (read more). Static site generators do not run any code in the server, they run in the browser only. Because of this, attackers have nothing to attack with, which makes them far safer than WordPress and taking you away from a major internet embarrassment.
Further comparing hosting costs, WordPress is more expensive compared to hosting a static website. However, if you used a service like S3, it would only be a fraction of the cost.
Optimizing Home Page
Then we Realized…
We needed to focus on the home page more than other pages, based on the following assumptions:
- Most of the “New” visitors will be landing on our home page.
- Most of all other page visitors would have already visited our home and they would have cached most of our static resources in their browser already and that would substantially reduce the load time of these pages anyway.
So we started removing things we didn’t require on the home page it self. Further we made sure that all the JS loads at the end of the page. We also optimized the size of the images on the home page. Further we added async loading to JS scripts, which made the site load the content without having to wait until the JS downloads and executes.
We had a progress loading GIF on display until the website finished loading the home page. This was a bad user experience for a new user, it made them feel like loading takes a long time. We had to lose it but then the home page appeared dis-aligned in the initial view, till the site load completes. It was really ugly.
Initial View Box
Then we realized…
We could make it faster (for the eyes) by giving the browser the only things it requires to display the “initial view box” (the initial area a user would see when they navigate to a website).
According to our design, it was made up of a simple set of elements: site logo, menu, background video and a overlay text. We separated the styles and JS which was required to render the initial view box and proceeded to “preload” them. We re-wrote the JS codes in plain JS as we didn’t want to add any JS libraries to this critical path. We preloaded the logo and the video poster image as well.
And after all these optimizations, we managed to display the website in less than 3 seconds for a new visitor.
Yeah yeah… I tricked you in the title just to get your attention :) #sorrynotsorry
