Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

product page performance tweaks #1927

Merged
merged 1 commit into from
Oct 1, 2020
Merged

product page performance tweaks #1927

merged 1 commit into from
Oct 1, 2020

Conversation

umarmughal824
Copy link
Contributor

@umarmughal824 umarmughal824 commented Sep 23, 2020

Pre-Flight checklist

  • Testing
    • Changes have been manually tested

What are the relevant tickets?

fixes #1920

What's this PR do?

Makes resource usage changes to the product page to partially fix issues described in #1908

How should this be manually tested?

Use Lighthouse or Google Pagespeed to test before/after performance score. There should be an increase in the overall score and speed for the page.

Extras?

Devops needs to increase the cache expiry limit on media resources for xPRO (probably on the CDN level if it's being controlled from there or the server if that's the original source of the cache header).

@odlbot odlbot temporarily deployed to xpro-ci-pr-1927 September 23, 2020 11:31 Inactive
@umarmughal824 umarmughal824 changed the title add performance tweaks for the product page product page performance tweaks Sep 23, 2020
@codecov-commenter
Copy link

codecov-commenter commented Sep 23, 2020

Codecov Report

Merging #1927 into master will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff           @@
##           master    #1927   +/-   ##
=======================================
  Coverage   83.87%   83.87%           
=======================================
  Files         165      165           
  Lines        9569     9569           
  Branches     1004     1004           
=======================================
  Hits         8026     8026           
  Misses       1309     1309           
  Partials      234      234           

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ddfd256...b78efe4. Read the comment docs.

@umarmughal824
Copy link
Contributor Author

umarmughal824 commented Sep 24, 2020

@ahmed-belal there are no N+1 queries in the logs.
These are the logs for the product page. You can see that most of the resources are being consumed by the images. That could be optimized by increasing the cache expiry limit on media resources

[pid: 1069|app: 0|req: 788/1637] 172.19.0.1 () {42 vars in 812 bytes} [Thu Sep 24 09:32:37 2020] GET /programs/program-v1:xPRO+DgtlLearn/ => generated 29398 bytes in 1275 msecs (HTTP/1.1 200) 4 headers in 140 bytes (1 switches on core 1)
[pid: 1069|app: 0|req: 794/1638] 172.19.0.1 () {40 vars in 878 bytes} [Thu Sep 24 09:32:38 2020] GET /images/O2ZJGIKkIQSiUses_TvXt2jsFlo=/35/fill-75x75/sundar4.jpeg?v=6347ddabdaee90f33f2183fcd7d0a06f4434786f => generated 2211 bytes in 107 msecs (HTTP/1.1 200) 3 headers in 95 bytes (1 switches on core 5)
[pid: 1069|app: 0|req: 795/1639] 172.19.0.1 () {40 vars in 906 bytes} [Thu Sep 24 09:32:38 2020] GET /images/HPw1v3Hg9bzK8OGv9Dg4E6GLw00=/27/fill-870x500/browser-width-image.jpeg?v=498902fd02ddaea3e28a51a3db7598950775c213 => generated 26203 bytes in 132 msecs (HTTP/1.1 200) 3 headers in 95 bytes (4 switches on core 3)
[pid: 1069|app: 0|req: 796/1640] 172.19.0.1 () {40 vars in 880 bytes} [Thu Sep 24 09:32:38 2020] GET /images/Y_-24IrmgXyZ0urCaFb8EWbMCBw=/33/fill-100x100/sundar2.png?v=95ce4e6c7bc905eb0d43afd2283b9cdd2aabc061 => generated 6039 bytes in 139 msecs (HTTP/1.1 200) 3 headers in 94 bytes (1 switches on core 7)
[pid: 1069|app: 0|req: 797/1641] 172.19.0.1 () {40 vars in 912 bytes} [Thu Sep 24 09:32:38 2020] GET /images/7-ZvGMDithe2PzTVHQdjANVNlEM=/34/fill-75x75/Dummy-Icon-Female-347x400.jpg?v=a874207153f2059d3417cc5ca869ea74d4dd6f11 => generated 1767 bytes in 168 msecs (HTTP/1.1 200) 3 headers in 95 bytes (1 switches on core 4)
[pid: 1069|app: 0|req: 798/1642] 172.19.0.1 () {40 vars in 886 bytes} [Thu Sep 24 09:32:38 2020] GET /images/uowDbf1BHMKbMBn-ZV_OrSF4vDE=/36/fill-75x75/userbenefit2.png?v=52552d095c70fb0fd77ed4fefb0103ad886b4446 => generated 13487 bytes in 186 msecs (HTTP/1.1 200) 3 headers in 94 bytes (2 switches on core 6)
[pid: 1069|app: 0|req: 799/1643] 172.19.0.1 () {40 vars in 876 bytes} [Thu Sep 24 09:32:38 2020] GET /images/CaK1gzFE7v4VGlYmLnKeSzJ9ykI=/33/fill-75x75/sundar2.png?v=95ce4e6c7bc905eb0d43afd2283b9cdd2aabc061 => generated 4110 bytes in 243 msecs (HTTP/1.1 200) 3 headers in 94 bytes (1 switches on core 2)
[pid: 1069|app: 0|req: 800/1645] 172.19.0.1 () {40 vars in 890 bytes} [Thu Sep 24 09:32:38 2020] GET /images/h3abT-WnVqaG1ThStdy26kyrE7w=/36/fill-100x100/userbenefit2.png?v=52552d095c70fb0fd77ed4fefb0103ad886b4446 => generated 22199 bytes in 131 msecs (HTTP/1.1 200) 3 headers in 94 bytes (3 switches on core 10)
[pid: 1069|app: 0|req: 800/1645] 172.19.0.1 () {40 vars in 882 bytes} [Thu Sep 24 09:32:38 2020] GET /images/_JEGo0M1nVe49GeSYtv0V7Tp_Rg=/35/fill-100x100/sundar4.jpeg?v=6347ddabdaee90f33f2183fcd7d0a06f4434786f => generated 3107 bytes in 155 msecs (HTTP/1.1 200) 3 headers in 95 bytes (1 switches on core 9)
[pid: 1069|app: 0|req: 800/1646] 172.19.0.1 () {40 vars in 916 bytes} [Thu Sep 24 09:32:38 2020] GET /images/gRz0r29zAe6XCtwNCwgmjTKaa9E=/34/fill-100x100/Dummy-Icon-Female-347x400.jpg?v=a874207153f2059d3417cc5ca869ea74d4dd6f11 => generated 2207 bytes in 157 msecs (HTTP/1.1 200) 3 headers in 95 bytes (1 switches on core 8)
[pid: 1069|app: 0|req: 802/1647] 172.19.0.1 () {40 vars in 882 bytes} [Thu Sep 24 09:32:38 2020] GET /images/fMtyRYAKx-yAJeKIcWza33FvtP0=/32/fill-300x300/sundar1.jpeg?v=71c55eefb66b670b78eee952e60057d7be7bf84d => generated 3891 bytes in 176 msecs (HTTP/1.1 200) 3 headers in 95 bytes (1 switches on core 11)
[pid: 1069|app: 0|req: 802/1648] 172.19.0.1 () {40 vars in 882 bytes} [Thu Sep 24 09:32:38 2020] GET /images/SSfKGoNqOLKJzGu_28uhhrffChg=/30/fill-300x300/sundar3.jpeg?v=878d58573915ba039a697205fbadf6e3328f697e => generated 6428 bytes in 121 msecs (HTTP/1.1 200) 3 headers in 95 bytes (1 switches on core 13)
[pid: 1069|app: 0|req: 802/1649] 172.19.0.1 () {40 vars in 880 bytes} [Thu Sep 24 09:32:38 2020] GET /images/AarOOi2o_PxOR8fhiJlf3kY2-Xw=/31/fill-300x300/alena1.jpeg?v=aea95f41fd713723e574f43443b0453e68be6769 => generated 11731 bytes in 170 msecs (HTTP/1.1 200) 3 headers in 95 bytes (2 switches on core 12)
[pid: 1069|app: 0|req: 802/1650] 172.19.0.1 () {40 vars in 880 bytes} [Thu Sep 24 09:32:38 2020] GET /images/EDyCSMexNlsThkDD2TxFGiF4qSY=/28/fill-300x300/alena3.jpeg?v=e49361f1e6445d738850d24b08fc6579e76b255a => generated 6386 bytes in 60 msecs (HTTP/1.1 200) 3 headers in 95 bytes (1 switches on core 14)
[pid: 1069|app: 0|req: 804/1651] 172.19.0.1 () {40 vars in 880 bytes} [Thu Sep 24 09:32:38 2020] GET /images/lt_5OzgYxqBzwd22gHK92NqcEyw=/29/fill-300x300/sundar.jpeg?v=e2aff5a3ce5e225998df7b0ff145724ad36f6563 => generated 8635 bytes in 359 msecs (HTTP/1.1 200) 3 headers in 95 bytes (2 switches on core 15)
[pid: 1069|app: 0|req: 804/1652] 172.19.0.1 () {40 vars in 646 bytes} [Thu Sep 24 09:32:38 2020] GET /api/users/me => generated 139 bytes in 246 msecs (HTTP/1.1 200) 5 headers in 172 bytes (1 switches on core 16)
[pid: 1069|app: 0|req: 804/1653] 172.19.0.1 () {40 vars in 902 bytes} [Thu Sep 24 09:32:39 2020] GET /images/4VWQgSbysKALEgzHzYtU3ng4amw=/26/fill-1920x1080/parallax_bridge1.jpg?v=a9324734acbf5e33955ffbb1576584b2635167b3 => generated 194577 bytes in 98 msecs (HTTP/1.1 200) 3 headers in 95 bytes (24 switches on core 17)

@umarmughal824 umarmughal824 temporarily deployed to xpro-ci-pr-1927 September 24, 2020 10:24 Inactive
Copy link
Contributor

@ahmed-belal ahmed-belal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor changes

mitxpro/templates/footer.html Outdated Show resolved Hide resolved
Comment on lines -4 to -9
src: url("#{$static-path}/fonts/icomoon.eot?dd3z7r"),
url("#{$static-path}/fonts/icomoon.eot?dd3z7r#iefix")
format("embedded-opentype"),
url("#{$static-path}/fonts/icomoon.ttf?dd3z7r") format("truetype"),
url("#{$static-path}/fonts/icomoon.woff?dd3z7r") format("woff"),
url("#{$static-path}/fonts/icomoon.svg?dd3z7r#icomoon") format("svg");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might not fix everything we want to. Refer to the lighthouse report which still flags this as an issue:

Screenshot 2020-09-24 at 5 20 35 PM

The recommended way of fixing it:
https://web.dev/font-display/?utm_source=lighthouse&utm_medium=devtools

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's done exactly that way and I don't see that error on my side.

@pdpinch
Copy link
Member

pdpinch commented Sep 25, 2020

Could you be more specific in the commit message about the tweaks that are included here? I see there's some changes to font handling. What else is there?

Copy link
Contributor

@ahmed-belal ahmed-belal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approving on explanation provided on Slack

@umarmughal824
Copy link
Contributor Author

Could you be more specific in the commit message about the tweaks that are included here? I see there's some changes to font handling. What else is there?

@pdpinch there is icomoon font changes and also some changes for best practices in HTML5.

@umarmughal824
Copy link
Contributor Author

Approving on explanation provided on Slack

That's the comment I posted on the slack.

There are two possible and suggested ways either preload it or load it with the system default and swap it later once loaded.

@umarmughal824 umarmughal824 merged commit 44d756a into master Oct 1, 2020
@umarmughal824 umarmughal824 deleted the umar/mitxpro-1920 branch October 1, 2020 08:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

xPRO Product page performance improvements
5 participants