DEV Community

Cover image for How we went from 3.2 seconds to 1.5 seconds First Page load.
Zans
Zans

Posted on

How we went from 3.2 seconds to 1.5 seconds First Page load.

All we know, we can have a beautiful website which can give the necessary information to the customer or boost sales if your Bussiness to Customer.

We know also it always some big BUT when we come to SEO and how a customer can find us without spending $$$ for Marketing purpose. 

First time when I have run a report about or SEO  and site performance I been very surprised about how bad we were in this case. If count from turtle to rabbit, we would be a stone, which never moved and all our "organic grows" been poorly based on $$$ spending to Marketing, 

I know we can do a better job there and someone needs to take responsibility for site performance, compliance and accessibility for customer satisfaction. 

Have spent numerous hours of research, reading articles, courses, googling and thousands more to take best insides from competitors around the world even from Japan and words tech hub China.

I have come across think which we do it just minifying and do hash for caching JS and CSS, which basically worked for some instance but could give a better result for the business. 

Also, we have brilliant content makers and brilliant marketing team who throw millions of ideas on how we boost this.

Ideas are good but without actual code, optimization it's just ideas on the dusty shelf.

jQuery as Galactic Empire from Starwars

Alt Text

We started with simple rewriting our legacy code from jQuery to normal beautiful and loved vanilla JavaScript, with the keen interest of how the compiler works with different methods and how fast he can compile with help of modern browsers also with an eye on IE11 (  I still believe in world without IE and fully supported modern features on Edge, thanks to the person who pushed idea to use Chrominuem on Edge, so less worry now.)

We still have some jQuery legacy left which we aim to fully deprecate by the end of this year. 

Lazy Loading WIN-WIN for shrinking kilobytes

I have designed and coded simple Lazy Loading for images, without any Observables and mutations as it's not fully supported on IE. Basically the idea was "We don't need to show any image before customer actual scrolls on this, we want to limit any kilobytes in actual load so let's use just greyish area with some fancy animation like FANG group did( Facebook, Apple, Netflix and Google). It does not take a long time to code and test, but the outcome is huge from 3.4mb on the first load we came to 2mb( it will shrink even more when billboards will be rewritten).

By the way, if you use photoshop and image will go to web save image as FOR WEB  with playing around with quality 

Unused CSS

Alt Text

Second, a thing which I have touched its unused CSS, simply done a huge analysis across 286+ pages to see what SCSS modules we are using and do we need to depreciate or rewrite some.  LIke Fancybox dependencies, for IE where Flexbox is not supported( Thanks to the team who has rewritten the last dependency on this and I was safe to remove this without collapsing web app).

Does everyone love Fontawesome???

Last but not least is Fonts, not only Fontawesome but actually any like Roboto...
Have ever opened and tracked Network tab in Dev tools to see which file is heavy lifting for the device.

I have been surprised after running several reports (Pingdom is a super tool )After all optimization we have ended up with fonts 48% of all kilobytes of our page load. 

Thanks to FontAwesome team, they developed feature calling KIT so no more CDN to use. 
"KIT", simply tracks which font you are using and loads only them so no 500 kilobytes for font awesome( Bold, Solid and Light), savings are massive at least 60%.

My aim is to increase speed and go below 1.1 seconds on  Desktop and Mobile, to show who is the fast and best website in the UK Automotive Industry.

Top comments (0)