Google Pagespeed

[jmfield2]

Google has a tool which checks various rules against a site and gives an arbitrary score based on the number of rules passed. These are separated by Speed and Usability between both the Mobile and Desktop experience.

https://developers.google.com/speed/pagespeed/insights/

As of now, the site scored a 27/100 on mobile speed and similar for desktop speed, but 98/100 for mobile and desktop usability.

The real world load time on wired desktop is currently:

• 130 requests, 2.8 MB, and 6.22s fully loaded (first request) with a DOM loaded at about 5s.
• 129 requests, 2.8 MB, and 5.22s fully loaded with a 4s DOM load time (second, warm request)

Some basic improvements suggested include: enabling gzip compression for static assets, minifying, enabling cache headers for static assets, and reducing blocking JS and CSS resources.

• [X] Enabling GZIP was the first, and easiest to add - only requiring adding the mime types for other files to compress (js, css, html) and yields a mobile speed score of 54/100.
• [ ] With minified JS/CSS using the nodejs uglifyjs and clean-css tools yield add another 6 points for a total of 60/100 mobile speed.
• [X] Adding Cache headers (static max-age: 1 week) adds just 3 points for 63/100

It turns out reducing the blocking JS/CSS is hard considering the entire app is JS. I eliminated the JS block, but still have CSS files blocking so the pagespeed score has not improved, but the real-world load time with all of the above improvements is now:

• 31 requests, 1.5MB, 2.3S DOM ready, 4.8S fully loaded
• 31 requests, 1.5MB, 640ms DOM ready, 2.13s fully loaded (second, warm request)

Note: There is a small delay between first render and the map initialization now - since the assets load first, and then the JS initializes.

[jmfield2]

With the #310 merged, the pagespeed scores are now: mobile: 57/100 desktop: 71/100

With the main suggestions remaining being the minification and render-blocking JS/CSS as noted in the checklist above.

For comparison, the unchanged maps.usf.edu loads in: * 170 requests, 3,284 KB, 5.75s * 170 requests, 3,200 KB, 5.66s

After minify: * 70 requests, 1,883 KB, 2.6-3s (localhost) 8 html, 7 css, 3 js, 15 ajax, 2 fonts, 35 images (including map)