Optimize Website Load Speed

[Nutomic]

Out of curiosity I just run some loading speed tests on peertube.social, and it seems there is some room for improvement. Here are the tests I tried:

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fpeertube.social%2F&tab=desktop https://gtmetrix.com/reports/peertube.social/fcff8bfY https://www.uptrends.com/tools/website-speed-test https://developers.google.com/web/tools/lighthouse/

The main suggestions are:

• [ ] get rid of render-blocking Javascript and CSS
• [x] specify browser caching for static files
• [ ] enable compression for json (seems like this would be a risk for BREACH, and anyway would only save 26 KB out of 912 KB)

[Chocobozzz]

get rid of render-blocking Javascript and CSS

PeerTube HTML is built by JavaScript so I'm not sure we can do anything here (or use server side rendering but it's quite difficult).

specify browser caching for static files

Do you have the URLs?

enable compression for json (seems like this would be a risk for BREACH, and anyway would only save 26 KB out of 912 KB)

Yep, we do not enabled it on JSON endpoints for this reason

[rigelk]

Maybe we can improve the lazy-loading of the JS and CSS?

[ghost]

one other thing I was wondering about: using 'use strict'; in JavaScript can make the code run faster(2. Point). So shouldn't the transpiled typescript contain this string?

I am not sure if there is already an option in typescript or angular. But if I understand it correctly, there should be one (so probably needs a fix upstream).

any thoughts on this?

[rigelk]

@BO41 Typescript has a strict option, which enables noImplicitAny and strictNullChecks and generates the 'use strict' you refer to. So a prerequisite would be to make our code compatible with these two options.

[Nutomic]

@Chocobozzz Here are the files listed by gtmetrix.com:

/api/v1/config/ (expiration not specified)
/api/v1/oauth-clients/local (expiration not specified)
/api/v1/videos/categories (expiration not specified)
/api/v1/videos/languages (expiration not specified)
/api/v1/videos/licences (expiration not specified)
/api/v1/videos/privacies (expiration not specified)
/client/assets/images/favicon.png (2 hours)
/client/en_US/language.e569b5463ef1c0ef2b34.png (2 hours)

This list is most likely incomplete, as it only considers the main page. And maybe not all of these files are actually cacheable (or only for a short time).

[McFlat]

As per webpagetest.org the only thing missing is the CDN for static files like images, JavaScript and CSS.

https://www.webpagetest.org/result/181015_D4_3badf8626dd3c36f7e9969bae979f674/

[McFlat]

[McFlat]

Maybe we can add instructions in the docs about how to host the static content on a CDN to improve the site performance, and the rest of the stuff like videos can be served by NGINX like it already is.

Probably should add capability so the uploaded images and website static files get uploaded to S3 or some other cloud storage after running an update. Then it can just do it automatically every time the code gets updated, so long as the config has the storage bucket url and credentials for that.

[Booteille]

Isn't using a CDN the opposite of the goal of the project (decentralizing services)? I can understand why we could make this an option though.

[McFlat]

@Booteille No it's not, the purpose of this project is to decentralize video content, while CDN's allow for better scaling and performance to serve the content

[Chocobozzz]

@McFlat Please edit your comment instead of adding a new one each time to avoid spamming watchers :)

[McFlat]

Ok I'll keep that in mind, thanks

Also it's not spamming, it's messaging/commenting, since when is sending a message other than advertisement for viagra or handbag products considered spam haha. I hate spam too, but I don't like my messages being called spam, because they aren't. What next? People start calling poop as a healthy snack?

[ghost]

Application Performance

Continuing our focus on performance, we analyzed common mistakes across the ecosystem. We discovered that many developers were including the reflect-metadata polyfill in production, which is only needed in development.

source it seems like we are doing this too. My PR to update to angular7 will remove this polyfill.

This should improve performance/download size as well

[rigelk]

@BO41 I've already done that here - you cannot just remove it from the polyfill, you also have to add it to the development build.

[ghost]

@rigelk

To fix this, part of the update to v7 will automatically remove this from your polyfills.ts file, and then include it as a build step when building your application in JIT mode, removing this polyfill from production builds by default.

sounds to me that there is nothing else involved after updating. But you probably know this better than me

[rigelk]

ah right, my fix was just for the v6.

[ghost]

enable compression for json (seems like this would be a risk for BREACH, and anyway would only save 26 KB out of 912 KB)

as far as I know, this is only a problem if you have a secret on a page. Like a clear text password. And you need to be vulnerable to CSRF

---

one other thing:

why are thumbnails so huge in size? I was loading video.blender.org where they uploaded a lot of new videos, and you could see all thumbnails slowly loading

the image is displayed 200x110, but the thumbnail is 1280x720.

[Chocobozzz]

@BO41 Maybe a bug, please create an issue

[Chocobozzz]

Closing now we have cache for static endpoints in nginx config, and there's nothing we can do about JS/CSS blocking.

[Nutomic]

I just checked a couple of different instances, and none of them have have the client path completely cached. The nginx config has png, svg types missing. On some instances it even fails to cache js and css files, but maybe they are not using the default nginx config.

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fframatube.org%2F&tab=desktop https://developers.google.com/speed/pagespeed/insights/?url=pe.ertu.be&tab=desktop

Personally, I would really prefer if these cache headers were set directly by Peertube, because it is really hard to apply the default nginx config while using Docker.

[Chocobozzz]

@Nutomic I'll add them

[Chocobozzz]

https://github.com/Chocobozzz/PeerTube/commit/c928e1364fbdff87f27fd982710b95426a250491 & https://github.com/Chocobozzz/PeerTube/commit/cd4cb177e6e35f69832304366c6f9df96600fb9e