Help on page speed tests

Hello – I’ve been working to improve my Google PageSpeed / GT Metrix scores and I had a couple questions on their suggestions. Here are the two reports that have been run:

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.pinkluggageabroad.com&tab=desktop

https://gtmetrix.com/reports/www.pinkluggageabroad.com/iutRcr0C

Both services have advised me to optimize my images by compressing them. I’ve done that and removed the original larger files from my file library, but these images are still showing up on both reports and not improving my score. Here’s an example of an image that I optimized, deleted the original file from my file manager, emptied the trash and is still showing up on both reports: https://www.pinkluggageabroad.com/wp-content/uploads/2019/10/list-of-quirky-bars-1.jpg

Could you let me know if I’m doing the right improvements, or if I need to be doing something else?

Hello,

The image you have provided is not optimized well. That single image is having a size of 2MB. That’s big.

You may:
1. Use JPEG images instead of PNG.
2. Use progressive images.
3. Use Photoshop or any plugin to optimize images.

I have optimized the image you provided, and I was able to make it of 152KB without losing image quality and size.

Hope you will find this helpful.
Thank you!

Thank you very much for your help Amit. I have a couple follow up questions for you:

Can you walk me through the process of how you optimized that image? I’ve been trying to accomplish what you did, and I’d like to do it for a lot of images on my website but I’m having trouble with the workflow.

Second, I ran the Google PageSpeed Insights – https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.pinkluggageabroad.com%2F&tab=mobile and GT Metrix https://gtmetrix.com/reports/www.pinkluggageabroad.com/Sr5AsDfx and the image that you optimized is still highlighted on both. How can we run the tests so that is not included?

I appreciate your help. Thank you.

Hello,

You must optimize all images on your website manually and reupload them.
For progressive images, you can follow this guide: https://www.infophilic.com/make-progressive-images-increase-site-speed/

You can also reduce the work by using image optimization plugin, but as I can see, most of the images you have on your site are larger than 1MB. In this case, no free plugin will help. You will need to purchase a premium plugin. So better use photoshop.

I hope you will find this helpful.
Thank you!

Thanks very much Amit. I’m using photoshop to optimize my images. One question – when I’ve got the optimized images and I’m ready to re-upload them, is the process to use TDcomposer and remove the images on the page then upload the optimized image? Or do I need to go into my file manager and delete the original image altogether?

Please let me know the process that will fix my poor scores on the Google PageSpeed Insights / GT Metrix tests. Thank you very much.

Just FYI I used photoshop to optimize the image we discussed above, looks like the new size is 25kb and I used the progressive image per your suggestion. I removed the image on my homepage and replaced it with this new version. Please have a look and let me know if I did this correctly, and if I need to do anything else in the process? I re-ran the PageSpeed Insights and GT Metrix tests, they both still list this file as an issue.

Yea, you did correctly.
Optimizing one image will not improve site speed. You must optimize all images, including your site logo.

There are still many unoptimized images that need to be optimized and replaced.

Refer: https://prnt.sc/q0egfq & https://prnt.sc/q0egq6

Hi Amit – I’ve taken a lot of time and followed your instructions to optimize all the images on my website. On the homepage, I’m still getting low ratings from both Google PageSpeed (https://www.screencast.com/t/TmTeFaIpiJg) and GT Metrix (https://www.screencast.com/t/MrsO35TU). On those screenshots, it appears that both services are highlighting images that I’ve replaced with the Photoshop process that you suggested. What do I need to do to get rid of those old images so both Google and GT Metrix do not punish me for them?

I appreciate your help.Thank you.

Thanks for getting back to me. The 3 images that you refer to – which ones are they, so I can remove and re-upload them?

For the video playback on the main page – one of the primary reasons I chose Newspaper is the video background that I can embed via TagDiv Composer. So is there a better way to display video that won’t eat all of my resources?

I appreciate any help you can provide. Thank you.

Also – there is no video on my mobile front page and it’s still registering a very low score on the Page Speed Insight – https://www.screencast.com/t/d0yOAAGW37gi. The suggestions highlighted are ones that I compressed via Photoshop (per Amit’s suggestion above) and replaced on my mobile front page – https://www.screencast.com/t/qJ5IrmPOLMe

Hello,

Here is the list of some images that need to be optimized:
travel-background.png
travel-wanderlust.png
subscribe-bio-travel.jpg
list-of-quirky-bars-1.jpg
croatia.gif
maldives-ocean.gif
iceland2.gif
lagos-rocks.gif
check-point-charlie-berlin-jamie.jpg
Blonde-on-Blue-Train.jpeg

you can use Lazy Load by WP Rocket to improve the loading time of the page.

Also, some plugins are not required as those features already come with a Newspaper theme.
Here is a dedicated guide for Newspaper theme optimization. https://www.infophilic.com/get-almost-100-pagespeed-newspaper-theme/

I hope you will find this helpful.

Hi Amit – thank you for getting back to me. You highlighted images that I spent a lot of time optimizing and replacing, but per your feedback above it looks like those images are still slowing down my site. If it’s OK with you I’d like to take one example and please let me know what I need to do?

From your list: croatia.gif

What I had originally: https://www.screencast.com/t/v3vyqA933j – PNG file, size 2 MB

What I optimized and replaced on my front page: https://www.screencast.com/t/dinVpk7Yg – JPEG file, size 40 kb

I really hope we can work off this one example and tell me what I’m doing wrong, so I can optimize it for all the other images. Please let me know and thank you for your help.

For automatic optimization of your existing images and subsequent uploads, install and configure the ‘WP-Optimize plugin’. Make sure you disable caching on WP-Optimize if you are already using another caching plugin. Also, before you upload your pictures, you can compress them using photoshop or compressnow.com.

• This reply was modified 6 years by Mattsteve20.

Just one tip.

I am using an online service which works on the fly.
No matter what I upload it’s optimized and there are even new modern formats possible.

You may even define cropping

So it’s converted from png to jpg automatic and also generates WebP Images.

Thanks all – couple questions:

Admins: on mattsteve20’s suggestion, I’m currently using WP SuperCache. Will WP-Optimize help me out here?

Adeba – which online service are you using?

And admins I’d appreciate any thoughts you had on my latest question as I’m using Photoshop to optimize but still not getting the results I need:

Hi Amit – thank you for getting back to me. You highlighted images that I spent a lot of time optimizing and replacing, but per your feedback above it looks like those images are still slowing down my site. If it’s OK with you I’d like to take one example and please let me know what I need to do?

From your list: croatia.gif

What I had originally: https://www.screencast.com/t/v3vyqA933j – PNG file, size 2 MB

What I optimized and replaced on my front page: https://www.screencast.com/t/dinVpk7Yg – JPEG file, size 40 kb

I really hope we can work off this one example and tell me what I’m doing wrong, so I can optimize it for all the other images. Please let me know and thank you for your help.

@jamiesharpe

1. As you find optimizing images manually tricky/time consuming, I would suggest using an image optimization plugin to optimize all images on your blog.

2. After you optimize all images, you can setup Cloudflare CDN or re-enable Jetpack Photon. Cloudflare/Jetpack photon will surely help your blog to serve images faster.

3. Make sure WP Super cache plugin settings are correct.
4. You don’t need Shareaholic as the theme comes with inbuilt share buttons.
5. Use plugins like Autoptimize or Fast Velocity Minify to optimize scripts on your blog.

I hope you will find this helpful.

Hi all – thanks very much for your advice here. I followed your advice here and I’d like to review the results:

1) I would suggest using an image optimization plugin to optimize all images – I installed the WP-Optimize plug in that saved over 200 MB, per their logs.

2) setup Cloudflare CDN or re-enable Jetpack Photon – I have enabled Jetpack site accelerator (the new version of Photon). Is there any benefit to also enabling Cloudflare on top of this?

3) Make sure WP Super cache plugin settings are correct – confirmed

4) Use plugins like Autoptimize – installed

After performing all these tasks, I re-ran the PageSpeed Insights report and it still looks like I’m being penalized for items that the above processes have fixed. For example on the home page on desktop :https://www.screencast.com/t/dOQwdfG58KXs, these images have been reduced in size but are still showing up on the PageSpeed reports as an issue.

Further – on the home page for mobile there’s still images that I optimized and shrunk in size, but are still showing up on the test: https://www.screencast.com/t/dOQwdfG58KXs

I also understand that my home page has a video element that is slowing down my page, however after the above work I looked at another page that does not have video – https://www.pinkluggageabroad.com/riad/. On this speed test, the desktop report recommends I lazy load offscreen images which I’ve done via Jetpack – https://www.screencast.com/t/pzzLUPMn. The mobile report has the same lazy load recommendation and has issues with these images, which I have optimized – https://www.screencast.com/t/en9PBfEVZH7i.

I really would like to improve these scores and I appreciate your help. Thank you again.

Hi all – any feedback here is appreciated. Thank you.

Hi,

1) There are a few gif images that need to be optimized.
2) Images work better with Cloudflare + Lazy Load by WP Rocket

For page: https://www.pinkluggageabroad.com/riad/
Featured image on this page is of 1.95MB that’s big and is not being served by Jetpack CDN.

After optimizing all images, you must purge all cache (Server level cache, WP Super cache.)

I hope you will find this helpful.

Hi Amit – thanks for the advice, which has resulted in improved results on my desktop pages. I was wondering if you or the other TagDiv admins had any advice for mobile, which still seems to be stuck at slow PageSpeeds? Website is https://www.pinkluggageabroad.com, thank you.