The Challenge
Optimizing for Speed
As part of a rebrand effort, the Sphere Partners marketing team decided to revamp the existing website to introduce the new brand, modernize the look and feel, optimize content for lead generation and improve performance. The biggest challenge for performance optimization was that the codebase was built on a massive WordPress template, and we needed to find a way to significantly increase loading speed and overall performance, while maintaining core template features and improving SEO (a main factor for SEO ranking is site speed).
How It Was Solved
The main rule for making something “stress-resistant” and secure, is to make sure that nothing can break in each of the parts. In our case, we chose a well-known Avada theme to build the site. Avada has a good builder for creating layouts, but is not as highly optimized for speed and performance as we needed for SEO. In order to optimize for performance we followed the following steps:
- Remove all unnecessary plugins
Plugins are a great way to help companies quickly upgrade their websites with useful features, and wordpress offers a myriad of plugins for all kinds of functionality. Many are free, and often offer a premium version with extra features. A big downside to the open source plugin model is that free, ‘freemium’ and sometimes premium plugin code is open publicly, increasing the danger of being hacked.
In our case we inherited a whopping 50 plugins from our old install. After a thorough review we found that 70% of them were not necessary at all and could be removed. The others were basically providing additional shortcodes for the Avada builder, and we replaced those with custom shortcodes made using the official Avada “theme fusion” API. In the end, we left only core template plugins and a handful others that were good to support SEO and content optimization.
- Load only necessary styles and scripts.
Eliminating plugins was a good start to boost performance a bit, but not all the way. The next step was to optimize the template architecture upon seeing 40 unnecessary script loads on each page. WordPress uses a lot of WP hooks, so naturally we used them to achieve our desired result. In this case, we wanted to have access to two global variables which represent scripts and styles that are in queue for loading. They’re called: $wp_scripts, $wp_styles. Accessing them is possible by creating a custom function which fires during the hook called “wp_print_scripts“. By analyzing data from those variables, you can easily get ID’s of files you want to deque. Using functions wp_dequeue_script( ID ) and wp_dequeue_style( ID ), we ‘dequeued’ from loading all the scripts we didn’t need. Since we were using shortcodes we made ourselves, all unnecessary files were removed completely.
- Create a “first screen” style bundle to load in header for better visual experience, and load the rest of scripts and styles in footer for better performance.
Avada offers several options for loading scripts in the footer and it increases the page speed to the good level, but there are too many unused lines of code. Instead, we took our minified css theme styles and shortened them from 25 thousand lines of code to only 8k lines…A huge improvement!. In addition, we created a special script on the back-end that looks into folders with shortcodes, finds all the css and js files, compresses them to be ‘minified’, and inserts them into the footer.
The Results
The main result was the increase in page speed (according to Google Pagespeed insights) from 6 to 72, resulting in a dramatic 1100% performance improvement for the website, while keeping the functionality of the WordPress builder tool and therefore allowing us to create well optimised pages almost on the go. A second important factor is that we greatly improved our security stance since we removed and/or optimized the third party code remaining on the site.
