Installed CloudFlare. PageSpeed dropped from 51/86 to 29/33


#1

I have a WordPress website using the Avada theme, and I was planning to test out using CloudFlare with WPRocket.

Prior to redirecting the nameservers, the site scored 51 on mobile and 86 on Desktop. Once I redirected the nameservers through CloudFlare, these scores dropped to 28 on mobile and 33 on Desktop. I’m currently testing this on a staging site, so my production version still runs at the higher numbers, but before I continue down this path, I’m wondering if I should be doing anything differently?

I installed and configured the Cloudflare Plug-In in the website.

We previously had an SSL installed on the website. Is there potential for conflict if CloudFlare has this active as well?


#2

M2,

  1. Can you post the dev and live URLS?
  2. Which page speed testing service are you using?

Don’t trust speed scores blindly. I’ve seen higher numbers make for slower sites in certain circumstances.
Also, SSL can make a site faster when it enabled http/2. You should get SSL on the live site so that you can compare 1:1.


#3

Staging Site: www dot uccrservices dot com
Production Site: www dot unitedcarpetclean dot com

Using Google’s PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights/

SSL is on both sites.

If Google says we should pay attention to speed scores, then it probably makes the most sense to use their scoring tool, as that’s likely the one they’re feeding into the ranking algorithm.


#4

It’s the un-optimized images in mobile that are killing you. For mobile, optimized images are more important than the other items, I’m supposing.


#5

Using the built in developer tools from Chrome + The Is it Cached? plugin, a couple of observations.

The total number of requests between the two sites are similar, but the total size is not. 3.0MB from the production site vs. 5.8MB from the staging site. So almost 2x the data being downloaded from staging.

Also, I would guess you have standard caching enabled vs. ignore query string. So if you install the Is it Cached? plugin you’ll see most of your css and js assets are not being cached by Cloudflare because they contain a query string in the URL. If you can’t enable query string caching globally you might put assets which can be used with it in the same path and apply with page rules.

Those would probably be the first 2 places I would look for some opportunities for optimization. HTH


#6

1.8MB of that is wasted in non-optimized images. That much data over 14 connections will lag on mobile for sure.


#7

A couple ideas to work on for sure, but it doesn’t really get to the heart of the issue… The only difference between the two sites is one is running through Cloudflare, and the other is not. The PageSpeed for one running through CloudFlare is significantly diminished. This tells me that CloudFlare is not going to assist me in achieving faster page speeds. On to plan B.


#8

Hey there. I would urge you not to give up so quickly. There is a difference in the two sites which has been mentioned:

  • Staging ~ 5MB
  • Production ~ 3.5MB

Regardless of your decision to use Cloudflare, your site can benefit from performance improvements in a variety of areas, notably:

  • image optimization
  • render-blocking JS
  • redirect chain
  • HTTP requests (200+, 130+ of which are JS)

You mentioned you’re using Wordpress. Are you using any caching/performance plugins? This seems like a ton of JS that could potentially be concatenated for fewer HTTP requests… Just my thoughts after a quick scan.


#9

I whole heartily disagree. With Cloudflare I was able to get a 99. With Google Analytics being the 1 failed test.
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fgravitywebworks.com%2F

  • Time to first btye: 19ms
  • HTML downloaded: 24ms
  • First Paint: 363 ms
  • Onload: 548ms
  • Done: 1100ms
    That’s with two 1080p videos, one of which is lazy loaded.

#10

As there is a significant difference in the Staging and Production site being tested, I would suggest Gray Clouding (aka, effectively stopping the use of CloudFlare for a domain, Refer to https://support.cloudflare.com/hc/en-us/articles/200169626 ) the Staging site and then comparing the results with the Production site. You will notice that even with no CloudFlare for the staging site, the page speed results will not match the production site. If both the production and staging sites are completely identical, then enabling CloudFlare on one of the sites should show the you exactly what benefits you are getting with CloudFlare (Also as @cscharff mentioned, you will have to tinker with the cache settings to make it possible for resources to be cached by CloudFlare)


#11

But that simply isn’t true. I mean, you’re welcome to go on to plan B or C. Don’t get me wrong. If you’re not happy with Cloudflare’s performance then there are any number of alternatives to explore. But the assertion that there’s no difference between the two sites other than that they are running through Cloudflare is simply untrue.

Take for example the “Get a quote” image on the sites. On one page the source for that image is https://i1.wp.com/unitedcarpetclean.com/wp-content/uploads/2013/07/get_a_quote.png and on the other it is https://www.uccrservices.com/wp-content/uploads/2013/07/get_a_quote.png. If the sites were the same the sources would be the same. But it appears that the non-Cloudflare site is using an image optimization service and then being compared to a Cloudflare plan which doesn’t have that service.

The version being sent through Cloudflare is significantly larger.And it’s not Cloudflare that is making the content larger, when I curl the image through Cloudflare and direct from the origin it’s the same size (27681bytes). Please, by all means run the test yourself to see:

curl -I https://www.uccrservices.com/wp-content/uploads/2013/07/get_a_quote.png
curl -I --resolve www.uccrservices.com:443:[your origin IP address] https://www.uccrservices.com/wp-content/uploads/2013/07/get_a_quote.png
vs

curl -I https://i1.wp.com/unitedcarpetclean.com/wp-content/uploads/2013/07/get_a_quote.png

You’ll see the content length remains unchanged on the Cloudflare site whether it is direct from origin

If you want to compare the same site through Cloudflare and not, then simply run your tests 2x using Cloudflare in front of www.uccrservices.com (orange cloud) and direct to origin (gray cloud) as @prayag.verma suggests . The scores will be poor and poorer, but at least then you’ll be comparing apples and apples.