18 ms·

The impact of removing jQuery on our web performance

315 points by kevinak 4y ago

iopq 4y ago
When I did web development, I specifically loaded JS lazily so first you got a pure HTML page with just a few lines of code. Those lines of code are normal (not jQuery) JS that loads the rest of the JS lazily in a progressive enhancement. This means the page can start being rendered before the jQuery code loads. But in fact, jQuery is largely not needed since Internet Explorer lost market share and there's less of a need to have lots of workarounds for it.
- 3np 4y ago
  If done properly this can be nice but a common grief is when interactive elements (input fields/buttons/links, including in flowing text) move around after first becoming visible. The worst is input fields that get cleared or grabbing focus (this is way too common; not stellar to have to password reset due to typing half a password in an auto-complete search field) as part of this process after the user has already started inputting data.
  - 867-5309 4y ago
    it also negatively affects anchor links, e.g. example.com/#contact will not always jump to the contact section with lazy loading
  - marcus_holmes 4y ago
    this is so infuriating when it happens and I click the wrong thing because between the time I saw the button and pushed the button, the button moved away and another button moved under my finger/cursor. I would massively prefer to have a blank page, or a page with no buttons, and wait a few seconds for the buttons to appear in their final locations, than this.
- wildrhythms 4y ago
  You have to really do some extra work to make this happen "nicely". Swapping out parts of the page without jerking the user around is a difficult problem, especially if you aren't working with fixed sizes of elements. And creating a "skeleton" system of placeholders during loading is a whole other set of state you have to build out and maintain. I find most sites using this kind of progressive loading are completely useless during the loading phase... What's the point of showing the user a page full of skeleton/loading placeholders? You might as well have just server-rendered the whole thing and made the user wait an extra second or two.
  - Dalewyn 4y ago
    I remember how it was good practice to assign width and height to <img> tags. The idea being the browser would know how to render the things around the picture without needing to download the picture first, preventing the page from jumping around as the quicker and lighter HTML was downloaded and rendered first.
    - chrisweekly 4y ago
      That still is a best practice. That "jumping around" is now referred to as "CLS" -- Cumulative Layout Shift -- one of the "Core Web Vitals" metrics used to quantify performance-related UX.
      - teknopaul 4y ago
        I sometmes like CLS, it makes it look like things are happening instead of feeling like a wait time. I recently used a simple templating mechanism elem = jquery.clone() ... elem.slideDown() And this renders bits of the page moving them as it does it; slideDown() is in jquery core. It used to be popular before that biz of rendering grey squares first got invented
        tryfinally 4y ago
        Layout shift feels fairly terrible when you're navigating to an element that is at the bottom of the page (via #id) or simply refreshing the page. There is literally nothing more annoying than clicking the wrong link because the layout shifted under the cursor at just the wrong moment. CLS is also known as "jank" for a reason.
- wraptile 4y ago
  > jQuery is largely not needed since Internet Explorer lost market share and there's less of a need to have lots of workarounds for it. As someone who's late to the webdev party I feel that jQuery is pretty awesome (all I ever heard is people poopoo it). The vanilla API for the DOM manipulation is just plainly awful and borderline nonsensical so I'd say jQuery is still very much needed.
  - djitz 4y ago
    jQuery and the many plug-ins people wrote for it were amazing. What was not amazing was the manner in which many projects utilized them.
  - NohatCoder 4y ago
    This is probably the biggest hole in vanilla js. In particular building a large DOM structure requires so many method calls. jQuery lets one use an innerHTML-ish style, but it is supposedly guarding against injection attacks in some way. I don't like the hand-wavy way it claims to guard against injections, as basically it has no way to tell what part of a string was meant to be text, and what was meant to be elements. So I ended up coding my own library. No conversion of strings to elements, so naturally no injections. Very small and simple. But saves a ton of typing when generating DOM structures in JavaScript: https://github.com/NoHatCoder/DOM_Maker https://github.com/NoHatCoder/DOM_Maker
  - dspillett 4y ago
    If you are mainly using jquery for its DOM manipulation¹ rather than for browser compatibility² or things that didn't exist consistently in older browsers³ then there are much smaller libraries that do that job which may be worth looking into. https://github.com/fabiospampinato/cash https://github.com/fabiospampinato/cash or https://github.com/franciscop/umbrella https://github.com/franciscop/umbrella to give a couple of examples. Some explicitly support IE11 so you are not dropping as much support for legacy browsers as you might otherwise. Though if jQuery works for you and isn't a performance issue, then by all means keep with it. It may not be ideal, but good enough and does the job. Let the naysayers spend their time debating whether you should or not, and just get on with making things! --- [1] selection engine, chained selections, chained modifications, … [2] not the issue it once was, if you can abandon IE and old Android browsers from your supported UAs or can deal with any issues that crop up individually [3] again, if you can afford to drop support for legacy UAs
ctrlmeta 4y ago
Has anyone noticed how all UK government websites like https://www.gov.uk/ https://www.gov.uk/, https://www.nhs.uk/ https://www.nhs.uk/, https://tfl.gov.uk/ https://tfl.gov.uk/, https://coronavirus.data.gov.uk/ https://coronavirus.data.gov.uk/ have the same look-and-feel and the same UX? Are there more such examples of countries that have uniform UX for their government websites?
- samwillis 4y ago
  They all use this design system: https://design-system.service.gov.uk https://design-system.service.gov.uk. It's much more than just a CSS framework, it's full specifications on how to implement easy to follow and sensible UX. I wish there was more buy in by local councils of this system, there are some incredibly poor local government sites.
  - was_a_dev 4y ago
    I imagine a buy-in by local councils is just that - a cost. And most councils are either poorly funded, poorly managed financially or both!
    - samwillis 4y ago
      I'm not so sure, I think there is a real NIH syndrome in local government IT services, they quite often want to build something themselves - but then as you said don't have the budget to do it properly. Using the design system, and sharing platforms using it, would be a significant cost saving. Plus the (at times) antagonistic relationship between Whitehall and local government I think means they don't want to necessarily use something they associate with the incumbent administration.
      - midenginedcoupe 4y ago
        Not really. Local gov doesn't have anything like the budget of central so they don't typically have the choice to build their own. Instead they're left with cobbling together behaviours from tens, maybe even hundreds, of disparate third-party systems, each independently solving the full stack of a given department's function. E.g. there's a dedicated system for planning approvals, another for administering blue badges, etc., etc. These third-party systems are typically very cheaply made, with a very low maintenance budget, and don't provide anything like enough customisation to adhere to someone else's design system. If you're lucky you can add your own header/footer and set some main css colours to match your council's brand.
throwaway0asd 4y ago
Deleted.
- weird-eye-issue 4y ago
  Tracking and spyware can be loaded after page load. And with HTTP2 it doesn't really matter if you have more than 8 resources. I doubt query selectors will have any meaningful impact on page load
  - deleted 4y ago
    [deleted]
p4bl0 4y ago
> But when it’s on every page, from a web performance perspective, it equates to a lot of data. How does browser caching come into play here? Doesn't it make a difference?
- firecall 4y ago
  Yes, it makes a difference in network requests. It only needs to get the file from the Internet once, but the browser still has to load the file and work with it on each page load! :-) How that is handled exactly... I don't know LOL :-)
- josephg 4y ago
  Browsers don't share cached assets between different origin domains any more. So the browser cache would only come in to play when you're browsing between pages on the same government website. But I'm not sure that downloading 32kb on each page load is their biggest problem. It sounds like a lot of the cost of jquery is parsing that javascript on each page load - especially on low specced devices. Javascript parsing traces (as far as I know) aren't reused between page loads at all.
  - radarsat1 4y ago
    This is an interesting point. Is there no way for cdn-hosted JavaScript to have their JIT results cached? I suppose the dynamic nature of JS might make that pretty difficult. (Lack of hermetic environment around modules, so global variables could change compilation results.)
rob74 4y ago
> Now I know what you may be thinking, that doesn’t sound like a lot of data, especially compared to images which can be multiple megabytes in size. But when it’s on every page, from a web performance perspective, it equates to a lot of data. Er... the utility of jQuery in 2022 aside, I would say: if it equates to a lot of data when it's on every page (of a single website), you're doing something wrong?! I mean, caching content between different domains is not a thing anymore, but on the same domain jQuery should only be loaded once?
- Izkata 4y ago
  Maybe they have a bundle per page and it's in each one: https://www.npmjs.com/package/jquery https://www.npmjs.com/package/jquery
- ClearAndPresent 4y ago
  The article goes on to explain that they are optimising for extremely low spec devices used by financially and socially disadvantaged users. The majority of their users load pages in less than 1s (likely due to caching and connection). Some users take 25s or more to load a page. It is for these edge cases they were testing.
  - tomgp 4y ago
    If they're concerned about financially and socially disadvantaged users perhaps the place to start helping those people would be on the universal credit login page which currently delivers 100+ kb of javascript for a couple of form fields.
  - 00deadbeef 4y ago
    They're testing against a hypothetical user on a 2G cellular connection. I can't see many situations where that would happen. Being poor doesn't mean you can't afford 3G because every data plan in the UK includes 4G as a mimimum. Often 5G is included too. You have to be extremely rural to drop down to 2G and rural people are often better off. Poorer people tend to be in urban areas that have better digital infrastructure.
myfonj 4y ago
What I miss in this otherwise excellent article is more insight about methodology. There is just murky > We run tests every day on GOV.UK pages using specific simulated devices and connection speeds. Because we can repeat these tests every day, it allows us to monitor what the changes we are making to the site are doing for real users visiting GOV.UK. with no mention whether those were all cold start loads or simulated browsing scenarios. Not wanting to diminish the effort or challenge the conclusions — I know that jQuery does quite a lot checks and feature detecting stuff when it initializes, even when it is not used (so removing it must have significant impact) — but if those measurements were done with cold start empty cache single loads each time, it might count some "extra" time (download, parse, tokenize, build AST) that usually precedes only initial load and "first run" of static library and is not present in subsequent interactions.
- CJefferson 4y ago
  Does any browser cache the parsing, tokenizing and built AST of Javascript libraries between website visits? Also, I don't visit UK government websites that often -- so I'd suspect I am "cold cache" whenever I do.
  - myfonj 4y ago
    > Does any browser cache the parsing, tokenizing and built AST of Javascript libraries between website visits? From a quick googling, yes, at least some of them. (TIL): https://stackoverflow.com/questions/1096907/do-browsers-parse-javascript-on-every-page-load https://stackoverflow.com/questions/1096907/do-browsers-pars... >> The third time (i.e. a hot run), Chrome takes both the file and the file’s metadata from the cache, and hands both to V8. V8 deserializes the metadata and can skip compilation. — https://v8.dev/blog/code-caching-for-dev https://v8.dev/blog/code-caching-for-dev > Also, I don't visit UK government websites that often -- so I'd suspect I am "cold cache" whenever I do. For first visit with given browser and profile (or incognito mode), sure. But if you visit more than single page during same session, you probably have more than a "cold cache". That measured page mentioned in the article seems to be guidepost with only most important excerpt of the content, so it seems plausible you would "click around a bit" from there.
yokoprime 4y ago
jQuery was nice in a pre transcompiled js world, but those days are long gone.
- toinbis 4y ago
  No, they are not gone at all.
- Beltalowda 4y ago
  I very intentionally avoid that world when I can because the tooling overhead is just too much, and the general state of the tooling does not leave me impressed. I don't think I'm the one, and there are plenty of older sites/apps just churning along. Don't confuse popularity with ubiquity.
Frontend_devs 4y ago
At the end he said a certain cohort of users, but how many users were actually in that cohort? JQuery is an older technology. I find it hard to believe something made to work on older hardware / internet is affecting performance that much. We have 5G and stupid fast chips in phones now. I’m skeptical. Performance issues are usually database queries or code compiling / “waking up” some server function.
- kwhitefoot 4y ago
  You have all those things, I have some of them, many people do not.
- david_allison 4y ago
  > We have 5G and stupid fast chips in phones now. The people who need government services the most won't have this
  - atonse 4y ago
    Do we have hard data on this? Just want to make sure we aren’t just making assumptions. I would think most folks of any income would replace their phones even every 5 years, simply because the batteries would’ve died. And I’d think any phone in the past 5 years would be reasonably decent. Even the ultra cheap ones. Plus with networks, cell carriers are at least incentivized in general to get folks off 3g into lte since it’s cheaper for them to not have to maintain N systems.
    - mejutoco 4y ago
      IMO the key concept is that the government does not serve most folks. It serves all folks, so it is good to be slightly conservative in terms of bandwidth. For data maybe Android share in Europe could be a start, or people with prepaid plans. In my experience both are much more prevalent in Europe than in the US.
    - youngtaff 4y ago
      GDS have it (or at least proxies for some of it) as part of their RUM data Device memory is a good proxy for how powerful the phone is Effective connection type will give some data on network performance
bar8uyr 4y ago
That's nice but when you load the actual universal credit login page it needs nearly 400kb of reactjs - not sure about after that, don't have an account.. Some (most?) of the other gov uk sites have megabytes of js on them.. eg. https://coronavirus.data.gov.uk/details/testing?areaType=nation&areaName=England https://coronavirus.data.gov.uk/details/testing?areaType=nat...
- uwuemu 4y ago
  Yea, I was shocked they talk about stripping jQuery as if they have these super fast, snappy pages and then ... it's React. WHAT? React is a lot if things to a lot of people, but fast loading (on an underpowered device with bad connection, which are the conditions they're talking about) isn't one of them. When I imagine a grandma trying to login into a gov site and loading a meg of react related garbage which then runs like ass anyways, I want to punch a Zucc in his cold blooded alien dick.
petesergeant 4y ago
> But when it’s on every page, from a web performance perspective, it equates to a lot of data It's not cached?
roschdal 4y ago
jQuery is still wonderful.
- awestroke 4y ago
  Try new stuff every once in a while. You might be surprised
  - zach_garwood 4y ago
    Try old stuff every once in a while. They still work. You might be surprised.
    - awestroke 4y ago
      I've worked with a lot of technologies over the years. Some I still consider to be good, others I am happy to leave behind. jQuery is in the latter camp. I have worked with these technologies professionally: - Vanilla js targeting ie5+ - jQuery - MooTools - Angular - KnockoutJS - virtual-dom - React - Typescript I've also tried out a handful more in my spare time, like Vue, Preact, and Elm. If your list does not include any modern stuff, then your opinion is worth zero to me, because your reference for what's good is horribly outdated. If your list matches or exceeds mine, and you still prefer jQuery, then I'll be bewildered but at least your opinion is interesting.
  - exodust 4y ago
    There's a JS library called New Stuff? For me, I use Jquery because it works. Light and low impact. Syntax is good for readability.
    - awestroke 4y ago
      jQuery has its own syntax?
      - exodust 4y ago
        https://www.w3schools.com/jquery/jquery_syntax.asp https://www.w3schools.com/jquery/jquery_syntax.asp
xanthippos 4y ago
However the page uses jQuery? <script type='text/javascript' src='https://insidegovuk.blog.gov.uk/wp-includes/js/jquery/jquery.min.js?ver=3.6.0 https://insidegovuk.blog.gov.uk/wp-includes/js/jquery/jquery...' id='jquery-core-js'></script>
- solar-ice 4y ago
  insidegovuk.blog.gov.uk is not gov.uk.
- robin_reala 4y ago
  The blog is run by a separate agency inside the UK government for various historical reasons.
stefantalpalaru 4y ago
goodpoint 4y ago
""" Since these users have the slowest devices, they’ll need the most help to make sure their visit to GOV.UK is as fast, efficient and as cheap as possible """ If only web developers cared about *all* users the web would be much less crappy.
bluenotebo0k 4y ago
Honestly I feel like jQuery is my "secret weapon" similar to how Lisp is Paul Graham's in Beating the Averages. It's so much more productive than vanilla JS with negligible impact on performance, especially with caching.
- FlyingSnake 4y ago
  JQuery has better alternatives like Alpine.js or HTMX which are much lighter and easy to use.
- Kiro 4y ago
  What are you doing with jQuery that you can't easily do in vanilla JS? I understand the argument before we had querySelector, but not now.
  - francisofascii 4y ago
    JQuery is terse, which helps with productivity. document.getElementById('id').style.display = 'none' vs $('#id').hide();
fleddr 4y ago
The team at gov.uk is doing an excellent job regarding web performance, credit where credit is due. In many ways role model behavior. Still, the results are such a stretch as to not have that much meaning. They have to descent all the way to 2G to see any meaningful difference, and I'm assuming they are cold visits (typical in lab-based testing). For those exceptional users, this creates a difference from very poor (12 seconds) to still poor (9 seconds). Probably less because they'd normally have a warmed up cache. Is it empathetic to improve performance for those users? Very much yes, do it as far as you budget allows for. But as it comes to jQuery specifically, the conclusion is that its negative impact is negligible.
- kllrnohj 4y ago
  > They have to descent all the way to 2G to see any meaningful difference Somewhat shockingly according to https://www.cambridgewireless.co.uk/news/cw-journal/why-2g-wants-live-forever/ https://www.cambridgewireless.co.uk/news/cw-journal/why-2g-w... 12% of mobile network connections in the UK are still on 2G? That's surprisingly high usage, and would definitely be worth optimizing. Although usage that high would then explain why 2G shutdown is still 10 years(!) away for the UK. Phones still on 2G also seem likely the be phones that don't have the best of web browsers, so cold visits may still be more representative than it seems like it should be.
  - seydor 4y ago
    Maybe it's home alarms
  - yardstick 4y ago
    I wouldn’t read too much into 2G figures meaning 2G-only phones (or 3G). In my experience once you get out of populated areas connections often drop to 2G, even on my 5G capable iPhone. It’s mostly a coverage issue not a handset issue.
    - GordonS 4y ago
      It varies wildly depending on which network you are on. For example, on EE I get 4G coverage almost everywhere - even across remote parts of the Scottish Highlands and Islands. OTOH, my missus is with Three, and she rarely gets 4G at all outside of towns and cities.
remram 4y ago
Why is jQuery "render-blocking"? Wouldn't loading it at the end of the HTML or with the `async` attribute fix that?
sanitycheck 4y ago
Honestly if they'd just used jQuery instead of React all the way through they'd be loading a lot less JS and performance would be vastly better on those slow old devices. After all, jQuery was made for the slow old devices, in the time they were not slow or old. The real problem is that jQuery is not new and shiny, and nobody wants to be doing jQuery in 2022.
- commandlinefan 4y ago
  In addition to which, jQuery was actual useful - React is just pure overhead with no real functionality.
  - klysm 4y ago
    I don’t understand how you can claim that react is pure overhead. Sure it does have overhead, but it’s also a really useful abstraction. How composable abstraction for UI components that enables local reasoning not functionality. jQuery is just pure overhead with no real functionality compared to vanilla js.
    - smarkov 4y ago
      React is vastly overused. You don't need every single element in your page to be a separate component when 95% of your site is pure text and you have an occasional form or a button here and there. If you're making an actual application (think Discord/Spotify) then yes, it becomes a necessary abstraction. Your personal website or news website (or many others) using React is a waste of my bandwidth and CPU cycles.
      - dbud 4y ago
        Don’t forget about server side rendering. If you only need to serve static, you don’t really need any Jack, anyway.
      - klysm 4y ago
        Agreed it doesn’t make sense for a lot of things that could just be static sites. But you also wouldn’t need jQuery on such sites so I’m not sure why that matters.
SavageBeast 4y ago
"But when it’s on every page, from a web performance perspective, it equates to a lot of data." Caching? Set cache headers such that the jquery.js rarely/almost never expires and requires a re-fetch?
caeril 4y ago
> But when it’s on every page, from a web performance perspective, it equates to a lot of data. Author of this article is apparently unaware of browser caches. > JavaScript is known as a “render-blocking” resource. Yeah, if only there was, like, an async attribute or something. > The graph below shows time to interactivity dropped from 11.34 seconds to 9.43 seconds So, jQuery is way too heavy for these people, but interaction tracking analytics (these packages usually start around 200kB) is perfectly fine? > total page load time dropped from 19.44 seconds to 17.75 seconds Burying the lede here, if my team celebrated a 17 second page load, we'd be fired on the spot. Going out on a limb here to suggest jQuery is the least of their problems.
denton-scratch 4y ago
> especially compared to images which can be multiple megabytes in size Please don't put images of multi-megabytes size on web-pages. My boss put a 10-megabyte image on the homepage of one of our clients; he fancied himself a photographer, and he took the photo. It gave a 10s page-load time from a desktop PC. I offered to shrink it for him, which would have taken 2 minutes; he wasn't having it. I don't think it was pride in his photo; I think the client wasn't paying their bills, and he wanted to punish them. But please, shrink your images to fit on the screen of your most-capable target device. There's no need for super-hi-res posters on websites.
- chiefalchemist 4y ago
  Adding...please use the img tag's sizes and srcset to maximize performance. Please stop using desktop sized images across all viewports when using background images.
chippy 4y ago
Couple of relevant previous discussions around this subject: Gov.uk drops jQuery from their front end (90 days ago|437 comments) https://news.ycombinator.com/item?id=31434434 https://news.ycombinator.com/item?id=31434434 How and why we removed jQuery from Gov.uk (5 days ago|43 comments) https://news.ycombinator.com/item?id=32423422 https://news.ycombinator.com/item?id=32423422
seydor 4y ago
Maybe. JQuery reduces the number of characters you need to write compared to vanillaJS , so if their websites use some JS , it was probably a benefit. Now tell me about the megabytes of javascript that their new fancy frameworks download, uncached
pkrumins 4y ago
I’m still a huge fan of jQuery. When I start a new web project then the first thing I do is add jQuery to the project. This is pretty much the only dependency that I ever use in my web projects. Nothing can beat the short “$” function and effects such as fadeIn, fadeOut, and others.
deleted 4y ago
[deleted]
pavelevst 4y ago
It’s so nice to know that someone still case about web performance. In a world where it’s quite normal to see website with static information and 1-5MB of compressed JS, which takes long time to load and makes your device hot

315 points by kevinak 4y ago

iopq 4y ago

When I did web development, I specifically loaded JS lazily so first you got a pure HTML page with just a few lines of code. Those lines of code are normal (not jQuery) JS that loads the rest of the JS lazily in a progressive enhancement. This means the page can start being rendered before the jQuery code loads. But in fact, jQuery is largely not needed since Internet Explorer lost market share and there's less of a need to have lots of workarounds for it.

3np 4y ago
If done properly this can be nice but a common grief is when interactive elements (input fields/buttons/links, including in flowing text) move around after first becoming visible. The worst is input fields that get cleared or grabbing focus (this is way too common; not stellar to have to password reset due to typing half a password in an auto-complete search field) as part of this process after the user has already started inputting data.
- 867-5309 4y ago
  it also negatively affects anchor links, e.g. example.com/#contact will not always jump to the contact section with lazy loading
- marcus_holmes 4y ago
  this is so infuriating when it happens and I click the wrong thing because between the time I saw the button and pushed the button, the button moved away and another button moved under my finger/cursor. I would massively prefer to have a blank page, or a page with no buttons, and wait a few seconds for the buttons to appear in their final locations, than this.
wildrhythms 4y ago
You have to really do some extra work to make this happen "nicely". Swapping out parts of the page without jerking the user around is a difficult problem, especially if you aren't working with fixed sizes of elements. And creating a "skeleton" system of placeholders during loading is a whole other set of state you have to build out and maintain. I find most sites using this kind of progressive loading are completely useless during the loading phase... What's the point of showing the user a page full of skeleton/loading placeholders? You might as well have just server-rendered the whole thing and made the user wait an extra second or two.
- Dalewyn 4y ago
  I remember how it was good practice to assign width and height to <img> tags. The idea being the browser would know how to render the things around the picture without needing to download the picture first, preventing the page from jumping around as the quicker and lighter HTML was downloaded and rendered first.
  - chrisweekly 4y ago
    That still is a best practice. That "jumping around" is now referred to as "CLS" -- Cumulative Layout Shift -- one of the "Core Web Vitals" metrics used to quantify performance-related UX.
    - teknopaul 4y ago
      I sometmes like CLS, it makes it look like things are happening instead of feeling like a wait time. I recently used a simple templating mechanism elem = jquery.clone() ... elem.slideDown() And this renders bits of the page moving them as it does it; slideDown() is in jquery core. It used to be popular before that biz of rendering grey squares first got invented
      - tryfinally 4y ago
        Layout shift feels fairly terrible when you're navigating to an element that is at the bottom of the page (via #id) or simply refreshing the page. There is literally nothing more annoying than clicking the wrong link because the layout shifted under the cursor at just the wrong moment. CLS is also known as "jank" for a reason.
wraptile 4y ago
> jQuery is largely not needed since Internet Explorer lost market share and there's less of a need to have lots of workarounds for it. As someone who's late to the webdev party I feel that jQuery is pretty awesome (all I ever heard is people poopoo it). The vanilla API for the DOM manipulation is just plainly awful and borderline nonsensical so I'd say jQuery is still very much needed.
- djitz 4y ago
  jQuery and the many plug-ins people wrote for it were amazing. What was not amazing was the manner in which many projects utilized them.
- NohatCoder 4y ago
  This is probably the biggest hole in vanilla js. In particular building a large DOM structure requires so many method calls. jQuery lets one use an innerHTML-ish style, but it is supposedly guarding against injection attacks in some way. I don't like the hand-wavy way it claims to guard against injections, as basically it has no way to tell what part of a string was meant to be text, and what was meant to be elements. So I ended up coding my own library. No conversion of strings to elements, so naturally no injections. Very small and simple. But saves a ton of typing when generating DOM structures in JavaScript: https://github.com/NoHatCoder/DOM_Maker https://github.com/NoHatCoder/DOM_Maker
- dspillett 4y ago
  If you are mainly using jquery for its DOM manipulation¹ rather than for browser compatibility² or things that didn't exist consistently in older browsers³ then there are much smaller libraries that do that job which may be worth looking into. https://github.com/fabiospampinato/cash https://github.com/fabiospampinato/cash or https://github.com/franciscop/umbrella https://github.com/franciscop/umbrella to give a couple of examples. Some explicitly support IE11 so you are not dropping as much support for legacy browsers as you might otherwise. Though if jQuery works for you and isn't a performance issue, then by all means keep with it. It may not be ideal, but good enough and does the job. Let the naysayers spend their time debating whether you should or not, and just get on with making things! --- [1] selection engine, chained selections, chained modifications, … [2] not the issue it once was, if you can abandon IE and old Android browsers from your supported UAs or can deal with any issues that crop up individually [3] again, if you can afford to drop support for legacy UAs

ctrlmeta 4y ago

Has anyone noticed how all UK government websites like https://www.gov.uk/ https://www.gov.uk/, https://www.nhs.uk/ https://www.nhs.uk/, https://tfl.gov.uk/ https://tfl.gov.uk/, https://coronavirus.data.gov.uk/ https://coronavirus.data.gov.uk/ have the same look-and-feel and the same UX? Are there more such examples of countries that have uniform UX for their government websites?

samwillis 4y ago
They all use this design system: https://design-system.service.gov.uk https://design-system.service.gov.uk. It's much more than just a CSS framework, it's full specifications on how to implement easy to follow and sensible UX. I wish there was more buy in by local councils of this system, there are some incredibly poor local government sites.
- was_a_dev 4y ago
  I imagine a buy-in by local councils is just that - a cost. And most councils are either poorly funded, poorly managed financially or both!
  - samwillis 4y ago
    I'm not so sure, I think there is a real NIH syndrome in local government IT services, they quite often want to build something themselves - but then as you said don't have the budget to do it properly. Using the design system, and sharing platforms using it, would be a significant cost saving. Plus the (at times) antagonistic relationship between Whitehall and local government I think means they don't want to necessarily use something they associate with the incumbent administration.
    - midenginedcoupe 4y ago
      Not really. Local gov doesn't have anything like the budget of central so they don't typically have the choice to build their own. Instead they're left with cobbling together behaviours from tens, maybe even hundreds, of disparate third-party systems, each independently solving the full stack of a given department's function. E.g. there's a dedicated system for planning approvals, another for administering blue badges, etc., etc. These third-party systems are typically very cheaply made, with a very low maintenance budget, and don't provide anything like enough customisation to adhere to someone else's design system. If you're lucky you can add your own header/footer and set some main css colours to match your council's brand.

throwaway0asd 4y ago

Deleted.

weird-eye-issue 4y ago
Tracking and spyware can be loaded after page load. And with HTTP2 it doesn't really matter if you have more than 8 resources. I doubt query selectors will have any meaningful impact on page load
- deleted 4y ago
  [deleted]

p4bl0 4y ago

> But when it’s on every page, from a web performance perspective, it equates to a lot of data. How does browser caching come into play here? Doesn't it make a difference?

firecall 4y ago
Yes, it makes a difference in network requests. It only needs to get the file from the Internet once, but the browser still has to load the file and work with it on each page load! :-) How that is handled exactly... I don't know LOL :-)
josephg 4y ago
Browsers don't share cached assets between different origin domains any more. So the browser cache would only come in to play when you're browsing between pages on the same government website. But I'm not sure that downloading 32kb on each page load is their biggest problem. It sounds like a lot of the cost of jquery is parsing that javascript on each page load - especially on low specced devices. Javascript parsing traces (as far as I know) aren't reused between page loads at all.
- radarsat1 4y ago
  This is an interesting point. Is there no way for cdn-hosted JavaScript to have their JIT results cached? I suppose the dynamic nature of JS might make that pretty difficult. (Lack of hermetic environment around modules, so global variables could change compilation results.)

rob74 4y ago

> Now I know what you may be thinking, that doesn’t sound like a lot of data, especially compared to images which can be multiple megabytes in size. But when it’s on every page, from a web performance perspective, it equates to a lot of data. Er... the utility of jQuery in 2022 aside, I would say: if it equates to a lot of data when it's on every page (of a single website), you're doing something wrong?! I mean, caching content between different domains is not a thing anymore, but on the same domain jQuery should only be loaded once?

Izkata 4y ago
Maybe they have a bundle per page and it's in each one: https://www.npmjs.com/package/jquery https://www.npmjs.com/package/jquery
ClearAndPresent 4y ago
The article goes on to explain that they are optimising for extremely low spec devices used by financially and socially disadvantaged users. The majority of their users load pages in less than 1s (likely due to caching and connection). Some users take 25s or more to load a page. It is for these edge cases they were testing.
- tomgp 4y ago
  If they're concerned about financially and socially disadvantaged users perhaps the place to start helping those people would be on the universal credit login page which currently delivers 100+ kb of javascript for a couple of form fields.
- 00deadbeef 4y ago
  They're testing against a hypothetical user on a 2G cellular connection. I can't see many situations where that would happen. Being poor doesn't mean you can't afford 3G because every data plan in the UK includes 4G as a mimimum. Often 5G is included too. You have to be extremely rural to drop down to 2G and rural people are often better off. Poorer people tend to be in urban areas that have better digital infrastructure.

myfonj 4y ago

What I miss in this otherwise excellent article is more insight about methodology. There is just murky > We run tests every day on GOV.UK pages using specific simulated devices and connection speeds. Because we can repeat these tests every day, it allows us to monitor what the changes we are making to the site are doing for real users visiting GOV.UK. with no mention whether those were all cold start loads or simulated browsing scenarios. Not wanting to diminish the effort or challenge the conclusions — I know that jQuery does quite a lot checks and feature detecting stuff when it initializes, even when it is not used (so removing it must have significant impact) — but if those measurements were done with cold start empty cache single loads each time, it might count some "extra" time (download, parse, tokenize, build AST) that usually precedes only initial load and "first run" of static library and is not present in subsequent interactions.

CJefferson 4y ago
Does any browser cache the parsing, tokenizing and built AST of Javascript libraries between website visits? Also, I don't visit UK government websites that often -- so I'd suspect I am "cold cache" whenever I do.
- myfonj 4y ago
  > Does any browser cache the parsing, tokenizing and built AST of Javascript libraries between website visits? From a quick googling, yes, at least some of them. (TIL): https://stackoverflow.com/questions/1096907/do-browsers-parse-javascript-on-every-page-load https://stackoverflow.com/questions/1096907/do-browsers-pars... >> The third time (i.e. a hot run), Chrome takes both the file and the file’s metadata from the cache, and hands both to V8. V8 deserializes the metadata and can skip compilation. — https://v8.dev/blog/code-caching-for-dev https://v8.dev/blog/code-caching-for-dev > Also, I don't visit UK government websites that often -- so I'd suspect I am "cold cache" whenever I do. For first visit with given browser and profile (or incognito mode), sure. But if you visit more than single page during same session, you probably have more than a "cold cache". That measured page mentioned in the article seems to be guidepost with only most important excerpt of the content, so it seems plausible you would "click around a bit" from there.

yokoprime 4y ago

jQuery was nice in a pre transcompiled js world, but those days are long gone.

toinbis 4y ago
No, they are not gone at all.
Beltalowda 4y ago
I very intentionally avoid that world when I can because the tooling overhead is just too much, and the general state of the tooling does not leave me impressed. I don't think I'm the one, and there are plenty of older sites/apps just churning along. Don't confuse popularity with ubiquity.

Frontend_devs 4y ago

At the end he said a certain cohort of users, but how many users were actually in that cohort? JQuery is an older technology. I find it hard to believe something made to work on older hardware / internet is affecting performance that much. We have 5G and stupid fast chips in phones now. I’m skeptical. Performance issues are usually database queries or code compiling / “waking up” some server function.

kwhitefoot 4y ago
You have all those things, I have some of them, many people do not.
david_allison 4y ago
> We have 5G and stupid fast chips in phones now. The people who need government services the most won't have this
- atonse 4y ago
  Do we have hard data on this? Just want to make sure we aren’t just making assumptions. I would think most folks of any income would replace their phones even every 5 years, simply because the batteries would’ve died. And I’d think any phone in the past 5 years would be reasonably decent. Even the ultra cheap ones. Plus with networks, cell carriers are at least incentivized in general to get folks off 3g into lte since it’s cheaper for them to not have to maintain N systems.
  - mejutoco 4y ago
    IMO the key concept is that the government does not serve most folks. It serves all folks, so it is good to be slightly conservative in terms of bandwidth. For data maybe Android share in Europe could be a start, or people with prepaid plans. In my experience both are much more prevalent in Europe than in the US.
  - youngtaff 4y ago
    GDS have it (or at least proxies for some of it) as part of their RUM data Device memory is a good proxy for how powerful the phone is Effective connection type will give some data on network performance

bar8uyr 4y ago

That's nice but when you load the actual universal credit login page it needs nearly 400kb of reactjs - not sure about after that, don't have an account.. Some (most?) of the other gov uk sites have megabytes of js on them.. eg. https://coronavirus.data.gov.uk/details/testing?areaType=nation&areaName=England https://coronavirus.data.gov.uk/details/testing?areaType=nat...

uwuemu 4y ago
Yea, I was shocked they talk about stripping jQuery as if they have these super fast, snappy pages and then ... it's React. WHAT? React is a lot if things to a lot of people, but fast loading (on an underpowered device with bad connection, which are the conditions they're talking about) isn't one of them. When I imagine a grandma trying to login into a gov site and loading a meg of react related garbage which then runs like ass anyways, I want to punch a Zucc in his cold blooded alien dick.

petesergeant 4y ago

> But when it’s on every page, from a web performance perspective, it equates to a lot of data It's not cached?

roschdal 4y ago

jQuery is still wonderful.

awestroke 4y ago
Try new stuff every once in a while. You might be surprised
- zach_garwood 4y ago
  Try old stuff every once in a while. They still work. You might be surprised.
  - awestroke 4y ago
    I've worked with a lot of technologies over the years. Some I still consider to be good, others I am happy to leave behind. jQuery is in the latter camp. I have worked with these technologies professionally: - Vanilla js targeting ie5+ - jQuery - MooTools - Angular - KnockoutJS - virtual-dom - React - Typescript I've also tried out a handful more in my spare time, like Vue, Preact, and Elm. If your list does not include any modern stuff, then your opinion is worth zero to me, because your reference for what's good is horribly outdated. If your list matches or exceeds mine, and you still prefer jQuery, then I'll be bewildered but at least your opinion is interesting.
- exodust 4y ago
  There's a JS library called New Stuff? For me, I use Jquery because it works. Light and low impact. Syntax is good for readability.
  - awestroke 4y ago
    jQuery has its own syntax?
    - exodust 4y ago
      https://www.w3schools.com/jquery/jquery_syntax.asp https://www.w3schools.com/jquery/jquery_syntax.asp

xanthippos 4y ago

However the page uses jQuery? <script type='text/javascript' src='https://insidegovuk.blog.gov.uk/wp-includes/js/jquery/jquery.min.js?ver=3.6.0 https://insidegovuk.blog.gov.uk/wp-includes/js/jquery/jquery...' id='jquery-core-js'></script>

solar-ice 4y ago
insidegovuk.blog.gov.uk is not gov.uk.
robin_reala 4y ago
The blog is run by a separate agency inside the UK government for various historical reasons.

stefantalpalaru 4y ago

goodpoint 4y ago

""" Since these users have the slowest devices, they’ll need the most help to make sure their visit to GOV.UK is as fast, efficient and as cheap as possible """ If only web developers cared about *all* users the web would be much less crappy.

bluenotebo0k 4y ago

Honestly I feel like jQuery is my "secret weapon" similar to how Lisp is Paul Graham's in Beating the Averages. It's so much more productive than vanilla JS with negligible impact on performance, especially with caching.

FlyingSnake 4y ago
JQuery has better alternatives like Alpine.js or HTMX which are much lighter and easy to use.
Kiro 4y ago
What are you doing with jQuery that you can't easily do in vanilla JS? I understand the argument before we had querySelector, but not now.
- francisofascii 4y ago
  JQuery is terse, which helps with productivity. document.getElementById('id').style.display = 'none' vs $('#id').hide();

fleddr 4y ago

The team at gov.uk is doing an excellent job regarding web performance, credit where credit is due. In many ways role model behavior. Still, the results are such a stretch as to not have that much meaning. They have to descent all the way to 2G to see any meaningful difference, and I'm assuming they are cold visits (typical in lab-based testing). For those exceptional users, this creates a difference from very poor (12 seconds) to still poor (9 seconds). Probably less because they'd normally have a warmed up cache. Is it empathetic to improve performance for those users? Very much yes, do it as far as you budget allows for. But as it comes to jQuery specifically, the conclusion is that its negative impact is negligible.

kllrnohj 4y ago
> They have to descent all the way to 2G to see any meaningful difference Somewhat shockingly according to https://www.cambridgewireless.co.uk/news/cw-journal/why-2g-wants-live-forever/ https://www.cambridgewireless.co.uk/news/cw-journal/why-2g-w... 12% of mobile network connections in the UK are still on 2G? That's surprisingly high usage, and would definitely be worth optimizing. Although usage that high would then explain why 2G shutdown is still 10 years(!) away for the UK. Phones still on 2G also seem likely the be phones that don't have the best of web browsers, so cold visits may still be more representative than it seems like it should be.
- seydor 4y ago
  Maybe it's home alarms
- yardstick 4y ago
  I wouldn’t read too much into 2G figures meaning 2G-only phones (or 3G). In my experience once you get out of populated areas connections often drop to 2G, even on my 5G capable iPhone. It’s mostly a coverage issue not a handset issue.
  - GordonS 4y ago
    It varies wildly depending on which network you are on. For example, on EE I get 4G coverage almost everywhere - even across remote parts of the Scottish Highlands and Islands. OTOH, my missus is with Three, and she rarely gets 4G at all outside of towns and cities.

remram 4y ago

Why is jQuery "render-blocking"? Wouldn't loading it at the end of the HTML or with the `async` attribute fix that?

sanitycheck 4y ago

Honestly if they'd just used jQuery instead of React all the way through they'd be loading a lot less JS and performance would be vastly better on those slow old devices. After all, jQuery was made for the slow old devices, in the time they were not slow or old. The real problem is that jQuery is not new and shiny, and nobody wants to be doing jQuery in 2022.

commandlinefan 4y ago
In addition to which, jQuery was actual useful - React is just pure overhead with no real functionality.
- klysm 4y ago
  I don’t understand how you can claim that react is pure overhead. Sure it does have overhead, but it’s also a really useful abstraction. How composable abstraction for UI components that enables local reasoning not functionality. jQuery is just pure overhead with no real functionality compared to vanilla js.
  - smarkov 4y ago
    React is vastly overused. You don't need every single element in your page to be a separate component when 95% of your site is pure text and you have an occasional form or a button here and there. If you're making an actual application (think Discord/Spotify) then yes, it becomes a necessary abstraction. Your personal website or news website (or many others) using React is a waste of my bandwidth and CPU cycles.
    - dbud 4y ago
      Don’t forget about server side rendering. If you only need to serve static, you don’t really need any Jack, anyway.
    - klysm 4y ago
      Agreed it doesn’t make sense for a lot of things that could just be static sites. But you also wouldn’t need jQuery on such sites so I’m not sure why that matters.

SavageBeast 4y ago

"But when it’s on every page, from a web performance perspective, it equates to a lot of data." Caching? Set cache headers such that the jquery.js rarely/almost never expires and requires a re-fetch?

caeril 4y ago

> But when it’s on every page, from a web performance perspective, it equates to a lot of data. Author of this article is apparently unaware of browser caches. > JavaScript is known as a “render-blocking” resource. Yeah, if only there was, like, an async attribute or something. > The graph below shows time to interactivity dropped from 11.34 seconds to 9.43 seconds So, jQuery is way too heavy for these people, but interaction tracking analytics (these packages usually start around 200kB) is perfectly fine? > total page load time dropped from 19.44 seconds to 17.75 seconds Burying the lede here, if my team celebrated a 17 second page load, we'd be fired on the spot. Going out on a limb here to suggest jQuery is the least of their problems.

denton-scratch 4y ago

> especially compared to images which can be multiple megabytes in size Please don't put images of multi-megabytes size on web-pages. My boss put a 10-megabyte image on the homepage of one of our clients; he fancied himself a photographer, and he took the photo. It gave a 10s page-load time from a desktop PC. I offered to shrink it for him, which would have taken 2 minutes; he wasn't having it. I don't think it was pride in his photo; I think the client wasn't paying their bills, and he wanted to punish them. But please, shrink your images to fit on the screen of your most-capable target device. There's no need for super-hi-res posters on websites.

chiefalchemist 4y ago
Adding...please use the img tag's sizes and srcset to maximize performance. Please stop using desktop sized images across all viewports when using background images.

chippy 4y ago

Couple of relevant previous discussions around this subject: Gov.uk drops jQuery from their front end (90 days ago|437 comments) https://news.ycombinator.com/item?id=31434434 https://news.ycombinator.com/item?id=31434434 How and why we removed jQuery from Gov.uk (5 days ago|43 comments) https://news.ycombinator.com/item?id=32423422 https://news.ycombinator.com/item?id=32423422

seydor 4y ago

Maybe. JQuery reduces the number of characters you need to write compared to vanillaJS , so if their websites use some JS , it was probably a benefit. Now tell me about the megabytes of javascript that their new fancy frameworks download, uncached

pkrumins 4y ago

I’m still a huge fan of jQuery. When I start a new web project then the first thing I do is add jQuery to the project. This is pretty much the only dependency that I ever use in my web projects. Nothing can beat the short “$” function and effects such as fadeIn, fadeOut, and others.

deleted 4y ago

[deleted]

pavelevst 4y ago

It’s so nice to know that someone still case about web performance. In a world where it’s quite normal to see website with static information and 1-5MB of compressed JS, which takes long time to load and makes your device hot