processing
Reference page content loads REALLY slowly
When loading the reference page (http://p5js.org/reference/) there is often a noticeable lag where the content is blank (~7-12 seconds for me), which may be confusing to new users and/or annoying...
(Note: I haven't tested this extensively, but it does appear to happen regardless of browser, assuming the page is not cached)
OS X (10.10), FF (38), Chrome (43)
Does no one else notice this? Several people in my part of the world (asia) have mentioned that the reference site was 'broken', due to this issue...
yes this is an issue. I'll start by minifying data.json and see how much that helps. beyond that, anyone have any ideas?
I know it would be a big change but perhaps we could shift to using a static site generator for the reference.
@futuremarc not sure if you're working on any reference stuff but this would be a great one to look into. cc @shiffman
@lmccart On a related note I've been doing some messing around and found a way to download the entire reference for offline use, not sure how to turn it into a script to always package the latest reference, though.
Here is a zip of the current reference
ah cool, this is great!! seems like we should be able to automate this somehow, we can try to take a look together sometime if that's helpful.
Any progress on this? We are now starting to teach with p5.js and visiting this page and seeing nothing for 10 seconds is very confusing for new students
thanks, that would be great! @futuremarc has also been working on a downloadable reference which should help at least a little.
@futuremarc, are you still looking into this? I'm happy to help if you need it, no worries if not.
I'd like to second @antiboredom's suggestion of making the reference a statically-generated site: if it's all static assets, it could be deployed via CloudFront, which (I think?) would make it as fast for asia as it already is for the US/Europe. It would also make it a lot easier to package as a downloadable like futuremarc is suggesting.
Is PHP just being used as a templating engine? If so, there might be ways to generate a static site without needing to move away from PHP... Maybe this is what futuremarc's approach involves.
Barring a fully static site, though, another solution might be to just move all the non-dynamic (i.e., non-PHP) content onto CloudFront. That might be a bit annoying to migrate to, but at least it'd mean that assets like data.json would be downloaded as quickly from asia as they are from the US.
I actually haven't been looking into this. I do need to set aside an afternoon and put together the downloadable reference PR. Will probably focus on that during the next p5 developers meeting
PHP is currently being used but we are planning to migrate away from PHP in the coming year to support internationalization. progress on that is over here: https://github.com/mayaman/p5js-website
@lmccart any progress on this? I did some test and from the original 930KB data.json, simply minifying gets it down to ~~49 KB~~ 636KB, if it is GZIP the size goes all the way down to ~~~10KB~~ 119KB. I don't really use grunt a lot so I can't really figure out where to put the extra step of minifying though...GZIPPing can wait until the node version of the site as it should be something the server do before serving the file.
~~Reducing the file size should make rendering the reference fast enough that we don't really need to do anything else too tricky I think.~~ I'll do more test.... :(
EDIT: I have to back pedal a bit here, because of some error the minify stops halfway through the file (which explains why it's so dramatic), the actual size after minifying is ~636KB, GZIP 119KB)
I did a bit more tests and there are two bottle necks both file loads, namely reference.js and data.json. The problem is that reference.js is quite big itself and data.json will only load when reference.js have loaded and executed the ajax call for data.json. That results in a user having to load ~1.18mb of files before the reference appear. Minifying them certainly improves load time but not by very much (760KB).
One way to improve the load times will be to get underscore and backbone out of reference.js and potentially load them via cdn. That way they can either be loaded in parallel (might have some problems) or loaded in the header, reducing the overall file size of reference.js.
I think one of the most amazing and underrated features of the original Processing has always been that it comes with all of it's documentation in an offline, static website, which was then easy to access from the editor. I would love for p5 to continue this tradition of being super-easy to play with and explore at any time, regardless of internet access.
So what I'm saying is: please don't underestimate the value of an offline pre-generated version of the docs.
I agree with @JobLeonard . Especially for those of us in Asia, where it can take 10 seconds to access the docs, the lack of a pre-generated ref is just about a deal-breaker for teaching...
I might have a go at this in a couple weeks time when I'm done with my own stuff. Plan is to improve load speed on the web and to have a static version generated on build so that it can be accessed offline.
Yes, I agree this is very important. Things are a bit hectic for me right now, but I will take a stab at it as soon as I can if @limzykenneth doesn't get to it first. Thanks for your patience all!