How a few code changes added more value to us
Vaibhav Rathore
December 18, 2017

From here:

 

 

To here:

 

And we were able to do that with a few code changes that literally involved rearranging a few lines. Don’t believe it? Read further.

 

When I found out that the home page of our site was 1.8MB, I was shocked. Literally. Even with zero images (which generally occupy more than 50% of the total page size), our page was so big. How was it possible? After digging a bit, I found out that fonts were taking 1.6MB! Yes, no one would believe that! Who uses web fonts that take around 90% of the page size? I thought that some fonts which weren’t even required were being loaded. That was the best guess I did then.

So I moved forward with my guess until I found out that I was wrong. CSS is also optimized in the core, so it only loads the fonts which are being used at least in one place. Digging up more, from the Chrome inspector, I found that each font was occupying almost 200KB (there were about 4-5 like this) and one special font with 450KB. Found the culprits!

 

Reading about the bad guys

Researching more, I found that we were mostly using OTF and TTF font types. WOFF types are generally smaller and use ZLIB compression. Moving to the code, I found the following snippet:

@font-face {
    font-family: 'Roboto-Regular';
    src: url('fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Regular.ttf') format('truetype'),
         url('fonts/Roboto-Regular.otf') format('opentype'),
         url('fonts/Roboto-Regular.woff') format('woff');
}

 

See, the browser reads the code from the first URL. Whatever format the browser finds supportable, it’ll pick that up and won’t process any further. And none of the browsers were going beyond OpenType. So, I did some line rearrangements and the new code was:

@font-face {
    font-family: 'Roboto-Regular';
    src: url('fonts/Roboto-Regular.woff') format('woff'),
         url('fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Regular.ttf') format('truetype'),
         url('fonts/Roboto-Regular.otf') format('opentype');
}

 

What did I do? Just made sure whichever browsers support WOFF, they pick that up and don’t move further. The browser not supporting the first three will pick up the fourth. And chances are rare that people use those crappy browsers.

Similar changes in a few more font definitions and the page size reduced to 400KB. The page loads instantaneously now adding direct value as visitors over a slower network are now more likely to stay and read about us.

What’s next?

Yes, it’s not done yet. 400Kb is still too large for a page with no images. See that Requests box there? 38 requests? What the @#%$! Definitely, need to reduce that. It’ll also help reduce the load time (3.37s is far from ideal).

 

Tools I used that you may find useful: