11 ms·
Performance notes
- DamonHD 9y ago> Of course, it all displays fine if JavaScript is not available, defaulting to visible – something I wish I could say was true of all sites. Hurrah! I am very bored of sites which need you to run 100 bits of JS, often from multiple sites, before displaying any actual content? Why? As I've said before, I try and make the first ~10kB delivered to the browser be able to render everything important above the fold, and have everything work reasonably in the absence of JS, eg for those of us running NoScript or similar out of caution. http://www.exnet.com/Style_Guide.html http://www.exnet.com/Style_Guide.html
- bArray 9y agoYes! I have gone even more aggressive these days - just stop running JS on client machines at all. Every time a page is slow, breaks, tracks, etc, there is almost always one culprit. My rule is now that if you can't load your page in lynx - it's broken. There are few exceptions to this rule in my eyes.
- bartread 9y agoI think it very much depends on a site or web app's purpose. Clearly it's fair to say that many sites overuse JavaScript. On the other hand offloading some computing tasks to the client can save you quite a bit in terms of hardware expenditure on the back end. Again, depends on the site, but many people now have (effectively) supercomputers, so why not leverage some of that? Sometimes it can even enhance the experience, and maybe improve both the perceived and actual performance. There are also cases where a site simply can't be expected to work without JavaScript. One of my side-projects is an HTML5/JavaScript games site. If somebody disables JavaScript they'll get a nice message explaining why they need to enable it to play the games, otherwise what would my fallback option be? Flash? Bleurgh! No thanks.
- DamonHD 9y agoThere are indeed honourable exceptions, but they are exceptions. The fact that on many corporate sites I cannot even get to see the company name until I have enabled JS in three rounds with NoScript is silly. Sometimes I just don't bother. As yes I am running a supercomputer right now, I quite agree, but I don't want nefarious stuff run on it. And on my mobile I don't want to be wasting my battery power on emulating Deep Thought to get past the throbber. Most sites want you to see some text. Many don't let you see any without scads of JS. (Note: I do use JS to enhance my sites, but the JS is small and the sites work fine without it running.)
- bartread 9y agoAgreed - no text at all without JavaScript is completely ridiculous, and not at all hard to avoid so it's deeply frustrating that there are so many sites that fall foul of it. Even my site, which is a games site containing pages that _simply won't work_ without JavaScript, manages to display something useful even on these pages when it's disabled. There are also sections such as the blog that obviously work fine without it.
- bArray 9y ago>Again, depends on the site, but many people now have (effectively) supercomputers, so why not leverage some of that? I agree, but seems ridiculous that my ("super") computer at current is using 7.4GB of RAM and 7% CPU for just FireFox alone, for what is mostly static content. >One of my side-projects is an HTML5/JavaScript games site. If somebody disables JavaScript they'll get a nice message explaining why they need to enable it to play the games, otherwise what would my fallback option be? Flash? Bleurgh! No thanks. That's an edge case, of course, that requires client side computing. The alternative is exceptionally infeasible for everybody involved.
- zkms 9y agoI concur. There's some times that running some JS can make the user experience strictly better without taking up any significant amount of memory/CPU time/energy/network (or in fact makes the system use less of those). It's frustrating when some site uses lots of JS to just reimplement browser features (like displaying text, showing a web form, history/links) which makes my laptop's fan spin up -- but doesn't bother using JS to implement genuinely useful things like validating the credit card checksum (https://en.wikipedia.org/wiki/Luhn_algorithm https://en.wikipedia.org/wiki/Luhn_algorithm) in JS on the client before submitting the form.
- DamonHD 9y agoHa! Yes, that's not a bad rule of thumb for sites that are meant to presenting text to the user. (And yes, I just tried my current pet site and it worked like a charm in Lynx! B^> )
- andreapaiola 9y agoProgressive enhancement is the rule
- deleted 9y ago[deleted]
- andreapaiola 9y agoOooh that is a good work! Very nice.
- songshu 9y agoThis site is great and I used it daily while I lived in London. Perfect for mobile. It's a real kindness of the creator to have kept it so simple and consistent over the years. I can't think of another site with as good a bytes:utility ratio.
- Veratyr 9y agoMinor quibble but in case anyone wonders like I did, the cases for units are mostly backwards. When he writes "Kb", he means "kB" (I looked at the size of the homepage, which is 10kB). For anyone wondering what I'm talking about, the kilo prefix is lower case K, the symbol for a byte is upper case B and lower case B is a bit. Kb = kilobit with badly capitalised kilo. kB = kilobyte. kb = kilobit. Also, interestingly, the JEDEC unit for 1024 bytes is KB while the metric one is kB. This is the only somewhat unambiguous JEDEC unit, the other two are corruptions of metric units.
- dracos 9y agoSorry to confuse, now fixed. Think I just predate all this standardization. I did mean KB (at least, that is what DevTools uses and from where I copied the figures :) ).
- masklinn 9y ago> Also, interestingly, the JEDEC unit for 1024 bytes is KB while the metric one is kB. However the SI k prefix means 1000 (10^3) rather than 1024, which would be Ki.
- ratherbefuddled 9y agoI always recommend this site to anybody booking a train, it's by some distance the best available in the UK.
- rwmj 9y agoEspecially since the official site (http://www.nationalrail.co.uk/ http://www.nationalrail.co.uk/) has been broken for a few months if you have NoScript, even if you enable all of the 30 or so Javascript sources. The technical problem is that if you visit the site at all without Javascript, it puts a cookie in an incorrect path, which causes all subsequent searches on the site to fail (even with full JS). Despite my attempts to get past the front line support I've still not found anyone there who is able to understand why this would be a problem. This level of incompetence makes me wonder about the whole operation. It was actually the thing that made me switch to using http://traintimes.org.uk/ http://traintimes.org.uk/ permanently.
- refrigerator 9y agoNever heard of it, but looks pretty great. Have you tried the Trainline app? If so, how does this conpare? Cheers
- ratherbefuddled 9y agoTrainline is a fairly typical commercial website. It won't work without javascript and cookies enabled, it wants to track you, it doesn't follow accessibility guidelines and is over a megabyte and a half in size. If you access it on a mobile device it has the usual annoying ad for the pointless mobile app (complete with onerous Ts & Cs, overly grasping permissions and invasive privacy policy) covering a quarter of the screen with the tiny dismiss button. In short, everything that's wrong with web development these days and defensible only because it's one of many. By contrast traintimes.org.uk is simple, highly usable, small, accessible, respectful of privacy and works as plain html. For me it's an easy choice but your mileage may vary!
- dracos 9y ago
- keithpeter 9y agohttps://traintimes.org.uk/live/Duddeston https://traintimes.org.uk/live/Duddeston My daily commute to Walsall has been made extra-efficient through this work Many thanks, and, for the record, works fine on Seamonkey with NoScript on OpenBSD which is pretty minority. Well done.
- pjungwir 9y agoSomething that has tripped me up a bit with service workers is this: I can use the service worker to cache all the things, and I can embed their hashes in the service worker so it knows when to refetch code that has changed, but how do I tell browsers to refetch the service worker script itself (to get the latest hashes)? I've read some people suggesting a no-cache header on just that file, although I see that isn't used here, and it seems to defeat the purpose somewhat. How do other people handle that? EDIT: At least I'm not the only one: https://github.com/w3c/ServiceWorker/issues/893 https://github.com/w3c/ServiceWorker/issues/893
- detaro 9y agoBrowsers should do that automatically (I seem to remember something like every 24 hours?)
- dracos 9y agoYes, service workers would previously cap caching to 24 hours, see e.g. https://stackoverflow.com/questions/38843970/service-worker-javascript-update-frequency-every-24-hours https://stackoverflow.com/questions/38843970/service-worker-... but as per the ticket mentioned there – https://github.com/w3c/ServiceWorker/issues/893 https://github.com/w3c/ServiceWorker/issues/893 – they are moving to default no-cache, opt-in caching.
- caub 9y agoBad to add things like Element.prototype.load
- pjs_ 9y agotraintimes.org.uk is a masterwork. The URL schema is simple enough to remember - always cool to tell people "just go to traintimes.org.uk/leeds/london"!
- jackstraw- 9y agoI'm working on a similar minimalizing project and really appreciate you sharing this. These types of write-ups are some of the best resources as I've grown as a developer. It's a great feeling to come across one that exactly answers something you're stuck on, or explains some concept that you're pretty sure exists but you have no idea where to start.
- iand675 9y agoI don't understand this part: > If you don't have a CSS cookie set, I inline the CSS in the HTML, load the CSS file asynchronously with a slightly adapted loadCSS JavaScript, and set the cookie. What is the purpose of the cookie here? Is CSS being stored in the cookie? Does the value of setting the cookie exceed using an Etag to only load the CSS if it's modified?
- krallja 9y agoA missing cookie means the CSS is sent inline with the HTML, so it doesn't need to start another request to fetch the CSS.
- dracos 9y agoI’ve reworded that bit, sorry, it wasn’t very clear! It is as krallja says; inlined on the very first request (so any caching headers such as ETag wouldn't help, though I do set them for anything subsequent) so there is no display blocking fetching the CSS needed for display (as I have little CSS, I inline all of it, but you might want critical CSS only).
- wjh_ 9y agoA good read, though funnily enough the live departures board doesn't seem to work for the closest station to me. Nor does it seem to work for lines that have trains going in both directions. Though to be honest most things don't, I blame being rural.