How do I step through page code and see what a page renders for each line/element?
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!
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!
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Even if there was it would not help you as the blocking is most likely due to the loading / running of an external resource which is being downloaded asynchronously. By stopping processing to step through the code is just going to alter the results you get.
A better option is to use the browser developer tools Network Tab (F12). Load the page with this view open and look at what resource is taking its time to load.
A better option is to use the browser developer tools Network Tab (F12). Load the page with this view open and look at what resource is taking its time to load.
when you run googlepagespeed and it mentions render blocking code, there is sometoimes a link given, see differences or something, click on the link and you should see the image on the right-hand side of the page change to show the differences, this can help identify what is affected and you can change the way the css is implemented to correct the issue
it looks like you're using Wordpress, so you'll need an IDE which handles PHP. PHPStorm is a very good editor which uses PHP's xdebug module to do just that.
If you can't get live debug running, you could also use some code tracing to get the same information. For example, if you find where Wordpress is creating/rendering the header, you can insert a line of code which prints the rendered content to your error log. Then you render the page and check the log to see what happened. It is a little more clumsy and time consuming, but can yield the information you want if you have enough tinkering patience.
Aside from that, I looked at your site on desktop, and in "mobile mode" using dev tools, and did not see anything obvious. What exactly are you referring to when you say "blocking"?
If you can't get live debug running, you could also use some code tracing to get the same information. For example, if you find where Wordpress is creating/rendering the header, you can insert a line of code which prints the rendered content to your error log. Then you render the page and check the log to see what happened. It is a little more clumsy and time consuming, but can yield the information you want if you have enough tinkering patience.
Aside from that, I looked at your site on desktop, and in "mobile mode" using dev tools, and did not see anything obvious. What exactly are you referring to when you say "blocking"?
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!
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!
Premium Content
You need an Expert Office subscription to comment.Start Free Trial