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.

Sign up for GitHub

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

Jump to bottom

Improve page speed #1421

Open
8 tasks done
zarino opened this issue Feb 6, 2019 · 2 comments
Open
8 tasks done

Improve page speed #1421

zarino opened this issue Feb 6, 2019 · 2 comments

Comments

@zarino
Copy link
Member

zarino commented Feb 6, 2019 •
edited by dracos
Loading

A few ideas:

  • Enable GZIP on the HTML.
    • Done! Homepage, for example, reduced from 140 KB to ~14 KB.
  • Javascript is blocking – move it to the footer, or make it async?
    • If we move it, we’ll need to update/remove the inline <script> tags that expect $ to be defined.
  • Wrap respond.js in an IE6–8 conditional comment – or remove it entirely. (IE 6–8 accounts for less than 0.1% of visits.)
  • Use the more modern document.body.className… JS snippet at the top of the body to add a JS class for CSS to use.
  • We almost certainly don’t need foundation.reveal.js in the footer.
  • If we stop hiding the vote summary "Details" button until hover (281fb42) – a good idea anyway – then we can remove custom.modernizr.js entirely.
  • Replace foundation.magellan.js (and foundation.js itself!) with our own sticky sidebar solution – using CSS position: sticky and intersectionObservers for highlighting the current page section.
  • Cut down the number of Source Sans font weights we request from Google – it looks like we don‘t use 300 at all in our CSS, and we could probably replace font-weight: 600 with font-weight: 700 without much visual difference.
@dracos dracos pinned this issue Feb 6, 2019
@zarino zarino unpinned this issue Aug 1, 2019
zarino added a commit that referenced this issue Jan 25, 2021
@zarino
Remove IE8 CSS workarounds
75804af 
IE7 and IE8 accounted for 0.008% of sessions in Q4 2020. Supporting
them isn’t worth the complexity it adds to the codebase.

Part of #1421.
zarino added a commit that referenced this issue Jan 25, 2021
@zarino
Remove Foundation 'Reveal' modal CSS and JS
f88e583 
Looks like the last time we used the Reveal modal component from
Foundation was in 2015 (8bb64f1).

If we ever need it again, we can just re-include the files.

Part of #1421.
zarino added a commit that referenced this issue Jan 25, 2021
@zarino
Fix conflicting no-js/js html/body classes
dd4659b 
Looks like the `no-js` class on the html element was a leftover from
Modernizr.js, which was removed in 2019 (d12d92b).

We have styles which rely on a `js` class being added to the body
element, so I’ve kept that, but moved the piece of JavaScript which
adds the `js` class to right after the opening of the body element,
which should make it run earlier than its previous location in main.js.

Part of #1421.
zarino added a commit that referenced this issue Jan 25, 2021
@zarino
Move JavaScript to end of body, and other improvements
37aa234 
* Move all `<script>` tags from middle of `<head>` to end of `<body>`
* Add caching timestamps to all `<script>` tags
* Remove riveted, scrolldepth, and engagement tracking
* Remove unused jquery.fittext plugin
* Move assorted JavaScript bits from end of footer.php to main.js

Part of #1421.
zarino added a commit that referenced this issue Jan 25, 2021
@zarino
Remove unused 300 weight of Source Sans Pro
5788ede 
It’s tempting to combine the 600 and 700 weights into one, but 600
(currently used for headings) doesn’t provide enough contrast with
body text when use, for example, in `<strong>` tags, and 700 (currently
used for `<strong>` tags) is too heavy for headings.

Part of #1421.
@zarino
Copy link
Member Author

zarino commented Jan 25, 2021

I’ve started work on this in the 2021-performance-improvements branch.

zarino added a commit that referenced this issue Jan 26, 2021
@zarino
Simplified meta charset and viewport tags
073cc7c 
Cut down on some cargo-culting :-)

No need for the viewport tag to forbid user scaling. `width=device-width`
is also optional these days, as mobile browsers just do the right thing
by default.[1][2] Only initial-scale is required.

[1]: h5bp/html5-boilerplate#1099
[2]: GoogleChrome/lighthouse#641 (comment)

(Note also no need for `HandHeldFriendly` meta tag, since that was only
for some old Blackberry devices, no need for `MobileOptimized` since
that was only for very old versions of Windows Mobile, and no need for
a `X-UA-Compatible` tag since IE will automtically render in Standards
Mode when a valid <!doctype> is present and the user hasn’t set any
browser options to always render in compatibility mode.)

While I was there, I tidied up the charset tag too, although we serve
theyworkforyou.com with a charset HTTP header, so most browsers will
ignore this in-page tag anyway.

Part of #1421.
zarino added a commit that referenced this issue Jan 29, 2021
@zarino
Scrolling MP page sidebars with CSS position:sticky
faec2f6 
These sidebars were the last place we were using Foundation.js
(for its Magellan sticky positioning module) so replacing them with
position:sticky means we can drop all Foundation JavaScript.

Position:sticky requires a full height parent element, so we upgrade
the MP page .person-panels to use flex layout, which gives us full
height columns automatically.

One thing we’ve lost with the removal of Foundation Magellan is
highlighting of the "current" sidebar link. We could do this via the
IntersectionObserver API if we wanted, but for now I’m not sure it’s
worth it.

Part of #1421.
@zarino zarino mentioned this issue Jan 29, 2021
Merged
dracos pushed a commit that referenced this issue Feb 3, 2021
@zarino @dracos
Remove IE8 CSS workarounds
6c5ca1a 
IE7 and IE8 accounted for 0.008% of sessions in Q4 2020. Supporting
them isn’t worth the complexity it adds to the codebase.

Part of #1421.
dracos pushed a commit that referenced this issue Feb 3, 2021
@zarino @dracos
Remove Foundation 'Reveal' modal CSS and JS
2d902d4 
Looks like the last time we used the Reveal modal component from
Foundation was in 2015 (8bb64f1).

If we ever need it again, we can just re-include the files.

Part of #1421.
dracos pushed a commit that referenced this issue Feb 3, 2021
@zarino @dracos
Remove unused 300 weight of Source Sans Pro
dd7a1e8 
It’s tempting to combine the 600 and 700 weights into one, but 600
(currently used for headings) doesn’t provide enough contrast with
body text when use, for example, in `<strong>` tags, and 700 (currently
used for `<strong>` tags) is too heavy for headings.

Part of #1421.
dracos pushed a commit that referenced this issue Feb 3, 2021
@zarino @dracos
Simplified meta charset and viewport tags
6a61a3b 
Cut down on some cargo-culting :-)

No need for the viewport tag to forbid user scaling. `width=device-width`
is also optional these days, as mobile browsers just do the right thing
by default.[1][2] Only initial-scale is required.

[1]: h5bp/html5-boilerplate#1099
[2]: GoogleChrome/lighthouse#641 (comment)

(Note also no need for `HandHeldFriendly` meta tag, since that was only
for some old Blackberry devices, no need for `MobileOptimized` since
that was only for very old versions of Windows Mobile, and no need for
a `X-UA-Compatible` tag since IE will automtically render in Standards
Mode when a valid <!doctype> is present and the user hasn’t set any
browser options to always render in compatibility mode.)

While I was there, I tidied up the charset tag too, although we serve
theyworkforyou.com with a charset HTTP header, so most browsers will
ignore this in-page tag anyway.

Part of #1421.
@dracos
Copy link
Member

dracos commented Feb 5, 2021

All deployed. webpagetest shows gentle improvement:
before: https://webpagetest.org/video/compare.php?tests=210205_DiQV_b5693a68c81de06206e68d6434018ba5-r:2-c:0
after: https://webpagetest.org/video/compare.php?tests=210205_DiTJ_3d75bdfe4401ef922c605f0a12e8dd13-r:2-c:0
It looks like all of foundation-icons is included only for social icons on MP profile page, feels like we could manually include just those? I have done that and turned on display=swap for the Google font, which leads to:
https://webpagetest.org/video/compare.php?tests=210205_DiFQ_123c48ff0558e32a3445a07cae70bc43-r:3-c:0
Will that do?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@dracos @zarino