Low Google PageSpeed Insights score

[romansp]

Currently http://wger.de gets 51/100 for desktop and 44/100 for mobile https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwger.de&tab=mobile

If I submit a PR that improves it up without doing anything weird will you take a look at it?

[rolandgeider]

Sure, everything that makes the application faster is appreciated! However there are some things are just not in our hands:

• Browser caching, I recently changed the way wger.de is served and it seems I have forgotten about the caching headers. I'll look into this.
• Reducing the server response time is also difficult, wger.de is in a shared hoster so there is not much I can do there.
• Landing page redirects, this is also something that can't be changed. Once the user arrives at / they are redirected to their language.
• Adding compression to the site is also that has security problems when used in combination with https

These are possible!

• I am however unsure on moving the JS and CSS in above-the-fold. I seem to remember that at least the JS stops working on some pages (probably because what I wrote is... not optimal).
• As for minifying the CSS and JS, the django_compressor app has settings about that, but I haven't looked into it. I think they need some npm modules? On the other hand, the
• Optimize images

If you need to install a new django app for some of these, go ahead, if it is a well maintained one, there is no problem here.

[romansp]

I've submitted PR, that deals with css minification and optimizes several .png files. That should improve Google PageSpeed Insights score.

Now, I'd like to try integrate some front-end build tools like grunt/gulp, so all front-end optimization stuff could be done on project build automatically. E.g.:

• compile less/scss into CSS (maybe with autoprefixer support)
• compile CoffeeScript, TypeScript, etc. into JavaScript
• concatenate and minify CSS/JS
• minify images
• minify svg
• even pretty evil things like described here https://github.com/addyosmani/critical :smile:
• etc.

And finally generate neat build folder where all the generated files will be stored. Afterwards reference those resources in templates.

So, if you don't mind I would like to do it in separate branch and submit another PR.

[rolandgeider]

I'd be specially interested in minifying images and svg. I think the concatenation of CSS and JS works alreadz fine with django_compressor (plus it's automatic!) thanks to your other pull request.

Have you worked with less/sass before? I have always avoided it because there is not so much custom CSS and I thought that having another compilation step was unnecessary.

Besides that, if those evil things from the repo can be done easily that'd be awesome. Do you know if they are optional? Having a build step for deployment is OK but if it's also necessary during development for each change it would be less... optimal :)

[rolandgeider]

I also just activated browser caching for wger.de static files

[romansp]

:+1: So svg and images will be very useful.

I've worked with less a lot. It's very easy to get into it, because you can just rename your .css to .less and here you go. For less preprocessor existing CSS code is absolutely valid, so you can rework CSS to less later.

It can be useful even when it's not so much custom CSS. It provides variables, nesting and bubbling, mixins, functions, operations, imports. All this helps to keep less (css) very tidy and modular.

Of course all this steps are completely optional and you decide what your want. Regarding this evil step from repo - it is not very common, but powerful front-end optimization, when you so-called 'cricital CSS' (for elements that will be displayed on page load) is inlined inside head tag. For example http://www.smashingmagazine.com does it.

Usually all these tools offer 'watch' option, so changes during development trigger resource recompilation. Have a look.

[rolandgeider]

ah, ok, so we could for example have file.less and it would be then compiled to file.css. That regular CSS is also valid less is of course cool, no need to change everything at once.