Understand I’m not anywhere near an expert on most of this. I’m looking for help from people who’ve dealt with these issues before, mostly just need help decoding these terms and issue’s I’m not familiar with.
I did a speed test on Google’s page speed insights website, came up with 33/100 on the test.
here’s an image of the different issues that came up
I downloaded WP smush a few weeks ago and optimized my images. Still having the “Optimize images” come up.
Here’s what comes up when opening the tabs, minify CSS and minify java script.
I’m being honest I’m that noob with these I don’t even know where to start, I’m hoping somewhere here can point me in the right direction with tackling these. unfortunately, I know the bare minimum if not anything about CSS, Javascript, and general website optimization. I’m 100% willing to learn, just hoping someone can put these issues in more simple/understanding terms for someone like me.
my site is nocertainty.net
Thank you for reading, appreciate any support with this from the community here.
I don’t know if you’re interested in the long story so I’ll skip it for now.
Most of the issues will be handled if you install Autoptimize
There might be a few scripts that still need some work but Autoptimize will combine and minify most of your CSS and JS files.
As for the images, well, they are not optimized. This can be caused by any number of reasons which need more investigation.
I ran one of your images through Compress.io and it shows room for up 70% reduction in size.
I prefer Ewwww for image optimization. You need to let it bulk-optimize files that are already in your library once you install it.
You’re not serving cached static content. You should look into the many available caching.
serving pages without caching is equivalent to writing up an entire document on every request instead of serving a pre-saved copy of it.
Again, I didn’t want to add too many details here.
Ask if you need more information.
]]>I see what you mean with the caching, I was looking at a plugin called WP super cache. will that help me?
Thanks.
No, you don’t need to use Compress.io at all. I only used it for reference.
Once you install Ewwww, it will automatically optimize any new images uploaded via the WordPress media image uploader according to the settings you set for it.
However, it will not be able do anything about images that have already been uploaded prior to the plugin installation. For those you need to run the bulk-optimize function once your finished setting it up. You can find the bulk-optimize option under the media tab in the admin side menu.
I don’t recommend using two plugins that serve the same function at the same time. Pick one and uninstall the other. Otherwise, you might run into conflicts.
Yes, WP super cache would work. Just go through their docs as they would explain anything better than I can.
let me know if you have any other question.
]]>What does this mean?
“Eliminate render-blocking JavaScript and CSS in above-the-fold content”
about to do some reading into the WP super cache plugin.
]]>It appears it’s the images that are being forced into a smaller size, so I took one of the images from my focus section, inspected it and saw it said 100 x 100 on height and width. so I tried re uploading the same image with a size smaller than 100 x 100 and it still came up with page speed tools.
Saw that on a website about my problem.
Your images are still not optimized I just checked 30 minutes ago. You probably have to do a bit of reading into Ewww docs and support threads because something is off. I know Ewww works, it’s something on your end. You might want to try to regenerate the post thumbnails
No, you should not have to go through the images one by one, that is not very efficient once your website grows larger.
]]>There are three things you need to understand about “above the fold” optimization.
1- Above the fold simply means what ever shows up on your screen before you scroll down.
2- CSS and JS files block rendering by default.
When a browser encounters a CSS or JS file above the fold – usually in the page header – it stops doing everything and focuses on downloading and reading/parsing the CSS or JS file it’s currently working on.
3- The way to eliminate that is to tell the browser to go ahead and continue downloading the rest of the page.
With JS files you can either async, defer, or simply move the files to the footer or anywhere below the fold. Again.
With CSS files, it’s a different story. removing render blocking CSS is more complicated.
I won’t go into too much detail, ask if you need clarification.
What Google wants is that users won’t have to wait long before something shows on their screens when they visit your website.
]]>I understand slightly what you’re talking about, basically, when the part of the page is not visible, like the content on the bottom of my page, it’s not being rendered. Making when it does get scrolled down to, it’s a bit slower. My best way to describe what you’re saying lol.. After reading what you said again I’m thinking everything I just said above is wrong.. And it has something to do with my header, I notice when I scroll down my header follows all the way to the down.
I’m gonna be honest, I read the entire page you linked when I clicked Async/defer
https://developer.mozilla.org/en/docs/Web/HTML/Element/script
I honestly felt even more confused than before, this is insane I can definitely understand why people pay others to do this.
If there’s any way I can fix this, or what you suggest I should do, or read up on maybe in more simple terms, for someone like me, I’m definitely open. I hate not knowing what any of this means, but I’m doing my best to understand and fix my problem. Thank you again, kindly.
The page I linked to is more on the techie side. You don’t need to know any of those things. I just added it for reference.
No, PNG files are no good. PNG files are much bigger.
What lossless means is that png files won’t degrade in quality every time you save them. JPEG files degrade in quality every single time you save them.
Ideally what you want to do is create the images in PNG format while working on them then display them as JPEG once you have a final product.
You should never use PNG format photos unless you run a very high quality photography website where visuals matter that much.
For 99% of the cases slightly compressed JPEG files are the way to go.
Prior to your latest change your page size was slightly over 1MB. Now that you’re using PNG files your page size is over 4MB.
Here are my recommended Ewww settings:
https://ibb.co/c2FaeF
https://ibb.co/n5sz6v
https://ibb.co/iE9OYa
https://ibb.co/isnozF
https://ibb.co/jZdveF
Go back to JPEG photos then regenerate the thumbnails then run bulk-optimize and try google one more time.
Once the images are ok, we can proceed to other things.
]]>