Applying lazy-loading on div element backgrounds #2090
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 tasks
arslanashraf7
force-pushed
the
arslan/lazy-load-div
branch
from
e8629cb to
c71f189
Compare
arslanashraf7
force-pushed
the
arslan/lazy-load-div
branch
from
c71f189 to
dbdac58
Compare
arslanashraf7
force-pushed
the
arslan/lazy-load-div
branch
from
dbdac58 to
bc1dde1
Compare
arslanashraf7
force-pushed
the
arslan/lazy-load-div
branch
from
2443982 to
d44c89b
Compare
Codecov Report
@@ Coverage Diff @@
## master #2090 +/- ##
=======================================
Coverage 88.02% 88.02%
=======================================
Files 328 328
Lines 14936 14936
Branches 1035 1035
=======================================
Hits 13147 13147
Misses 1548 1548
Partials 241 241 Continue to review full report at Codecov.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Pre-Flight checklist
What are the relevant tickets?
#2065
What's this PR do?
It adds
IntersectionObserver on ourdivelements to load their background lazily. Initially we used to load the backgrounds of our div elements such asFaculty, Testimonialsright when they would render. After this PR the backgrounds will only load once that specific div element is coming intoViewport.Note: This change give some performance improvement in the suggestion category of
Defer Off-Screen imagesbyLighthouse. Although it adds a bit to the overall performance we should note that the backgrounds to div elements such asFaculty, Testimonialswhich are around500kbcan take some time to load in worst cases.How should this be manually tested?
Generate Lighthouse report, See the suggestions section
Defer off-screen resources/images. This might need some A/B to test the differences properly.