Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drop jQuery/Bootstrap from pages that don't need them #1023

Open
Keno opened this issue Sep 30, 2020 · 4 comments
Open

Drop jQuery/Bootstrap from pages that don't need them #1023

Keno opened this issue Sep 30, 2020 · 4 comments

Comments

@Keno
Copy link
Member

Keno commented Sep 30, 2020

We indiscriminately include jQuery/Bootstrap on every page. I do not believe (and neither does Google's performance assesment, which is what I was looking at) that we're actually using them on most pages. We should drop them if we don't to improve site performance.

@tlienart
Copy link
Contributor

tlienart commented Oct 1, 2020

hmm as far as I'm aware every page has the menu bar (e.g. mobile), and the menu bar requires bootstrap + jQuery. No doubt there could be a slimmed down version (for bootstrap it's reasonably easy to do for jQ not sure) but it's typically not trivial to adjust these things. If someone versed in web dev could give it a shot, that'd be great (i.e.:

  • review the menu and see whether it could be re-written in a way that doesn't require jQuery
  • check that a jQuery-free alternative doesn't otherwise break the site (e.g. landing page)
  • (easy) add purgecss pass to the deployment to get a stripped down version of bootstrap with only what we need

I could do the last point but the first two requires someone who knows their way with frameworks

@ViralBShah
Copy link
Member

Should this issue be migrated to the Franklin repo?

@tlienart
Copy link
Contributor

tlienart commented Dec 6, 2021

uh no, this is about the page layout not about anything Franklin controls.

Basically pages are built like this:

[[ insert HEAD.HTML ]]
[[ insert converted content from Franklin ]]
[[ insert FOOT.HTML ]]

head and foot are things that indicate what CSS is needed or what Javascript is needed; you can have rules such as for instance not having highlight.js loaded on pages without code blocks or only loading specific interactive javascript stuff for blog posts that need them; but Bootstrap + jQuery is what the base layout used from the previous site and it was just ported to the current one to reproduce the previous layout.

There's no doubt we only use a small portion of this combo, but unfortunately thinning this to a compact "what we use" is hard and annoying and requires a lot of careful testing to avoid issues with responsiveness etc. Someone with lots of experience in front-end web dev stuff (and bootstrap) could be helpful here.

I think the suggestions I made above still hold; adding purgecss` will help significantly reduce the CSS footprint (though even this needs careful testing); in terms of jQuery, I don't know where it's needed/used but before we know that 100% removing it will break the website in unknown ways.

In short: solving this issue requires a fair bit of tedious web dev work; it might be best just re-doing the layout completely without javascript (or as little as possible) but that also requires a fair bit of work so that's where this issue is stuck...

@ViralBShah
Copy link
Member

I don't think we should worry about it much. We can just leave this open...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants