Improve site performance / increase resulting performance-based-SEO score

[lukefretwell]

via https://web.dev/measure/

@jlyon @aschmoe can we create a punchlist of items that will help us increase performance, both on city template but also dev?

City template

• [x] Remove social wall from homepage
• [x] Remove map from homepage

Development

[aschmoe]

Using Jackson as a base metric https://web.dev/measure/:

https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fwww.jacksonms.gov%2F

First Contentful Paint

• [ ] Evaluate 3rd party plugins / embed strategies for impact
  • [ ] Youtube in case of jackson not ideal
• [ ] Look at our own plugin filter / action flow, could it be improved, any redundancy
  • [ ] Previously tried to improve # of db queries per page on proud-teasers, perhaps there are other gains?
• [ ] Additional caching
  • [ ] Play with wt3 settings, perhaps we can get some additional benefits out of the box
  • [ ] Everything appropriately gzipped?
  • [ ] CDN all assets?
• [ ] Wordpress page optimizations
  • [ ] Look into ability to
  • [ ] Is
  • [ ] Possible to play nice with SO builder + columns?

Speed Index | Largest Contentful Paint | Time to Interactive | Total Blocking Time

• [ ] Evaluate impact of bootstrap 4.x upgrade
• [ ] Upgrade bootstrap to 4.x?
  • [ ] Apply to patterns repo
  • [ ] Apply to all plugins
  • [ ] Apply to service center
  • [ ] Apply to my.proudcity
• [ ] Run javascript through optimization tool
• [ ] Drop cruft if possible
• [ ] Async load non-critical scripts
  • [ ] Codesplit core / plugin / library code?
  • [ ] Pri1: Could at least codesplit service center
  • [ ] Possible to hydrate default service center view on interaction (AKA STILL don't load / run angular right away even if on page)?
• [ ] Inline critical scripts (pri 2) on page)?
  • [ ] Move init calls into separate function to avoid loading angular etc unnecessarily
• [ ] Upgrade jQuery
  • [ ] Does newer version get us benefits?
  • [ ] jQuery light of some kind work with plugins?
• [ ] Run CSS through optimization build to identify critical (aka needed "above the fold" for instance) vs non critical css
  • [ ] https://github.com/addyosmani/critical/blob/master/README.md
• [ ] Drop cruft if possible
• [ ] Async load non critical css (pri 2)
• [ ] Inline critical css (pri 2)
• [ ] Alter images to async offscreen
• [ ] Alter images to utilize a low resolution initial fetch (pri 2)

[lukefretwell]

@aschmoe would it be possible to review the checklist you created and update to what items we should focus on? Are there ones here we've done that can be removed?