Because the hedgehog's becoming a bit of a critical rendering path optimisation evangelist,
-
she ran Google's PageSpeed Insights on the forum's homepage:
Ouch.
-
/* Sees nodeBB people and TDWTF staff casually whistling and fiercerly looking to screens ...
-
I remember the good ol' days of when we first moved in and the site worked on my phone.
-
@RaceProUK Could you show the rest of the report? What were the detected problems?
-
@Adynathos we wouldn't be WTDWTF if we didn't all, individually, immediately go to pagespeed and check ourselves.
-
They should just use a newer phone, the Nexus 4 is unsupported
-
@hungrier But apparently desktop has gotten better since the first test, it's now showing 49/100 for me. Or is that worse? 49/100 possible suggestions or 49% score?
-
@hungrier Thanks :)
Eliminate render-blocking JavaScript and CSS in above-the-fold content
As I understand it, the forum site is just the UI and loads topics/posts through AJAX. So obviously it needs the JS to show topics.
The JS could probably by many times faster, so i would say "optimize" instead of "eliminate".@hungrier said in Because the hedgehog's becoming a bit of a critical rendering path optimisation evangelist,:
the Nexus 4 is unsupported
Maybe many people use that phone and don't care if someone declares it "supported":
https://what.thedailywtf.com/topic/22208/it-marketing-dictionary/20
-
@Adynathos said in Because the hedgehog's becoming a bit of a critical rendering path optimisation evangelist,:
Maybe many people use that phone and don't care if someone declares it "supported"
It was my attempt at a
joke
-
@Adynathos The key is 'eliminate render-blocking JavaScript' i.e. put all your JS at the end of
<body>so parsing and executing it doesn't block rendering ;)
-
@RaceProUK But it won't render anything until the JS loads, I bet.
-
@Yamikuronue Looking at what's returned in Chrome's dev tools, the initial page load does include the menus and topic list in the HTML response, so it would start rendering that before executing the JS (if the JS is at the end of the
<body>).
-
NodeBB is every bit as shitty as
, the only thing making it 0.000001% better is no Jeff. And the biggest problem is the astronomically insane use of Javascript. Which is most likely made worse by shitty, poorly written Javascript, although I'm not sure if there is even such a thing as "good Javascript".
Retarded fuckery doesn't even begin to describe what is going on here. It is really started to seem as if Javascript is a cancer that is destroying the Internet.
-
@El_Heffe said in Because the hedgehog's becoming a bit of a critical rendering path optimisation evangelist,:
It is really started to seem as if Javascript is a cancer that is destroying the Internet.
Started?
-
@loopback0 the problem is that a lot of devs have never done stuff without AJAX.
-
@RaceProUK said in Because the hedgehog's becoming a bit of a critical rendering path optimisation evangelist,:
@Yamikuronue Looking at what's returned in Chrome's dev tools, the initial page load does include the menus and topic list in the HTML response, so it would start rendering that before executing the JS (if the JS is at the end of the
<body>).But it will likely load incorrectly, possibly with ux implications (user clicks button, expects button to work, button doesn't work because button requires js)
I think for an SPA like this, it's perfectly reasonable to block the render of the site until the required Javascript loads. It may not be a bad idea to first load a "loading page" or something, but that's a cost-benefit-analysis you'd have to make. I think far more impact could be made by speeding up the js, or doing something else to make it seem snappier. I'm not really a fan of the "Eliminate all js/css before render" stuff, though, because it can end up with a website that looks like that on an unreliable connection:
While that may work for a site dedicated specifically to serving information, if it's anything interactive, it's worse ux to present with a page that "might work" or "looks like it works" than a page that's blank.
-
@sloosecannon It is so quick on an internet connection faster than 2g it isn't a problem.
-
@lucas1 Right, that's also a factor. I'm not sure how many users browse the forum at speeds lower than that, though (or effective speeds lower than that, due to location, etc), so it might still be relevant?
-
@sloosecannon said in Because the hedgehog's becoming a bit of a critical rendering path optimisation evangelist,:
While that may work for a site dedicated specifically to serving information, if it's anything interactive, it's worse ux to present with a page that "might work" or "looks like it works" than a page that's blank
I agree with this. Speaking as someone with a very crappy, sometimes-slow sometimes-dead mobile connection, I really get annoyed when a site refuses to display a 500-word article just because it couldn't download the app bootstrap and router scripts so that it could download the layout and web component scripts so that it could fire off an ajax request to fetch the thing I actually care about >:(
I'm gonna quote Maciej Cegłowski in his talk on web optimization:
- First, load only what the user needs.
- Stop.
Of course that's not very realistic. But we could make it happen if we all used something like gopher!!!
-
@bb36e said in Because the hedgehog's becoming a bit of a critical rendering path optimisation evangelist,:
Of course that's not very realistic.
Of course it is realistic! The user needs to download 20MB of attack vector javascript from the most overloaded pieces of shit on the internet so they can look at ads before they get to the thing that they foolishly think that they want…
-
@bb36e said in Because the hedgehog's becoming a bit of a critical rendering path optimisation evangelist,:
@sloosecannon said in Because the hedgehog's becoming a bit of a critical rendering path optimisation evangelist,:
While that may work for a site dedicated specifically to serving information, if it's anything interactive, it's worse ux to present with a page that "might work" or "looks like it works" than a page that's blank
I agree with this. Speaking as someone with a very crappy, sometimes-slow mobile connection, I really get annoyed when a site refuses to display a 500-word article just because it couldn't download the app bootstrap and router scripts so that it could download the layout and web component scripts so that it could fire off an ajax request to fetch the thing I actually care about >:(
I'm gonna quote Maciej Cegłowski in his talk on web optimization:
- First, load only what the user needs.
- Stop.
Of course that's not very realistic. But we could make it happen if we all used something like gopher!!!
Right. Honestly, I feel like PageSpeed is targeted exactly at sites like that, where your render-blocking JS is degrading to user experience.
In a "website" that's actually a Javascript application (implications and stupidity of doing that aside), that "render blocking js" is, in actuality, critical to user experience, and so blocking page render until it loads makes sense. Most users understand that when the page looks like this:
It's still loading, so they can't do anything with it.
But, when the page looks like this:(ignoring the big red box)
They think it's loaded and "ready"EDIT: Finally blanked out the lounge stuff fully.
-
@bb36e also, while I'm paraphrasing Maciej:
PageSpeed isn't very valuable...you should instead measure the time from when the page is requested to the time that the user hits the 'x' button on the first pop-up ad.
-
@sloosecannon said in Because the hedgehog's becoming a bit of a critical rendering path optimisation evangelist,:
I'm not really a fan of the "Eliminate all js/css before render" stuff, though, because it can end up with a website that looks like that on an unreliable connection:
What you're meant to do is inline the critical CSS in the
<head>, then load the rest asynchronously while the critical stuff is being rendered. It's not an easy task (it's really fucking difficult if you use a framework like Bootstrap), but it's doable.
-
@RaceProUK said in Because the hedgehog's becoming a bit of a critical rendering path optimisation evangelist,:
@sloosecannon said in Because the hedgehog's becoming a bit of a critical rendering path optimisation evangelist,:
I'm not really a fan of the "Eliminate all js/css before render" stuff, though, because it can end up with a website that looks like that on an unreliable connection:
What you're meant to do is inline the critical CSS in the
<head>, then load the rest asynchronously while the critical stuff is being rendered. It's not an easy task (it's really fucking difficult if you use a framework like Bootstrap), but it's doable.But you're gonna break the ux of the SPA if you do that. Because it looks like it's loaded, it quacks like it's loaded, but it's actually not. So your users will be confused, because to them, the site is loaded and ready to go.
-
@RaceProUK said in Because the hedgehog's becoming a bit of a critical rendering path optimisation evangelist,:
@sloosecannon said in Because the hedgehog's becoming a bit of a critical rendering path optimisation evangelist,:
I'm not really a fan of the "Eliminate all js/css before render" stuff, though, because it can end up with a website that looks like that on an unreliable connection:
What you're meant to do is inline the critical CSS in the
<head>, then load the rest asynchronously while the critical stuff is being rendered. It's not an easy task (it's really fucking difficult if you use a framework like Bootstrap), but it's doable.Or just don't use 209340958439875 lines of needless Javascript shit. The excessive use of JS these days just seems like "if your only tool is a hammer".
None of this used to be a problem
-
@RaceProUK If you want to be fast
- Little or no HTTP requests ( like 1 for HTML , one for JS, one for CSS) But that strictly isn't true anymore.
- Sort out your repainting
It isn't really worth it unless you are caring aboiut a Blackberry Curve from 2009.
-
@lucas1 said in Because the hedgehog's becoming a bit of a critical rendering path optimisation evangelist,:
But that strictly isn't true anymore.
In fact, (IIRC), with HTTP/2 it's faster to make multiple requests?
-
@sloosecannon HTTP/2 does solve a lot of issues, that much is true, mostly because it makes much better use of connections.
-
@sloosecannon i am sure. I have to look at the chrome profiler tool thing (whatever they call it now) but yes HTTP2 is better than HTTP.
NOT REALLY A SURPRISE THOUGH!
Oh look there is a car model from the 1960s. The 2017 model is much faster.
-
This is how all websites should be done:
Everything else that is added is crap
-
@bb36e Well, you gotta think realistically. How are you supposed to read the news without analytics tracking, auto-expanding auto-playing video ads, and an overlay telling you that you how many free articles you can read this month?
-
@hungrier RED PILL YOURSELF
-
@fbmac said in Because the hedgehog's becoming a bit of a critical rendering path optimisation evangelist,:
This is how all websites should be done:
Everything else that is added is crap
There seems to be some disagreement:
Then again, nobody cares about that, so the rest of the web is
-
@MZH these copycats are inferior
-
@fbmac Copy and paste cunts,
-
@sloosecannon said in Because the hedgehog's becoming a bit of a critical rendering path optimisation evangelist,:
@lucas1 Right, that's also a factor. I'm not sure how many users browse the forum at speeds lower than that, though (or effective speeds lower than that, due to location, etc), so it might still be relevant?
I'm doing my best to optimize my PHP-based voting system so that it's zippy at 2G speeds, because the primary use-location is at a hotal (aka convention center) where WiFi is a pipe dream and Mobile data is so shoddy you might as well be using CSN.
-
@RaceProUK said in Because the hedgehog's becoming a bit of a critical rendering path optimisation evangelist,:
inline the critical CSS in the <head>
:nope.gif:
Personally, it still enrages me that absolutely nobody gives a shit about using strict Content Security Policies.
-
@MZH said in Because the hedgehog's becoming a bit of a critical rendering path optimisation evangelist,:
I didn't know these two.
-
Programming cargo cults are already being called evangelism. Next I'll have people knocking my door at Sunday's morning asking if I can hear them about the benefits of tableless web pages.
-
@MZH said in Because the hedgehog's becoming a bit of a critical rendering path optimisation evangelist,:
? Contrast is not what breaks your eyes. Lack of contrast is.
The Best Motherfucking Website
