EPIC: xPRO performance improvements

[briangrossman]

As a user, I am experiencing significantly slow load times on the xpro.mit.edu site. The slow load time causes me to leave the site, before I can find anything I am looking for.

Designs and Mockups

Here is what Google recommends to help solve the load time issue: https://developers.google.com/speed/pagespeed/insights/?utm_source=analytics&tab=mobile&url=http%3A%2F%2Fxpro.mit.edu%2F

Issues:

• 1919 - xPRO Catalog page performance improvements
• Home page performance (details below)
• 1920 - xPRO Product page performance improvements

Out of Scope

• Mobile performance is lower priority

[ahmed-belal]

Findings

Following are the findings using the Google PageSpeed tool URL linked above.

• Initial server response time (TTFB) is quite high ~790ms
• We have multiple render-blocking CSS files included (8 to be exact) that should be bundled up and served as a single resource (this does not include the external Zendesk stylesheet)
• The icons/logos slider near the bottom of the page is using huge images (~2000px in one dimension) however the actual render size is very small (~170px in one dimension). This is wasting quite a lot of network traffic that could potentially be saved.
• We need to preload the icomoon font as it is pretty much being used on all pages (used in the slick slider)
• We have a lot of external scripts included that are blocking the main render thread. Specifically the Zendesk widget script is blocking render for close to half a second. This needs to be deferred and loaded async.
• Wagtail-served images have a cache policy of 30 days. Consider increasing this value.
• Zendesk widget JS is quite slow and script evaluation takes on average ~550ms, blocking main thread. This needs to be deferred.

[briangrossman]

@ahmed-belal
There are lots of good thoughts here. Thanks!

Did you get this data from the Google report, or your own testing? If you didn't use the Google report, make sure you check that out, too, for additional suggestions?

To help determine what makes sense to do, we should see not only what makes the most impact, but also what's easy vs. hard. Items can be easy or hard and will have big or small impact.

Can you rank the items you've found (and any additional ones you see as useful from the Google analysis) assuming we'd want them ordered as:

1. easy-big
2. easy-small and hard-big
3. hard-small

---

Some specific questions:

• server response time - do you have any suggestions for improving this?
• Zendesk issues - for the two Zendesk issues, do you see any complications with deferring / loading asynchronously? (This might be helpful)

Thanks!

[ahmed-belal]

@briangrossman I did go through the Google report and gleaned action items from that. Once that is done I'll do another pass on the page with my own stress/load tests (locally) and see if there's anything we can improve over there.

Effort/Impact

Easy/Medium

• Logo image resize on homepage (use correctly sized images for carousel)
• Zendesk widget connectOnLoad setting (does not apply, this only works for the chat-enabled widget)
• Move Zendesk init snippet into after page load
• Increase cache expiry header policy
• Google Fonts enable font swapping to keep fonts visible during CSS load

Hard/Big

• Optimize home page queries, perfomance to reduce TTFB