Improving load speed

@iromprey

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.

Thanks for the response @j09
working on it now, just downloaded autoptimize.
For my images, do I need to reupload the same images after running them through compressor.io?
Or should I just download Eww and let it optimize my files?
Do I need to remove smush or I guess it won’t matter right?

I see what you mean with the caching, I was looking at a plugin called WP super cache. will that help me?
Thanks.

No problem @iromprey

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.

@j09
Got you, I did the bulk optimization with Ewww.
still showing I need to optimize images in page speed tools,
should I look through the specific images listed on the details and do something to those?
I appreciate you taking the time to assist me brotha, would be left in the dark without you haha.

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.

I did a bit of looking into which images are causing this, it seems like it’s my featured images for my blog posts and my two images for the “our focus” section on my theme.

View post on imgur.com

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.

@iromprey No worries, happy to help.

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.

@iromprey

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.

@j09 I managed to get the site to 66/100
I was about to go into the EWW support and I was reading something online about PNG being more lossless (I have no idea) I’m all over the place as you can tell. I’m extremely new at all this, glad I’m learning a little bit though, this is some complex shit man, I salute you.
I just basically changed all the images I had giving me problems to .PNG’s and somehow, someway, it worked. they were finally removed from the list on page speed tools.

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.

@iromprey you’ll get the hang of it in no time.

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.

Did all my settings exactly to yours, changed the images I had set to PNG back to JPEG’s ran the regenerate plugin and then did the bulk optimize, no luck. Still showing up on Google’s site,
Weirdly enough my bulk opti always stops like 5 images before the end. It never finishes bulk optimizing, not sure why.

Do you suggest I try going to EWW support? Or maybe my theme’s support line?

@iromprey

Noted.

Your response headers…

HTTP/1.1 200 OK => 
Server => nginx/1.12.1
Date => Wed, 06 Sep 2017 03:51:39 GMT
Content-Type => text/html; charset=UTF-8
Connection => close
Vary => Accept-Encoding,Cookie
Cache-Control => max-age=3, must-revalidate

…indicate that you have already installed WP super cache. Am I correct? If so try flushing the cache before doing anything else and check with google one more time.

If the same issue persists after your flush the cache,

What I would do is take one of the problematic photos down and delete it from the media library, rename the file you have on your computer and upload it again via the media library uploader. This should allow it to be optimized by Ewww.

Once that’s done, then I would set it s as the featured image one more time and check google. If the problem persists, then yes you will need the help of someone more competent.

deleted my cach, renamed the files. no luck man..

After deleting them and re-uploading them to my media library, went to bulk optimize and it said there were no images to optimize

Clicked “Shown Optimized Images” and i noticed for some reason it has multiple different sizes of the images I was using for my blog posts (the one I am having trouble with)
Not sure if that’s normal or not..

View post on imgur.com

what support should I go to? I was going to say wordpress support but realized I am already here 0_0 lol… But maybe EWWW’s support or my theme’s support?
Maybe I’ll make a thread on the theme support through www.remarpro.com.

Appreciate you trying to help me greatly though man, thank you very much.

Used a website called shortpixel, Thought I fixed all of them.
Turns out I did on Mobile, accidently didn’t look at desktop till after.
For some reason, doing the same method to all of them and only 2 of them didn’t appear on page tools.
Noticed the one that didn’t appear was a file size of 44KB while the rest were above 50.

Sidenote, tried again with the image I downloaded from shortpixel and it made it even less KB, when opening it its banannas quality though.. ffs this is insane
I need to find a way to make them less than 44kb, I don’t even know anymore.. Gonna post on the theme support I guess still

Hi,
why do you need the image to be less than 44KB?

Also please note that optimizing multiple times the same image will visibly degrade its quality. It is something we (ShortPixel.com) advise against.

Regards,
Alex

• This reply was modified 7 years, 2 months ago by ShortPixel.

Woah short pixel responded :O
Um, I mean I don’t know honestly Alex.
I just noticed the image that was 44kb after uploading to short pixel was the only one that didn’t get flagged as unoptimized on page tools. Having a bunch of problems, really doing everything I can to find a solution.