Kirby gets very high score at Google PageSpeed Insights, however still need some solutions:
As I understand, there are no 3 version plugins currently? Are there other ways to solve this?
This isn’t really down to Kirby, it’s more to do with how you build your website. There are endless guides out there in search engines for this 
In general, though, run the site on http2, SSL with Gzip or Brottli enabled. Go easy on the third party services, these will seriously drag the site down. Things like Youtube and Vimeo embeds can be lazy loaded, as can images (I use Lozad).
Optimise images with things like imageoptim and imagealpha. Theres a cli tool for imageoptim that will rip through directories recursively.
There are many ways to remove unused CSS, my favourite at the moment is PurgeCSS since it will actually look through all my php snippets and templates to find unused classes.
I would recommend running the site through something more detailed like GTmetrix or Sitespeed. This tools will give you more insight and tell you how to fix in most cases, rather then just reporting what is wrong.
2 Likes
You might also be interested in this thread:
1 Like
Thank you, but let me specify, currently I would like to output all css/js files as one. Usually CMS have some modules/plugins, that allow to do that, or there is default setting. So I would like to do just the same. As I understand from search, there are no Kirby 3 version plugins yet. If there is another way, do you know solution? I understand, that there are many ways to improve scores, and many tools, but I just want this one thing at the moment: to serve all css/js files as one (and of course not just make it manually once, but still have css files as separate, as I might need to change them later and want them to stay organized).
It’s a build process thing really, one of the easiest ways to do this is to use Laraval Mix. This can be set up in minutes and will bundle your css and javascripts into single files.
I see, thank you, is it possible to set up on shared hosting?
No, its for use while you build. You feed it a source directory or a list of scripts and styles in the right order, and it will output the result to a path that you specify. It doesnt run on the hosting, it runs locally on your machine.
Ah, ok, so it means that I have to repeat the process if I make some change to any css file, right? Then not exactly what I would like to have.
For images I found very useful solution: srcset, and it’s now in the core of Kirby 3
A build process is pretty common, and something most devs use. There of course many ways to do it, Mix being just about the easiest. You could of course use Grunt, Gulp or Webpack (Mix is actually built on top of Webpack). Lastly, there are cli tools that bundle things for you. I honestly don’t think it should be up to the CMS to do that, either as a built in function or as a plugin.
There are a few plugins for doing things like cachebusting and file hashing for Kirby 3.
srcset is useful, but it’s only as good as how you set it (dont go mad with the screen size array - stick to under the actual size your image will be on the page).
If you’d rather have something GUI based, Codekit is a nice tool for Mac if you use SASS, LESS etc. It also concatenates files; there are also alternatives for Windows.
@Roman, if you’re after SPEED, then rather than concatenating your CSS and JS files, you should be trying to host your site on a web server that uses HTTP2.
The reason why “in the old days” we used to concatenate files, is because in the old HTTP1 standard, the protocol was not designed for concurrency and multiple simultaneous requests. So the old servers like Apache could only handle a very low number of concurrent requests. Every image, media file, CSS file and JS file creates a separate request on the server, so the more requests you have, the slower your page would load. Therefore, concatenating all your CSS and JS into a single file ‘made sense’, and sped up your page loading.
The new HTTP2 standard introduced a few major changes, and one of them was better support for multiple simultaneous requests. The ‘newer’ web servers - like Nginx - were developed with this in mind, and from the outset were able to handle a very large number of concurrent requests, instantaneously. Nowadays, most modern web servers (and all browsers) are setup to handle HTTP2, and multiple simultaneous requests, so splitting your CSS and JS may actually improve your page loading time - depending on your particular setup, and specially taking into consideration browser cache.
1 Like
@luxlogica, thank you. My hosting is supporting HTTP/2, also checked site https://m2b.lt/lt, that I am now working on, it’s showing, that HTTP/2 is supported https://tools.keycdn.com/http2-test
Network check also shows HTTP/2:
Or do I have to make some more settings to enable HTTP/2? Never really tried it.
Excellent! Has it helped?
Just use sass with prepros. It’s compile js & css on the fly. https://prepros.io/
1 Like