What's slowing down my site? High TTFB or something else?

I have WP Fastest Cache and Cloudflare and it still often takes more than 3 seconds for the first bites to load. I test my site with WebPageTest and most of the time I get an F score for TTFB.

Sometimes my site loads fast, but a lot of times it loads really really slow. And that was the case even before I got a CDN (Cloudflare) and WP Fastest Cache, and it’s still the case after. I’ve tried other Caching plugins as well, but my site still often loaded slow.

Even if I pause Cloudflare and activate WP Fastest Cache, the TTFB is still high most of the time, and vise versa. Even when I leave both off or both on.

Any idea what could cause the TTFB to be so high regardless of what I do? It doesn’t appear to be Cloudflare or WPFC causing it, and neither seem to be able to do anything about it. I believe this to be my biggest problem because most of my webpagetests show it taking the longest.

I’m not even sure if a high TTFB is a problem. Cloudflare seem to think it isn’t:
[url]https://blog.cloudflare.com/ttfb-time-to-first-byte-considered-meaningles/[/url]

I’ve always had slow loading pages since I created my site, so I wonder if it doesn’t have something to do with my webhost (hostgator).

I was going to show a webpagetest of my site, but it’s different every time I test it. I’ve been having high TTFB, but doesn’t seem to be as bad right now for some reason. My site is www.smartprepping.com, if you want to test it.

There are some things I’m noticing though from all of my testing:

  1. TTFB usually high - ‘F’ score.

  2. A lot of times I get a bad score for “optimize images”, yet I just installed a plugin the other day that went through and optimized all of my images, so I’m wondering what is up with that? Why is webpagetest and google pagespeed insights both telling me to optimize my images when I already have?

  3. Why does google pagespeed insights always tell me to leverage browser caching and webpagetest sometimes gives me a bad score for caching also, yet I’m using a caching plugin?

  4. There are a couple of CSS resources that google pagespeed insights says I need to optimize the delivery of (Style.css and styles.php - both from my themes folder). I just did a webpagetest that showed styles.php taking a long time. I tried to do something about it with the autoptimize plugin, but couldn’t. They told me on their forum that their plugin couldn’t help with it. Anything I can do to optimize the delivery of those two CSS resources?

  5. Fonts seem to be taking a long time too, but not sure what to do about that.

  6. Tests often tell me to minify something - CSS or Javascript, when I already am with the autoptimize plugin. I’ve also tried it with my CDN (Cloudflare), and the tests still advise me to minify. Why is that?

If you can advise me what to do about any of the above, or see something I missed in a test of my site, let me know.

Thank you

Still no responses - did I ask too many questions in one post?

hi kuurt,

  1. The TTFB is not always so high. I made some tests the last days for your page. The TTFB varies between 0.3sec and more than 3sec. I think this a sign that the problem come from your Hoster. If they have many sites on the server and there is much traffic all slows down. The TTFB for your page goes up.
    (You linked an article from cludflare. I think if you see that the complete pageload goes up and down with an longer TTFB this is a real problem. The user has to wait to see your page!)
    Here you find a thread about this problem:
    http://www.webpagetest.org/forums/showthread.php?tid=906

1 b) And I tested today: http://www.webpagetest.org/result/160201_D7_17ZS/
There you had a TTFB with an A-Grade, but the styles.php loading very long after that.
I dont know why, perhaps the server don’t work constantly fast enough??
(The styles.php is a small file with some of your css - dont know if it is effective to load it this way - or if it slows down the loading process?)
Perhaps you make a test and place a link to your result here without your rocket-plugin to see whats changing.

  1. About optimizing your images. If you look in your test here on webpagetest. Under the ‘Waterfall-View’ you find a link ‘View all images’.
    You can see results for your optimized images.
    Following the link for your home.jpg you get the optimized images
    http://www.webpagetest.org/jpeginfo/jpeginfo.php?url=http%3A%2F%2Fwww.smartprepping.com%2Fwp-content%2Fuploads%2F2015%2F05%2FSmartPreppingHome1.jpg

So the plugin you use dont get the best possible results.

Your header grafic is an png-file.
For optimise png you have a free online-tool.

A test I made with your header reduces the size from 183kB to 44kb (-76%)
(it would be more small as jpg-file but its a question of quality )

  1. Font-Loading: Your page-text renders in ‘Arial’.
    But the google fonts ‘Droid Sans’ and ‘pt sans’ are loaded.
    One of this fonts only used for the navigation.
    If you dont need the special google fonts perhaps you can deactivate these in your wordpress-template?
    (On the other side you see in the waterfall that the page shows up before the fonts are loaded. First the page shows up with an other font and after later loading the webfont it renders the page with the webfont)

I am from Germany - sorry for my not so fine english. Here I had same problems with my hoster and changing to a better hoster was the solution and in my case with lower cost.

greetings kay

Thank you for replying.

Yes, I think it must be my webhost also, after everything else I’ve tried. And I do have Hostgator as well, just like the guy in the post you linked to who was having the same or similar problem with Hostgator.

But I also tested other peoples websites who I know are also using Hostgator and they don’t seem to be having this problem. I know one guy that has had at least 20 websites with Hostgator and he says he’s never had a problem with Hostgator.

So I thought maybe they just had my site on a server that was overloaded. But I found this reverse IP lookup tool (http://www.yougetsignal.com/tools/web-sites-on-web-server/), and you can put your website in and it shows you all the other sites that it finds on the same server. I checked a few different websites that I had bookmarked and some had like 80 sites on the same server. One had 351 sites on the same server, and yet they didn’t have the slow loading problem that I have. My site only had 8 domains on the same server, with only 6 of them up and working, including mine.

After doing this WebPageTest here on several different websites and almost all of them get an “F” rating for TTFB, I realized that I can’t pay any attention to that - I’ll probably always get an F regardless. But, what was different about my site’s TTFB is that mine often has a really long bar in the waterfall view for that while all the other sites I’ve checked do not. They still get an F, but they don’t have a long bar.

So, I’m guessing the problem is on hostgators server end but it doesn’t sound like it’s overloaded. Not sure what else it could be.

I don’t know what I can do about that styles.php, it always takes a long time as well.

[quote]
Perhaps you make a test and place a link to your result here without your rocket-plugin to see whats changing.[/quote]
I don’t have a rocket-plugin, I’m guessing you’re talking about my caching plugin?
With WP Fastest Cache: http://www.webpagetest.org/result/160202_S5_2ZD/
With WP Fastest Cache deactivated: http://www.webpagetest.org/result/160202_1B_33M/

I look at what you said about the images and fonts later, I’m getting hungry at the moment.

I reduced those two images with that tool. Here’s what my page looks like now:
[url]http://www.webpagetest.org/result/160202_FD_72M/1/details/[/url]

I’ve been using Ewww Image Optimizer. But, I’m not sure if I should switch to another plugin for that or not - it might be that I just wasn’t using it right. Looks like from my homepage image that you linked to on that webpagetest, that the lossy version was the smallest, but I didn’t have lossy checked. There is a place where I can check “lossy”, but it says I have to purchase a cloud API key to use that feature. Maybe I should just look for another plugin that will do that for me for free, or just use Tinypng.com before uploading them to my site.

I found where you change the fonts. Mine is currently set to:
‘Helvetica Neue’, Google WebFont: ‘Droid Sans’, helvetica, arial, sans-serif.

But, I didn’t originally know there was a place to change them, so I got a plugin (TinyMCE Advanced) that would let me change the font on my posts to arial. I’m guessing that was a mistake.

I’m a little confused about what to do with the fonts at the moment. Don’t know if I should make all fonts across my site arial. Maybe they’ll load faster that way. Or maybe they’ll load faster if I use google’s webfonts, I don’t know. I think it looks better to use a different, more interesting font in h1 and h2 text to make it stand out a little more from the main text, but I don’t know how to do that in a way that doesn’t slow down the load time.

Use jpegmini for jpegs. PngGauntlet for pngs. For gifs you can use gtmetrix as long as the gif isn’t animated.