Rarely is there a one-size-fits-all answer for what makes a website slow. Add an intense database that stores and renders about 1.7 million data points and the outcome could be overwhelmingly sluggish (as in the case of our client).
Our client – a national-level political advocacy group – was in the process of developing an interactive website and database. We were contracted to design and build the front end website while another firm was tasked with creating the backend database and information systems.
As we began the development process, however, our team realized that the database infrastructure that was given us was very poorly implemented and that it would be inadequate to handle more than a handful of users. One month prior to the client launching an advertising campaign showcasing the website to thousands of viewers, we rolled up our sleeves and got busy in order to figure out how to make the website capable of handling the anticipated load.
We ran an independent page performance test on the site before making any changes, which showed us that their website was slower than 96% of websites on the internet!
Houston…we have a problem: with a massive page size of 25.4 MB and an AVERAGE LOAD TIME OF 36.4 SECONDS (…zzzzz…) we don’t even need to spell out how this was problematic.
Would you wait patiently over 30 seconds for a page to load? We’re not living in the 1997 dial-up internet era anymore.
The first thing we did was develop a new custom web application for the previous database, so essentially we were able to control all aspects of how the database worked. This allowed us:
- MySQL and SQL Query Tuning: The previous database processed a lot of crazy ways for getting to the information, often times looping through all the records in the database to get one piece of data. We rewrote almost all of the queries to pull directly from the database without having to use post-processing in PHP (WordPress). Additionally, we went through and added indexes and foreign key constraints, which allowed queries to execute more efficiently (specifically when we were asking for a specific set of information).
- Infinite Scrolling: We set it up where we only downloaded a small piece of the long lists of information to be displayed at any given time. Additionally, we pre-loaded the next set of information, so it was instantly available the second the user needed it.
- Custom API: To enable the infinite scrolling and other features, we wrote an API that accepted parameters to filter data and returned it in a format ready to display. That means the heavy lifting was done on the backend without the user having to wait.
- Front-End Formatting: The database was unformatted before we started working on it. Usually, front-end formatting adds load time (making the site slower). We were able to add a substantial amount of front-end formatting because we were working off a cleaner API. This resulted in a more intuitive experience while reducing page load time. Boom.
- Caching/Cloudflare: Eventually, every single request made to the custom API would be cached by the Cloudflare server, along with the images. This meant that the user was never waiting on the backend. The second they requested information, Cloudflare already had the information at hand since all the content was already stored in local CDNs.
- We are CSS ninjas. Seriously…
Best part is…drumroll…WE REDUCED THE DATABASE LOAD TIME TO 1.2 SECONDS making it FASTER THAN 85% OF ALL WEBSITES!
Screenshot of performance after our implementations below:
*Speed tests were run at the same time on two different installs of the site
Slow websites result in dramatically lower conversion rates and an “I want to throw my computer out of my window” user experience.
Let Vici Media Group restore your website users’ sanity and increase conversion rates by optimizing your site for user experience and for speed!