Site & homepage code analysis

[benlk]

What we reviewed:

• Homepage layout
• User engagement
• Pagespeed
• SEO analysis

Observations and recommendations

Homepage layout:

• Many stories have short excerpts, only one line of text on desktop. With large images on many stories, on smaller screens it's hard to tell whether the image is for the text above or below the image. Switching to display images beside the headline and excerpt may improve the legibility of the homepage on smaller screens, as well as increasing density of information.
• Additionally, since the image tags on the homepage support srcsets, it may be possible for smaller displayed images to load smaller images over the wire.
• The site uses a javascript-based image lazyloader, however this causes delays for the user. All major browsers save IE (deprecated) and Safari support the loading attribute for lazy loading of images, and it looks like Safari is making progress on adding support for that in the next release. WordPress may enable this in a future release, but for now do we want to continue with the JS loader or try the WordPress feature plugin? https://wordpress.org/plugins/wp-lazy-loading/
• There are too many items in the global nav; on screens between 900 and 768px wide the right-hand section of the global nav (search, donate, subscribe) drops onto a second line.
• "Tweets by Mississippi Today" widget adds 253KB of scripts and content plus 3MB of images to homepage load, substantially duplicates content elsewhere on homepage
  • [ ] Recommend outright removal, or replacement with a static image/text link to the Twitter feed.
• Many images are appearing at "full" size on homepage, rather than smaller, appropriate sizes.
  • [ ] Reduce image size at https://github.com/INN/umbrella-mstoday/blob/master/wp-content/themes/mstoday/homepages/zones/mstoday-zones.php#L8
  • [ ] Reduce image size in "Legislative Updates" widget if possible; would require https://github.com/INN/largo/issues/1865
  • [ ] Alternate: remove images from "Legislative Updates"

User engagement:

• Popup should have a border or background to distinguish it from the page content
• Popup's "close" button doesn't have sufficient contrast between the :x: and the background
• Generally, review contrast levels for the grey color used for the "By" on bylines and dates

Pagespeed:

• pdfmake.js is still being included
• vfs_fonts.js appears to be a support library for pdfmake.js and is 369kb, comprising four whole fonts in a JS file
• 194kB for https://www.gstatic.com/charts/48.1/js/jsapi_compiled_ui_module
• 177kB for https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js
• datatables is included on homepage instead of being included only on the page where it's needed
• libsyn player is worth 187kb
• 80% of page bandwidth is images
• Lighthouse reports (mstoday-lighthouse-mobile.pdf) have list of slowing scripts. The desktop Lighthouse report is too big to upload to GitHub. Major holds are the optinmonster JS, Pdfmake, Twitter, and then a host of jquery things.
• loading lots of fonts; can we narrow that down by excluding the libsyn widget and the Twitter widget

SEO Analysis:

• Lighthouse test reports 98-100. 👍 💯

Other:

• Using Largo's LESS Customizer for modifications to styles, which causes problems in some mobile-compatibility tests.
  • Fixing https://github.com/INN/largo/issues/1137 would fix that, and allow a plugin like Autoptimize to aggregate the child theme's CSS with other scripts
  • Alternately, converting this from the Customizer to compiled LESS would be an improvement.

[MirandaEcho]

@benlk - Can you break this out into a set of prioritized & concrete recommendations with estimates? Thanks!

[benlk]

High priority

Replace the image lazy-loader, and reduce number of images on homepage

• The site uses a javascript-based image lazyloader, however this causes delays for the user. All major browsers save IE (deprecated) and Safari support the loading attribute for lazy loading of images, and it looks like Safari is making progress on adding support for that in the next release. WordPress will enable this in WordPress 5.5, but for now do we want to continue with the JS loader or try the WordPress feature plugin? https://wordpress.org/plugins/wp-lazy-loading/

This is possibly the highest-impact performance enhancer.

Recommendation:

• [ ] Replace the JS lazy-loader with the Wordpress feature plugin (<1h)

• Many images are appearing at "full" size on homepage, rather than smaller, appropriate sizes.

Recommendations:

• [ ] Reduce image size at https://github.com/INN/umbrella-mstoday/blob/master/wp-content/themes/mstoday/homepages/zones/mstoday-zones.php#L8 (<2h)
• [ ] Reduce image size in "Legislative Updates" widget if possible; would require https://github.com/INN/largo/issues/1865 (8h, puts MS Today on a prerelease version of Largo)
• [ ] Alternate: remove images from "Legislative Updates" via widget config (<15m)

Remove unnecessary scripts

• pdfmake.js, vfs_fonts.js, Google Charts, jQuery inputmask, datatables

• [ ] deep review of plugins and settings to determine where these are coming from and provide solutions (2h)

Remove Twitter widget from homepage

• "Tweets by Mississippi Today" widget adds 253KB of scripts and content plus 3MB of images to homepage load, substantially duplicates content elsewhere on homepage

This is possibly the highest-impact data-saver.

Options:

• [ ] Outright removal of Twitter feed (<15m), or
• [ ] Replace with a static image/text link to their Twitter profile that is redundant to the Twitter links in the header and footer (<1h)

Remove Podcast widget from homepage

• Libsyn widget loads lots of fonts, scripts

• [ ] Remove podcast player from homepage, replace with button that links to dedicated page with podcast player and podcast archives in a Gutenberg post list block. (2h)

Medium priority

• Many stories have short excerpts, only one line of text on desktop. With large images on many stories, on smaller screens it's hard to tell whether the image is for the text above or below the image. Switching to display images beside the headline and excerpt may improve the legibility of the homepage on smaller screens, as well as increasing density of information.
• Additionally, since the image tags on the homepage support srcsets, it may be possible for smaller displayed images to load smaller images over the wire.

Recommendations:

• [ ] Recommend MS Today write longer excerpts.
• [ ] Since image size seems to be a question of whether the image is "Homepage Featured" or not, we could disable the feature of Largo that makes "Homepage Featured" images larger on the homepage blog post list, by removing that from partials/content.php. (2h)
• [ ] Remove child-theme CSS hiding post excerpts on small mobile screens, and maybe remove CSS hiding top term and byline. This is in the Customizer CSS. (<15m)

Global nav optimizations

• There are too many items in the global nav; on screens between 900 and 768px wide the right-hand section of the global nav (search, donate, subscribe) drops onto a second line.

Recommendation:

• [ ] Consult with MS Today to prioritize and reduce items. (??? h)

This is issue #91

Low priority

• Popup should have a border or background to distinguish it from the page content
• Popup's "close" button doesn't have sufficient contrast between the :x: and the background

Recommendations:

• [ ] adjust popup theme (2h)