Pagespeed Optimization as a Case-study
Amongst the world wide web there are thousands of articles with tips and tricks on pagespeed optimization along with case studies as well. This case study based text is nothing new but a guide on how a slow site heavily dependent on third-party scripts was optimized for a better load-time.
The screenshots tells the story of a performance page (request demo) where mostly the conversions used to happen. The site had a responsive layout and there were multiple things being hidden based on css classes.
The site already had WP-Rocket (https://wp-rocket.me/) with deferred javascript which is a really cool functionality brought by their team and it already had resulted with >25+ numbers with pagespeed on the current website. If your site doesn’t have Rocket, go ahead and trust me it would be one of your most valuable investments.
Problems
So with every project before you come up with a game plan you need to know what you are dealing with. In our case with a load of third-party scripts. Forms (Marketo), Form Validation, jQuery, 8+ tracking scripts and a layout builder that relied on javascript (like most page builders do).
Plus we had to tackle mobile optimization considering Google is/or has already started indexing sites based on mobile.
Gameplan
My game plan was simple, I targeted the most client-heavy items and approached them accordingly.
jQuery to Javascript
This is the most common approach if you are doing a heavy-duty site optimization. A small guide is available at http://youmightnotneedjquery.com/. I re-coded around 200+ lines of jQuery into 500 off lines of javascript and broke them down into different files. Using the WP Enqueue function i loaded these files as needed. The performance impact was big-time, around 30+ numbers on mobile.
I wrote a custom javascript function to validate the form as well, removing the dependency on jQuery form validation.
The following were the replacement of jQuery scripts to native JavaScript ones.
Slick Slider => Tiny Slider
Bootstrap Tabs/Accordion = Vanilla Tabs [i had to customize this to reach certain functionalities]
hoverIntent (jQuery) = hoverIntent
Wistia embed code customized = Gist
Plugin Optimization
Even though the site had WP-Rocket installed it could need some more tweaks to make it perform better. I manually added some more critical-css and removed some unnecessary lines of code. Fonts + some images were preloaded as well. Added all the needed scripts to Javascript delayed list as well.
All the 3rd-party scripts that were previously load sensitive have been delayed and the results were really really well.
Added an image optimization plugin that had support for webP formats. I really wish Safari had support for webP but had to write some workarounds to make it work.
Mobile-seperate pages
So there is no such feature within WP where you can load separate content for mobile devices. Thankfully with ACF and a little bit of custom code tinkering (https://gist.github.com/alihs/89ee1c7afce04e57c0d2698deb746e5a) you can have a mobile separate view for your pages.
This helped us create small and to-the-point marketing effective mobile pages for the website. The conversions went up like crazy with this approach.
And the result is as below.
I am very proud of the overall work that was done in the project. We helped the company achieve better results specially on mobile. Increase in organic traffic as well.
Who am I?
I am an enthusiastic and professional UI/Frontend developer that has an eye for User Experience that has enjoyed leading and being part of successful productive teams. I am quick to grasp new concepts and ideas and develop innovative and creative solutions to problems.
You can find me at https://alihussain.me/
