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

front-end performance sprint #1764

Closed
mhl opened this Issue Sep 14, 2015 · 7 comments

Comments

Projects
None yet
4 participants
@mhl
Contributor

mhl commented Sep 14, 2015

The idea of this is to spend a few days (Monday 21st of September to Wednesday 23rd of September) working with @wrightmartin and / or @zarino to focus on getting down page-load times for Pombola sites, and look at ways we could improve the experience for people using the site by reducing asset sizes, changing load order, using image sprites, etc.

It would also be a good chance to look at questions like "is it still worth using Modernizr?", related to #1686

@mhl mhl added the 1 - Contender label Sep 14, 2015

@mhl mhl changed the title from [placeholder] front-end performance sprint to front-end performance sprint Sep 15, 2015

@wrightmartin

This comment has been minimized.

Show comment
Hide comment
@wrightmartin

wrightmartin Sep 15, 2015

Member
  • Shall we give ourselves a target? Say ~10% of requests, ~20% filesize?
  • We shouldn't worry about any of the more difficult optimisations (critical path rendering etc) until we've taken care of the low hanging fruit
  • We should make this process as repeatable as is sensible, so we could do it at regular intervals (every year?) and apply it to all of our sites.
  • We should draw up rough guidelines for new projects, so that we always start from a performant place
Member

wrightmartin commented Sep 15, 2015

  • Shall we give ourselves a target? Say ~10% of requests, ~20% filesize?
  • We shouldn't worry about any of the more difficult optimisations (critical path rendering etc) until we've taken care of the low hanging fruit
  • We should make this process as repeatable as is sensible, so we could do it at regular intervals (every year?) and apply it to all of our sites.
  • We should draw up rough guidelines for new projects, so that we always start from a performant place
@wrightmartin

This comment has been minimized.

Show comment
Hide comment
@wrightmartin

wrightmartin Sep 21, 2015

Member

Pombola specific

  • Ensure we're only loading CSS and JS that is used for the current domain (Eg. no mzalendo assets loading on People's Assembly)
  • Ensure we're only loading assets of 'one-off' pages on the page they are needed for (Eg. Mzalendo women's page)
  • Look at jQuery dependencies - try and use native JS if possible
  • Consider replacing or removing social media plugins
  • DNS prefetch external domains (Eg Disqus – http://calendar.perfplanet.com/2012/speed-up-your-site-using-prefetching/)
  • Check that we're using Modernizr, can we remove/replace it? #1774

General performance enhancements

  • Make sure CSS is at the top, JS at the bottom
  • Combine and gzip all JS files
  • Image compression #1769
  • Ensure images are rendered at the size they are required (could use srcset for this) #1791
  • Minimise requests
  • Use sprites for CSS images (using Compass?)
  • Swap pngs for SVGs on appropriate assets (fallback to pngs with native JS capability test) #1782
<script>
  (function flagSVG() {
    var ns = {'svg': 'http://www.w3.org/2000/svg'};
    if(document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1")) {
      document.getElementsByTagName('html')[0].className += ' svg';
    }
  })();
</script>

People's Assembly

  • Split the logo up - the caption bit shouldn't be part of the image #1776
  • The infographic pngs on the homepage are rendering at full size, but we only need the top #1778
  • Remove uneeded web fonts - Oswald, Inconsolata #1773

Mzalendo

  • Can we stop the twitter timeline on the homepage from rendering images? (added 200kb completely out of our control) #1770
  • Resize and recompress the parliament image on the homepage, use srcset #1775
  • The homepage blog feed is a 20KB ajax request. Can we cut this down? Or make it server-side? New ticket: #1787

ShineYourEye

  • Homepage spinner images are larger than they're ever displayed #1779

Credits

Member

wrightmartin commented Sep 21, 2015

Pombola specific

  • Ensure we're only loading CSS and JS that is used for the current domain (Eg. no mzalendo assets loading on People's Assembly)
  • Ensure we're only loading assets of 'one-off' pages on the page they are needed for (Eg. Mzalendo women's page)
  • Look at jQuery dependencies - try and use native JS if possible
  • Consider replacing or removing social media plugins
  • DNS prefetch external domains (Eg Disqus – http://calendar.perfplanet.com/2012/speed-up-your-site-using-prefetching/)
  • Check that we're using Modernizr, can we remove/replace it? #1774

General performance enhancements

  • Make sure CSS is at the top, JS at the bottom
  • Combine and gzip all JS files
  • Image compression #1769
  • Ensure images are rendered at the size they are required (could use srcset for this) #1791
  • Minimise requests
  • Use sprites for CSS images (using Compass?)
  • Swap pngs for SVGs on appropriate assets (fallback to pngs with native JS capability test) #1782
<script>
  (function flagSVG() {
    var ns = {'svg': 'http://www.w3.org/2000/svg'};
    if(document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1")) {
      document.getElementsByTagName('html')[0].className += ' svg';
    }
  })();
</script>

People's Assembly

  • Split the logo up - the caption bit shouldn't be part of the image #1776
  • The infographic pngs on the homepage are rendering at full size, but we only need the top #1778
  • Remove uneeded web fonts - Oswald, Inconsolata #1773

Mzalendo

  • Can we stop the twitter timeline on the homepage from rendering images? (added 200kb completely out of our control) #1770
  • Resize and recompress the parliament image on the homepage, use srcset #1775
  • The homepage blog feed is a 20KB ajax request. Can we cut this down? Or make it server-side? New ticket: #1787

ShineYourEye

  • Homepage spinner images are larger than they're ever displayed #1779

Credits

@wrightmartin

This comment has been minimized.

Show comment
Hide comment
@wrightmartin

wrightmartin Sep 21, 2015

Member

Mzalendo

Homepage
screen shot 2015-09-21 at 09 04 49

Person page
screen shot 2015-09-21 at 09 05 06

Member

wrightmartin commented Sep 21, 2015

Mzalendo

Homepage
screen shot 2015-09-21 at 09 04 49

Person page
screen shot 2015-09-21 at 09 05 06

@wrightmartin

This comment has been minimized.

Show comment
Hide comment
@wrightmartin

wrightmartin Sep 21, 2015

Member

People's Assembly

Homepage
screen shot 2015-09-21 at 09 06 06

Person page
screen shot 2015-09-21 at 09 07 23

Member

wrightmartin commented Sep 21, 2015

People's Assembly

Homepage
screen shot 2015-09-21 at 09 06 06

Person page
screen shot 2015-09-21 at 09 07 23

@wrightmartin

This comment has been minimized.

Show comment
Hide comment
@wrightmartin

wrightmartin Sep 21, 2015

Member

ShineYourEye

Homepage
screen shot 2015-09-21 at 09 08 27

Person page
screen shot 2015-09-21 at 09 09 12

Member

wrightmartin commented Sep 21, 2015

ShineYourEye

Homepage
screen shot 2015-09-21 at 09 08 27

Person page
screen shot 2015-09-21 at 09 09 12

@dracos

This comment has been minimized.

Show comment
Hide comment
@dracos

dracos Sep 21, 2015

Member

For interest, as I had a look, mobile width, ignoring the 300Kb ish Twitter timeline (as that's below the fold, perhaps it could somehow only load if you're scrolling down to it…? Or proxy it to remove the images I guess), I make the Mzalendo front page 224Kb, of which:

  • 131Kb images (of which parliament image is 104Kb)
  • 33Kb jQuery
  • 23Kb Google feeds JavaScript (for latest news; aside would be good if it could link to the blog rather than just say "Loading news…")
  • 21Kb CSS
  • 11Kb site JavaScript (5Kb countdown script) (looks like the "both" JS could be got rid of with not much work since Django 1.5! :) )
  • 5Kb page

So 50Kb without JS, 100Kb with JS, looks achievable. And a hard challenge would be something like 20Kb/50Kb? ;)

Member

dracos commented Sep 21, 2015

For interest, as I had a look, mobile width, ignoring the 300Kb ish Twitter timeline (as that's below the fold, perhaps it could somehow only load if you're scrolling down to it…? Or proxy it to remove the images I guess), I make the Mzalendo front page 224Kb, of which:

  • 131Kb images (of which parliament image is 104Kb)
  • 33Kb jQuery
  • 23Kb Google feeds JavaScript (for latest news; aside would be good if it could link to the blog rather than just say "Loading news…")
  • 21Kb CSS
  • 11Kb site JavaScript (5Kb countdown script) (looks like the "both" JS could be got rid of with not much work since Django 1.5! :) )
  • 5Kb page

So 50Kb without JS, 100Kb with JS, looks achievable. And a hard challenge would be something like 20Kb/50Kb? ;)

@wrightmartin

This comment has been minimized.

Show comment
Hide comment
@wrightmartin

wrightmartin Sep 28, 2015

Member

Post sprint measurements

PA

Homepage
screen shot 2015-09-28 at 10 18 58

Person page
screen shot 2015-09-28 at 10 21 48

Mzalendo

Homepage
screen shot 2015-09-28 at 10 22 55

Person page
screen shot 2015-09-28 at 10 24 08

ShineYourEye

Homepage
screen shot 2015-09-28 at 10 26 00

Person page
screen shot 2015-09-28 at 10 26 33

Member

wrightmartin commented Sep 28, 2015

Post sprint measurements

PA

Homepage
screen shot 2015-09-28 at 10 18 58

Person page
screen shot 2015-09-28 at 10 21 48

Mzalendo

Homepage
screen shot 2015-09-28 at 10 22 55

Person page
screen shot 2015-09-28 at 10 24 08

ShineYourEye

Homepage
screen shot 2015-09-28 at 10 26 00

Person page
screen shot 2015-09-28 at 10 26 33

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