Topic on Project:Support desk

ResourceLoader vs CDN subdomain for css scripts

9
Subfader (talkcontribs)

I have three ~5 KB CSS scripts which only affect single pages and a forum extension.

They don't change often and so I host them on a cdn-like subdomain (far-future-expire, cookieless etc).

Is it nontheless better to embed the CSS using RL (addModuleStyles)?

Subfader (talkcontribs)

Or is it even a bad idea at all to host CSS (and JS) on a different domain? I think I've read somewhere that the CSS and JS files load much faster when hosted on the same domain as the website.

88.130.122.168 (talkcontribs)

From a performance point of view, hosting stuff on different domains is bad: In order to get information from another domain, you will need a new DNS lookup and a new TCP connection. When this happens a few time during your request, it sums up and can actually be perceived, especially when using a slow connection as you usually have with mobile devices. You can calculate with around 250ms for each additional file, that has to be downloaded that way (plus the time needed to transfer the actual content, but if the file is small that should be way below 100ms). Hosting everything on the same domain will save you the DNS lookup and the time needed to get the new connection, but the ressource loader honestly is kind of a performance killer. Concatenation of CSS is nice and is the right idea, but what the ressource loader does is just slow. I have not tested it, but I would guess that transferring a number of small (minified) CSS files with separate requests will still be way faster than using the ressource loader.

Subfader (talkcontribs)

Thanks for the clearification for the additional DNS lookups. I just thought: Onc cached by the user it wouldn't matter.

About RL: You are aware how fast Wikipedia loads?

I even think about adding my main skin CSS (63 KB) to RL. Is it a good idea?

88.130.122.168 (talkcontribs)

In fact, when you program for MediaWiki, using the resource loader is a handy option and yes, I also use it myself. I am maintaining a few skins that are technically Vector clones and so they also have their CSS/JS loaded through the resource loader. Having nearly the complete CSS loaded through the resource loader is btw. also what Wikipedia does. I don't know how it's configured at Wikipedia, but I guess that it does not deliver a precached file from the file system. Instead, it invokes PHP and I guess it does a few MySQL queries to get the cached stuff somewhere from an internal DB table. If you have kind of a CDN this should not really hurt, but it will always be faster to only read an existing file than having to invoke PHP, MySQL and to fetch stuff from inside a DB.

Subfader (talkcontribs)

Thanks for your thoughts.

Until a dev tells me differently I will stick to my few CSS files.

TheDJ (talkcontribs)

For WMF, basically ALL caching layers are used in their optimal setup. Operation caching in PHP (or actually HHVM these days), in memory caching with memcached and output caching with varnish (for caching at the network request layer) and lastly multiple locations for serving content. Without this, your performance will probably be less than Wikipedia.

Basically, this is what CDNs do as well, but you don't have to configure it yourself with a CDN of course.

Note that RL does a lot more btw. It is also handles dependency management, de-duplication, partitioning (so you only load the stuff you need, kind of important with thousands of lines of CSS and JS that is used throughout MediaWiki), right to left language support etc. etc.

Anwyay, MediaWiki will use RL for all it's own resources regardless, so if you add a bit of JS and your performance tanks, then you should probably do a bit more reading on RL, because you are likely not using it correctly :)

Florianschmidtwelzow (talkcontribs)

In addition to that it probably is faster to load your CSS and JS with the resource loader, because you should save one or two connections, the RL tries to load as much resources as possible in as least as possible connections to save the time for DNS lookup (which will normaly be cached on client side), tcp headers, webserver response and so on (in fact any overhead you need to establish a connection). Combined with the facts mentioned by TheDJ, the resource loader may not be perfect, but it makes a lot of things easier and much more performant with less work (for a developer using it) :)

Subfader (talkcontribs)

So, that also counts for large skin file then, I guess. What about plugins like font-awesome.min.css?

I plan a new redesign with an own skin then I will make use of RL.

Reply to "ResourceLoader vs CDN subdomain for css scripts"