CSS / JS Optimisation

Hi,

Sorting my site out for speed etc, its already very good but just thought I’d ask the questions regarding these:

  • CSS total size could be smaller

  • Too many external CSS files

  • Render blocking CSS files

  • This page has 5 external Javascript scripts. Try combining them into one.

  • This page has 6 external stylesheets. Try combining them into one.

  • Render blocking JS found (3)

  • 112.0KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.

Now I know you could probably minify the CSS and JS further, but what about merging CSS / JS files together etc for less requests etc. I wondered if this was anything that could be improved upon within Blocs although I assume this is no small task.

I don’t know where you are testing, but some of the old guidelines are out of date with http2. Performance optimization in an HTTP/2 world • Yoast

Will have a read of it now. Thanks. I’m using GTMetrix.

If you make use of the various options in Blocs at export I think you are pretty well placed and I’ve yet to see a slow loading site built with Blocs.

screenshot_357

Ironically, Blocs sites often score badly when tested on places like Google page speed insights because the testing tools themselves are out of date!

In practice, Blocs sites are fast and if you have a server with features like Lightspeed they can be really fast. All the normal rules like properly optimised images still apply.

Nice one, yes my site is quite optimised for images, keep-alive, gzip etc but just wondered about this.

Just found a good write up here Performance Best Practices in the HTTP/2 Era - SpinupWP

1 Like

If you have embedded YouTube videos on your Blocs page, regardless of whether you have LazyLoad enabled, GTMETRIX will give you an F for not deferring the YouTube JS. I’ve actually be experimenting with adding this JS in the footer to solve the problem, but it doesn’t work at all on LazyLoad pages. And even on pages where LazyLoad is disabled, I still get low scores on GTMETRIX – which means that code isn’t doing its job.

I’d love to hear from other Blocs users who have successfully solved that problem with regard to embedded YouTube videos. Thanks.

(BTW, I am using HTTP/2, so that is a total non-issue here.)

I successfully resolved the Youtube/Vimeo issue by self-hosting. I know a lot of people seem to be terrified of this but unless I was expecting a huge wave of traffic it strikes me as a far better way.

I am using HTTP/3 AKA QUIC.

The problem I see with self-hosting isn’t so much with the bandwidth but the fact you cannot build your YouTube Channel that way.

I’ve thought about putting a static image (thumbnail) in place of my video, then add a hyperlink that when clicked would take the viewer to YouTube. But it’s a bit more seamless when you can play the video embedded in the site. Also, sending people off to YouTube can be a distraction for them such that they might forget to return to your website.

Right now, I am mulling these two Javascript solutions:

I just tested a site I’m building at the moment. Has a carousel with about 9 images and 2 YouTube videos. Scored 98%

The videos have a custom image placeholder with a play button overlay linking to a modal containing the video. Seems to work well in this case.

Very interesting topic. Thanks for bringing this to our attention.