Cloudflare speed tests keep getting worse

Hello!
After I implemented Cloudflare in early March and the speed test results were great. Then my site started loosing page rank in google and google’s speed test and GTMetrix tests seemed slow. Finally checked back with cloudflare’s speed test this weekend and it’s dismal. I didn’t change any settings in those two months. My hosting server just changed the PHP last week, but this issue has been getting worse ever since I moved to Cloudflare.
Here’s March 10’s speed test:


Here’s the May 22nd speed test:

I have tons on photos on this page (I know, I know… that makes it slow), but I haven’t changed a thing (other than asking for an increased PHP this past week) since implementing Cloudflare. Rocket Loader is on for both tests.
Getting super frustrated and wondering how to play detective. This is a totally hand built site, but I am NOT technical (which explains the baby coding). But it did speed up intitially. Any help is greatly appreciated.Thank you.

Yer killin’ us with the massive image collection. Yes, photos are your bread and butter, but that page is 32 MB of data. That’s…uh…a bit much. I got to 25 full sized images and stopped counting. Those all have to load before your page is considered “loaded”.

I suggest you whittle it down to your five best, and scale them down a bit. 1280wide and compress using something like tinyjpg.com. Each of your pages have the same issue. Other than the front page slider (with that handful of images), the other pages would be best served as a thumbnail gallery, maybe with a lightbox feature as you click on images, then the user would click through so the images load one at a time.

After that, I bet your site will be a whole lot faster.

2 Likes

Thanks for the quick response, but the photo sizes and number of images aren’t the issue for this discussion. The March 10 speed test was exactly the same number of photos and compression as the May 22 speed test. Looking to find out why the load times have gotten worse over time rather than better (or at least stayed the same).

I’m not sure what your real-world goal is for the site, but in the pics you posted, Cloudflare said .9 seconds in March, and .6 seconds in May. First Paint is off screen in the March screenshot, but in May, it looks like .85 seconds.

Thanks for the quick reply (you do get a big old trophy for all the heavy lifting you do here in the community forums… I hope!!!). I see what you mean about the first paint, but in terms of having the first photo show up, it’s way, way slower now than it was in March. I will try to minimize my photos more (they’ve already been compressed twice and sooooo many photographer’s websites end up with clearly overly compressed images so it looks like they just can’t focus to save their lives which is not good).
Here’s another example from google’s speed test.
March 15th:

And here is May 17th:

I really do appreciate your insight… I’m just trying to figure out what happened in those two months without making any changes. Hard to get a good baseline if it’s going the wrong direction. Or am I reading this all wrong? I do know that my Google PR has fallen from top of page 2 (where it was for years and years and years) to somewhere on Page 4 in those two months.

I just re-ran the Pagespeed Insights and got a 57, 56, and 59. I think a lot has to do with Cloudflare caching, so that may account for the scoring discrepancy. Since you can’t go back in time, it’s difficult to re-run the March test several times to see if the score is consistent.

That’s pretty good! Wish I could replicate it. One of the changes it suggests has to do with
Cloudflare’s cache. This was their second highest priority after the incredibly predictable too many photos. Any suggestions how to fix this glitch at my end? Thank you. I really do appreciate your insight.

Rocket Loader is a JavaScript optimizer, rather than cache. It’s quite possible that disabling Rocket Loader from the Speed → Optimizations page won’t fix the underlying JS inefficiencies coming from the site. It’s also three-quarters of a second total, which isn’t much in the grand scheme in things. Still worth a look, though.

Hi
I was interested in this topic because I have been working on site speed improvements for a year over a few sites.
When I check your domain home page I get a total download of over 50mb.
It seems the page is loading around 150 high res images for the image carousel.
I know things were better before and something else is making things slower, even so, I would look into reducing the home page mb load.
You could simply reduce the carousel to 5 or 10 images, or change the settings of the carousel plugin to load the next image on demand.
If I guess right and you are using “MagicSlideshow” there is a setting “Load images on demand”, try that ON.
If the on-demand feature is not available you could add loading=“lazy” to the element, in this case Chrome will likely not load the image until it is visible however Im not sure PageSpeed Insights will respect that as yet.
Another huge impact which will improve the site overall is loading smaller images for mobile devices.
Right now it seems you are serving 1920 wide images to mobile devices when you could get away with much smaller images using “srcset” which lets the browser choose the largest size it needs from a list depending on how big the screen is, that could reduce download size by 70%.

  • Scott

Hi Scott,

Thanks for the good insights. I’ve actually been testing many of the suggestions you’ve made (lazy loading), adding more compression (always a balancing act… getting photos to look great on horizontal retina monitor desktops and dinky vertical phones is craptastically challenging!), so the speed tests are showing a smidge of improvement.
That index trial is https://www.marcicurtis.com/index5295.html.

Here’s the question though. There are 56 images (43 are the 1920px width, the rest are smaller/icon type of images).
I wonder where it’s pulling the number 150 “high resolution images” from?

I am currently checking with the developer of the Magic Slideshow to see about sending in smaller imaged and what the code would be since they use img data-image instead of img src or img srcset. Google speed LOVES and rewards me for using this (you can see the work in progress at https://marcicurtis.com/index5302.html), but I LOATHE the white flash that appears between each slide. Super jarring. Trying to figure out how to get rid of that.

I really appreciate the great suggestions and I also love that with these few tweeks, I am being rewarded already!

So, THANK YOU!!!

Sorry I was wrong about that image count, I was looking at the total requests (about 130) but only 50-60 are images around 100kb or more but that’s still a significant page load

The white flash is really just bad programming in the script. It should not start the transition until the new image is loaded. Try different transitions with the load-on-demand feature on, some may work a lot better than others.

The scrset list with multiple image sizes for the browser to choose from should work fine with on-demand loading if the plugin is written properly.

  • Scott

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.