We help IT Professionals succeed at work.

How do I step through page code and see what a page renders for each line/element?

John H
John H asked
on
176 Views
Last Modified: 2017-03-13
Afternoon all,

Google Pagespeed Insights is showing an element on my website (www.recoveryaudio.org) that is blocking the above-the fold rendering.  You can see the rendering issue when viewing via mobile device.

Is there a utility out there that will allow me to step through/execute the code line by line so i can see how the page renders as i step through the code?

I'm no developer - but a decent tinkerer and can setup a mamp server if it is the best debugging environment.

Thank you!
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
James RodgersWeb Applications Developer
CERTIFIED EXPERT
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
CERTIFIED EXPERT
Top Expert 2004
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
John HGeneral Tinkerer

Author

Commented:
I was tinkering with the Autoptomize Plugin and was finding (i believe) that some .js settings rendered a big blue space above the fold on mobile screens - pagespeed test caught that.  I just had to keep playing with the Autoptimize settings and files to exclude 1 js file from optimization, then it  loaded the child theme cleanly (understand - i know very little about web development and don't even know how to add a hook other than copy/paste from what i find on the web).

I checked out phpstorm and think i want to dork around with it, sounds like good tinkering education.  Site gets 2000/day, but there's still room to make google more happy and max out the keyword rankings

Thank you all who responded!