Fixing render blocking

Hi all,

I have been trying to fix some issues with my wordpress website (https://highperformancejunkies.com)

I believe it is a render blocking issue (my drop down menu doesn't work after trying to fix up my critical css)

Long story short, my website was functioning slow and had aweful scores on pingdom, gtmetrics, google pagespeed etc. I am a huge beginner with next to no coding skills, but I found a sweet write up that was a step by step guide on how to remove and defer CSS here: https://www.myhostingfacts.com/defer-css-javascript-wordpress/

I followed the guide and I purchased the WP Rocket plugin and my site is already 10 fold faster with 80+ scoring.

My problem is, I am at the point in the guide that addresses "defer css & javascript manually with code in function php" about 3/4 of the way down the page - and I am now lost. I don't know what they mean, or what I am supposed to do, and I believe it is giving me the answer on how to fix my problem.

I was hoping that someone could help walk me through these last steps and really dumb it down for me. I have had awesome results up to this point, but obviously not having a working menu doesn't help me any...

Many thanks in advance!

 

update: it appears if I uncheck the box for "minifiy javascript files" my menu works on both my mobile and desktop site.

So how can I enable minification of javascript files without breaking my mobile menu?

I would like to run the site as optimally as possible

 

If your javascript files are so large that you need a bandaid (minification) to speed them up, they are too large. On reasonably sized javascript files minification will not noticeably make any difference.

Usually, the MOST slowdown created by JS and CSS files is caused by EXCESSIVE handshaking which is in turn caused by too many files. There is SELDOM any reason to need more than one or two JS or CSS files each per page. If you have more than that, you WILL notice sluggish performance for no other reason than the handshaking going on. Spending time getting rid of JS & CSS files that you do not need will do more to speed things up than any minification that you do.

 

Unfortunately I am not sure where I would begin finding and eliminating excessive JS and CSS. Or what to search to even get started on it as well.

Do you have something that would point me in the right direction to get started or a write-up that I can follow?

 

Unfortunately, you apparently are using Turdpress which I know nothing about. I tried going to your site. Your page came up, then disappeared leaving a blank white page with the word 'undefined' in the upper left corner. I could not even view the source so I have no idea how many JS & CSS files that you have.

Something has changed on your page as yesterday I had no problem viewing your landing page.

What I would do is remove all Turdpress plug-ins that you are not using. That would definitely help as every plug-in compounds the problem.

 

Your website https://highperformancejunkies.com/ is working find now I think. Its also loading faster since I checked it the last time.

 

Unfortunately for me I don’t have a coding background and wordpress made creating a website easy even though it may not be the best choice.

What browser did you have the issue in? I was doing some tinkering last night but this makes me think there is still a bug that needs to be worked out and part of why my bounce rate is so high.

I know you were against the minifying, but when I did minify JS my website was super fast and had above average scores on every website speed metric tester. If I could figure out the last few steps in the link I posted here I think that would give me a solution that would work - even though I realize it may not be the best...

 

I used FF, both the first time when I was able to read everything and the second time when I got nothing. Based on that, I don't see how FF could be the issue, working one time then not working the next time.

Just the fact that everything is noticeably faster now when minified proves that you have some serious issues with JS files. Now whether you can do anything about those issues is something else again.

I have never used Turdpress. I cut my teeth on other older CMS's before Turdpress was ever slopped together. I was so frustrated dicking around with them and not getting done what I needed to get done that I finally, after about 3 years of trying to fit a square peg in a round hole, decided that the ONLY solution was to learn HTML and slop together pages directly. You may or may not come to the same conclusion. All I know for sure is that Turdpress et alia can never do what I need done.

 

I want to give this a shot to see if it can be a fix for my problem.

Can anyone help walk me through the last part of the guide above with regards to the defering css and javascript part? I don't understand where this code goes or what it is or what parts I need. The link again is: https://www.myhostingfacts.com/defer-css-javascript-wordpress/

 

I think I have begun seeing some results. I am having trouble with some of the JS though.

I am using wp-rocket plugin for my caching, minifying etc. It has been pretty good in the changes I have made this far.

It has an option to "Specify URLs of JavaScript files to be excluded from minification and concatenation (one per line)."

Right now I am having an issue where my image slideshow will not show up on my page in mobile format. Photos in non image slideshows will show up no problem. I am trying to figure out the url of the javascript file that runs my image slideshow but I am having a hell of a time figuring it out. WP-rocket has a guide here: https://docs.wp-rocket.me/article/915-find-the-right-js-files-to-exclude-from-minification which I have been trying to complete over and over but I can't seem to figure it out.

The page that is not displaying the image slideshow (one of many) is here: https://highperformancejunkies.com/how-to-guides/rust-corrosion-repair-a-diy-guide/

Is someone able to help me work through the wp-rocket video to figure out what my js file is that runs the slideshow? This way I can exclude it and I should be running pretty good. If I could exclude the drop down menu at the top of the page as well so that I never have a problem with that working again and can minify a little more of the code I would be ecstatic

 

Got this far today after reaching out to WP rocket support team:

Issue: In my mobile version of the site - this page and others that have slideshow images do not display: https://highperformancejunkies.com/how-to-guides/rust-corrosion-repair-a-diy-guide/

Error codes as outline by the support team: https://share.getcloudapp.com/RBuXvnpz

They then went on to say: "I checked them and I see that one of the errors is pointing to this file https://c0.wp.com/p/jetpack/8.0/_inc/blocks/slideshow/view.js, which is actually deferred"

The Fix: They said to download the plugin they have here and follow the instructions. This included editing the plugin before I activate it: https://docs.wp-rocket.me/article/976-exclude-files-from-defer-js

I tried the following 3 edits into the plugin and none seemed to solve the problem:

$excluded_files[] = 'https://c0.wp.com/p/jetpack/(.*).js
$excluded_files[] = '/jetpack/8.0/_inc/blocks/slideshow/view.js'
$excluded_files[] = '/slideshow/view.js'

Questions:

- Was this not the right fix?
- Is this only part of a fix?
- Did I make an error in how I excluded the files?

Many thanks to anyone who can help

 

Hi, Now it's working fine on my side!