Ideas (brotli, webp, GCC, ...)

[DanielRuf]

I had some more things in my mind.

A few of them are:

• brotli (generate the brotli files - there are brotli binaries from Google and https://github.com/mackjoner/php-ext-brotli for those who want to do it on the server)
• webp (provided by https://github.com/FriendsOfShopware/FroshWebP), would be useful to suggest it in the composer config https://github.com/FriendsOfShopware/FroshPerformance/blob/master/composer.json#L10 and https://getcomposer.org/doc/04-schema.md#suggest
• minify JS and CSS files (the correct / best way) - this is still Google Closure Compiler and Google Closure Stylesheets which provide the best results - there is also https://github.com/google/closure-compiler-js and the original with the Java binaries https://github.com/google/closure-compiler
• progressive images for better UX and perceived performance
• PWA (link to services or generate the needed files) - could be also a separate plugin (pwabuilder.com is a well known service)

https://github.com/DanielRuf/talks/blob/master/03_wpo_unkonf_2018/slides.pdf and other slides and talks from me contain also a few more details and links

[larsbo]

feel free to make some PRs 😃

[DanielRuf]

Will do so when I find the time. Until then this issue is meant as todo card (I do not have access to the projects and boards in this repo).

[shyim]

I don't understand the usage of brotli. For which reasons?

[DanielRuf]

Brotli is used for CSS, JS, SVG and so on and is a much better compression algorithm than gzip. In performance and power usage.

[shyim]

I dont understand why this should be included here :). Its the job from the webserver to do that

[DanielRuf]

brotli can be used as binary like cwebp and then we only have to add some lines to the .htaccess to enable it so no, it is not the job of the serer as the dynamic conversion would be slower.

You want to do that statically and AOT. See https://css-tricks.com/brotli-static-compression/ I would not want to let Apache do any additional things on every request. Otherwise we could use mod_pagespeed which would replace the webp plugin and brotli static gcompression but would generate additional load and hurt the performance.

[Hotte512]

Hi,

I thought I ask some things in this thread..

I think there could be a little more information about nodejs / npm installation and use.

Do we need it as Standalone or CLI installation ? like this?

(https://github.com/nodesource/distributions/blob/master/README.md#debinstall) curl -sL https://deb.nodesource.com/setup_11.x | bash - apt-get install -y nodejs npm install -g purify-css

And will i need to add a cron job on ./bin/console frosh:purify:css or will FroshPerf trigger it after template compilation?

(That way i got [OK] Purified css from 502.94K to 476.93K)

[DanielRuf]

Better ask this in a separate issue as this is not related to this issue ;-)

[DanielRuf]

To answer your question, both should be on your path (or globally installed).

See https://github.com/FriendsOfShopware/FroshPerformance/blob/2bf3f2dccded5cc82bd235437e4ea971369c20c9/Components/PurifyCss.php#L57 and https://github.com/FriendsOfShopware/FroshPerformance/blob/2bf3f2dccded5cc82bd235437e4ea971369c20c9/Components/PurifyCss.php#L92-L93

But personally I would use Closure Stylesheets.

[DanielRuf]

Some scripts that I've used for some projects (with slightly different content):

https://github.com/DanielRuf/brotli-bootstrap/blob/master/bootstrap.sh https://github.com/DanielRuf/bakery/blob/master/bakery.sh#L22-L26 for the cache directory, done with these lines and bakery .