Finish CCS Optimization Presentation and Review

ushenoyuog commented 7 years ago

Refer #701

[x] Make a prototype of current CCS website with performance optimisations applied
[x] Prepare a presentation for ccswbs/ccs all/spring IT day

bdavey07 commented 7 years ago

Created a site in the test environment on ws-securehst18 at https://aoda-test.web.uoguelph.ca/ccs/ Password is in KeePass (synchronize to see it) Site is exact replica of live ccs site as of this morning's backup (Tuesday May 23, 2017)

bdavey07 commented 7 years ago

PDF Copies of PageSpeed Insights ran on both test and live sites today (23/05/2017) insightsLiveDesktop05_23_17.pdf insightsLiveMobile05_23_17.pdf insightsTestDesktop05_23_17.pdf insightsTestMobile05_23_17.pdf

Note: No changes have been made on the test environment yet Note: I screwed up taking the screenshot for the before benchmark on the test environment. The test environment was at the same score before any changes were made.

bdavey07 commented 7 years ago

PDF Copies of PageSpeed Insights ran EOD today (23/05/2017) on test site insightsTestDesktop05_23_17.1.pdf insightsTestMobile05_23_17.1.pdf

Changes made

Banners replaced with automatically generated images by PageSpeed Insights

nevantan commented 7 years ago

Some additional benchmarks.

Live: live_gtmetrix.pdf live_pingdom.pdf live_webpagetest.pdf

AODA-Test: test_pingdom.pdf

Web Page Test and GTMetrix didn't like our lack of SSL on the test site and failed out.

bdavey07 commented 7 years ago

Installed Advagg Module

bdavey07 commented 7 years ago

With manually optimized images and Advagg installed and configured insightsTestDesktop06_02_17.pdf insightsTestMobile06_02_17.pdf

With non-optimized images and Advagg installed and configured insightsTestMobile06_02_17.1.pdf insightsTestDesktop06_02_17.1.pdf

With Advagg off, images non-optimized (manually) and Image Optimize module on insightsTestMobile06_02_17.2.pdf insightsTestDesktop06_02_17.2.pdf

With Advagg on and Image Optimize on insightsTestMobile06_02_17.3.pdf insightsTestDesktop06_02_17.3.pdf

With Advagg off and ImageMagick on insightsTestDesktop06_02_17.4.pdf insightsTestMobile06_02_17.4.pdf

Note: Advagg has a lot of configuration options, I am sure that more time spent learning every in an out of the module would give us a better score.

Note: ImageMagick module is currently throwing an error message, working to fix it, expect this score to be better when fixed

bdavey07 commented 7 years ago

Don't think that I am using the Advagg module to its full capacity yet. Image optimize module gave great results, mainly for mobile, which is arguably the most important for front end performance optimization.

bdavey07 commented 7 years ago

There are more options in the image optimize module as well, including a quality option, which could increase performance even more

nevantan commented 7 years ago

ImageMagick looks to be the way to go as far as image optimization goes. The jpegoptim library seems to be difficult to install, and the already-installed jpegtrans library is not very effective.

Once configured, the ImageMagick module will automatically transform any newly uploaded images. We'll have to run a command on the server to optimize existing images. The following command run in the /sites/[site]/files directory will convert all jpegs automatically: mogrify -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace RGB *.jpg

nevantan commented 7 years ago

Following the instructions from this Stack Exchange question greatly improved "First Meaningful Paint", but broken a ton of stuff on the site (some pages would be css-less, all Bootstrap scripts broke, etc.).

I ended up having to make the following changes:

Uncheck "Resource hint src attributes found in the HTML content"
Select "All but JavaScript Libraries" under "Move JS to the footer"
Select "Link Stylesheet" under "Do not defer the first css file"

The settings above seem to allow the site to function normally while providing the following benchmark: 4-stack_overflow-fix_bugs.pdf

bdavey07 commented 7 years ago

Rough first draft of presentation https://docs.google.com/a/uoguelph.ca/presentation/d/1oWSt0GGEBp0NZzstFbkb4wZpAC-cCnEb2pkWJZB3Vm8/edit?usp=sharing

bdavey07 commented 7 years ago

https://docs.google.com/presentation/d/1ZFV4IcrtfgdPpXN_mfTGhnHAdbGqOKDSMaPxWSl1J2o/edit?usp=sharing

bdavey07 commented 7 years ago

[x] CCS all language (general editing)
[x] Timeline at end
[x] Side by side banner images optimized/unoptimized
[x] Remove the word confusion
[x] Explanation of metrics slides
[x] Add aggregation info (@nevantan)

nevantan commented 7 years ago

Must finish and get review from @chyatt this sprint.

bdavey07 commented 7 years ago

Notes from meeting with @chyatt

General

Will be presenting at team meeting tomorrow (July 12)
Is interested in having this presented at all staff, focus on more technical aspects compared to all staff
Is happy with presentation in current state, no changes needed at this time (will probably change after feedback from rest of team)

Action Items

Look into how the optimized images look on different displays (higher res)
At a ccs all presentation, don't be too technical but be prepared to answer technical questions
Look into different browser results
May need to change slide template for CCS all
Show off modules and configurations at team meeting

nevantan commented 7 years ago

Note: Google Lighthouse is only for Chrome. Even the NodeJS command line version forces the use of Chrome/Chromium.

ccswbs / hjckrrh