[Homepage] Analyze and improve page load speed

[anuveyatsu]

As a User, I want datahub pages to load as quickly as possible so I have great UX.

As the Datahub team, we want our pages to have high load speed so users don't go away while waiting.

Acceptance criteria

• [x] homepage load speed is high according to 'PageSpeed' tool from google

Tasks

• [x] identify current state - where we are right now? how long in average it takes to load the homepage?
• [x] identify sources - what is being the reason for the slow load?
• [x] fix/improve the sources
• [x] deploy

Analysis

AdBlockers

https://stackoverflow.com/questions/43728822/avoiding-google-tag-manager-blocking-by-adblockers https://marthijnhoiting.com/detect-if-someone-is-blocking-google-analytics-or-google-tag-manager/#

Speed test tools

Some random tools (both seem to be popular) that we can use to test page load speed:

1. Pingdom

See results: https://tools.pingdom.com/#!/buQRw1/https://datahub.io

2. Google PageSpeed tool

See results: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fdatahub.io&tab=desktop

Suggestions

1. Cache some assets: we can cache images as they're static
2. Optimize CSS delivery: don't load leaflet map CSS in the homepage

[akariv]

It seems that the cause for the long load times is the google tag manager script snippet:

<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
  | h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
  | (a[n]=a[n]\|\|[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
  | })(window,document.documentElement,'async-hide','dataLayer',4000,
  | {'GTM-WCTXGJ8':true});</script>

Which, in combination of an ad blocker which block gtag script loading will cause in the page being blank for 4 seconds (see the 4000 msec timeout there)

[anuveyatsu]

FIXED:

1. Browser Cache Expiration is increased from 4h to 24h
2. Reduced timeout of snippet that prevents flickering (a/b tests) from 4s to 1s
3. Leaflet map CSS is loaded only on showcase page