Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo
- - - - -

Chrome Dev Tools Help Trim Rendering Fat


  • This topic is locked This topic is locked
1 reply to this topic

#1 iamlost

iamlost

    The Wind Master

  • Site Administrators
  • 5,517 posts

Posted 05 November 2017 - 04:53 PM

I have to admit that I haven't paid much attention to Chrome's Developer Tools and don't spend as much time as I used to (time management choices...) dissecting websites, however I did take a little spin about today because of Ian Lurie's Code Coverage Analysis for Better Page Speed 30-October-2017 article on the Portent blog. Not because I'm all that interested in the tool(s) but because he raises the spectre of dead code (on the day before All Hallow's, no less) bogging time between connection and render.

The more that people use frameworks, i.e. WordPress, Bootstrap, Angular, React, apis.google, the more they are likely to NOT be using everything being sent to a visitor but still consuming their bandwidth and taking time, valuable time.

Chrome's DevTool's Coverage tool is actually quite useful. I recommend giving it a spin, after reading Ian's article.

“Dead” code—code that doesn’t do anything—drags downloads and rendering. Your browser still has to download, parse, and render it.

By deleting unused code, I reduced file size by 30%. I also dumped about 9,000 lines of code. That’s less for my browser to parse and render.

I also reduced index.html from 191k to 9k.


He then proceeds to do what should be a standard best practice:

Then, I took all forms-related CSS and put it into a separate file. I can load that when I load a form, instead of loading it on every page.

I pulled all the blog-related CSS and put that in a separate stylesheet.

And, I put any unused javascript in separate .js files for inclusion on other pages, as well.
Why did this help?

No sense loading CSS you don’t even use. Same with javascript. That speeds things up a little bit more.

How far you go cleaning out and separating code depends on requirements and obsessiveness; years ago I went from separating to template only to then separating by page to now separating also by device capacity (part of serving on context) with the end goal of never sending the visitor any code not necessary for best experience on their device. That last bit of finesse is still somewhat a work in progress as I do err on the side of more rather than less when in doubt. But every byte saved is n-millisecond shaved. :)

 



#2 cre8pc

cre8pc

    Dream Catcher Forums Founder

  • Admin - Top Level
  • 14,819 posts

Posted 05 November 2017 - 05:31 PM

My husband, a software performance engineer, got me using it awhile back. It's great for scouring source code when there is a mystery to solve.





RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users