Hi guys, I’m running a Ghost blog (Casper theme) with CloudFlare. In Google Search Console, I’m getting these suggestions for improvements:
CLS issue: more than 0.1 (desktop)
LCP issue: longer than 2.5s (mobile)
I believe Casper is really fast in itself. Do you guys have any experience with this? How may we improve the speed? Many thanks!
Ghost in it’s standard configuration is really really fast.
Casper theme is also really good.
Did you do any customization to your theme?
What content are you loading, that could take long to load?
LCP (large contentful paint) considers the rendering time of certain “media” elements like images, graphics, videos and such.
Do you have any files of that sort on your page, that are not compressed and properly sized and therefore account for long loading times?
CLS (cumulative layout shift) refers to layout movements on your page, sometimes due to sudden loading elements. It probably has to do with some content you load on your page, that shifts certain parts of your website.
Casper in it’s standard form has 0 CLS.
Regarding Cloudflare:
Are you caching your static files?
Check that by looking at the response header of a static file (css, img etc.) and look for
cf-cache-status: HIT
thanks a lot @daniel1 those are great pointers! I fully agree on Ghost native insane speed.
narrowing it down, i think it might be the scripts (i did add some G-analytics, G-adsense, commento & reading progress scripts). I’m not sure if that’s the heavy loader.
The rest of the site are mostly text, img & some YouTube video embeds. I use Squoosh to compress the img & host them externally on https://postimages.org/.
I just learned about the cf-cache-status thing & did a check.
Thanks again for your tips!!
You could press F12 in your browser, go to Network and press F5 to reload your site and see the loading times for each file.
Should give you a nice overview, of whats happening on site load.
If you have a chromium based browser (Chrome, Brave, Microsoft Edge) you could aswell go to the Lighthouse Tab and generate a report, it will give you a lot of tips on improvement.
Mentionable Website Testtools:
(can also additionaly generate Lighthouse Report, under Advanced Settings - Chromium - Capture Lighthouse Report, when Test is completed and you see the results click on the Lighthouse Score to see Lighthouse Report)
https://developers.google.com/speed/pagespeed/insights/
(runs on Lighthouse, but will give slightly different results back, than Lighthouse in your Browser Dev Tools)
can’t thank u enough. super helpful! i never really notice these. 