Homepage code and image optimization

[MirandaEcho]

No description provided.

[MirandaEcho]

• Replace the JS lazy-loader with the Wordpress feature plugin (<1h) - Implement on staging, check mobile pagespeeds before and after (esp on Safari), and report back
• Reduce image size in zones https://github.com/INN/umbrella-mstoday/blob/master/wp-content/themes/mstoday/homepages/zones/mstoday-zones.php#L8 (<2h)
• Research ways to display most recent tweets (3) in a less resource-intensive way than the current embedded feed (30min)

[benlk]

Replace the JS lazy-loader with the Wordpress feature plugin (<1h) - Implement on staging, check mobile pagespeeds before and after (esp on Safari), and report back

There are potentially two image lazy-loaders in effect here: wp-smush-pro and autoptimize.

Using http://mstoday.staging.wpengine.com/2020/06/15/ihl-college-board-to-approve-relocating-confederate-monument-from-heart-of-ole-miss-campus/ as an example, here's Chrome's Lighthouse report:

And Safari's "Timelines" audit, which isn't anywhere near as featureful as Chrome:

Steps taken:

• disabled Autoptimize's lazy-loader and CDN

Afterwards, Chrome and Safari:

---

Nevermind, then. This looks like a performance detriment.

[benlk]

Research ways to display most recent tweets (3) in a less resource-intensive way than the current embedded feed (30min)

Twitter's own widget generator does not offer this option, at https://publish.twitter.com/?dnt=1&query=https%3A%2F%2Ftwitter.com%2FMSTODAYnews&widget=Timeline

Options:

• Not embed a Twitter widget. The solution for fast-moving Tweet-based coverage of breaking stories would then be to render a single tweet in a widget when editors want to push breaking news — I've set up a demonstration in a Text Widget in the "Main Sidebar" widget area on http://mstoday.staging.wpengine.com/
• Use a third-party WordPress plugin that fetches, caches, and displays MS Today's feed.

[MirandaEcho]

Can we do some quick research with the remaining time to see if there's a plugin that would work for this?

[joshdarby]

@MirandaEcho A few options for Twitter:

• https://wordpress.org/plugins/custom-twitter-feeds/

  • specifically mentions caching and performance on the plugin page
  • apparently has a lot of configuration options

• https://wordpress.org/plugins/ray-social-feeds-for-twitter/#description

  • 0 reviews and less than 10 installs
  • requires API keys
  • specifically has fields for caching duration on the widget

• https://jetpack.com/support/extra-sidebar-widgets/twitter-timeline-widget/

  • allows configuration of number of tweets shown
  • doesn't require API key
  • doesn't specifically say anything about caching, but since it's built into JetPack I imagine it has some sort of performance considerations

[MirandaEcho]

Great, let's give that first one a shot on staging. We can wait until we do the other deploys first though, so:

1. Get a benchmark pagespeed after the other updates
2. Replace the twitter feed
3. Test pagespeed again.

[joshdarby]

@MirandaEcho We'll need to ask Lauchlin to provide us with these 4 keys in order to configure the Twitter plugin:

• Consumer key
• Consumer secret
• Access token
• Access token secret

[MirandaEcho]

@joshdarby Lauchlin wasn't able to find those in her twitter account, but she sent the creds and they're in 1Pass so we can grab the needed keys ourselves.

[joshdarby]

@MirandaEcho The twitter widget is now enabled at http://mstoday.staging.wpengine.com/

[MirandaEcho]

Thanks @joshdarby! Are we able to tell if it does better performance-wise?

[joshdarby]

@MirandaEcho The prod site has a score of 2/100 while the staging site now has a score of 22/100. However, staging doesn't have all of the caching and whatnot that prod does, so it's kind of hard to get a full scope of what the performance increase will be.

However, lighthouse isn't complaining about the new twitter widget, which is a good sign.