frontend speed improvements - cuts landing page load time by 55% and DOMready time by 35% #4791

owocki · 2019-07-12T23:47:43Z

Description

up until now, my efforts on site speed have been mostly oriented around HTML generation time. nwo that we've gotten the HTML gen time down, i'm turning my efforts towards focusing more on front-end optimizations.

this is a PR that takes the landing page load time on gitcoin from

to

on the intial page paint, thats:

146 to 30 requests
4.8MB to 2.2MB in total page size
1.88s to DOMReady to 1.2s
2.5s to Load to 1.57s

on a cold cache.

on a warmed cache itll take us from

(same requests)
(same size)
930ms to DOMReady to 730ms
1.65s to Load to 1.14s

how

uses django-compress to combine all the css and js files on a page into one http request response
uses jquery-unveil to defer any below-the-fold images until after the user scrolls down
uses AWS_HEADERS to set far future expires headers on AWS
uses django-statici18n to serve the i18n information along with the script js (instead of being another XHTTP request that blocked painting of text)
removes old trackcing scripts that we dont use any more (facebook + twitter pixel)
compressing all the images on the landing page ( these images are uploaded to https://github.com/gitcoinco/web/tree/kevin/site-perf2 ; there are 1000s of them, so i did not included them in this PR)

further TODOs

many of these things are just done on the landing page, and will need to be applied across the site too.

Testing

tested landing page locally

owocki · 2019-07-13T20:25:20Z

if/when we merge this we should also merge https://github.com/gitcoinco/web/tree/kevin/site-perf2

owocki · 2019-07-15T15:22:28Z

@danlipert feedback?

owocki · 2019-07-15T15:23:09Z

app/assets/v2/css/home.css

@@ -224,7 +224,7 @@ img.play {
  cursor: pointer;
  --padding: 40px;
  background-color: var(--gc-green-hover);
-  background-image: url('../images/home/bg-video-preview.svg');


this allows us to load them inline upon scroll instead of on pageload.

owocki · 2019-07-15T15:24:22Z

app/assets/v2/js/lib/vue.js

@@ -0,0 +1,6 @@
+/*!


moved the medium images and vue.js images to our own site so they could be cached according to our CDN config..

owocki · 2019-07-15T15:24:38Z

app/dashboard/templates/bounty/details.html

@@ -441,8 +441,8 @@ <h5 class="bounty-heading">{% trans "Funder" %}</h5>
  <script src="/dynamic/js/tokens_dynamic.js"></script>
  <script src="{% static "v2/js/tokens.js" %}"></script>
  <script src="{% static "v2/js/amounts.js" %}"></script>
-  <script src="{% static "v2/js/lib/popper.min.js" %}"></script>


in base template now

octavioamu

Left some comments

octavioamu · 2019-07-15T17:04:39Z

app/retail/templates/shared/footer_scripts.html

-  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-{% endif %}
-{% include 'shared/sentry.html' %}
+<script src="{% static "v2/js/lib/vue.js" %}"></script>


can we add <script src="https://cdn.jsdelivr.net/npm/vue"></script> to not prod environment ? that is used to debug, so will show the correct vue errors in localhost

yes that makes sense

octavioamu · 2019-07-15T17:07:09Z

app/retail/templates/shared/footer_scripts_lite.html

@@ -29,8 +29,8 @@
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 {% endif %}
 {% include 'shared/sentry.html' %}
-<script src="{% static "v2/js/lib/popper.min.js" %}"></script>
-<script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>


The idea is to move bootstrap.js to footer_scripts and footer_scripts_lite since now is used in most parts and is part of the framework.
I had changed that in this PR #4727

got it - maybe we should just have a seperate compress section here..

yes for sure we can add it later. In some point we will get in a place we can just use the "lite" version and deprecate the other, but need to check since there are diff parts of the site with diff needs and for example the shared.js is something Im trying to avoid to be loaded in all pages. Maybe having one compress for footer_scripts_lite and one for footer_scripts

octavioamu · 2019-07-15T17:08:48Z

app/retail/templates/shared/head.html

 {% include 'shared/tag_manager_1.html' %}
 <meta charset="utf-8">
+{% compress css %}
 <link rel="preload" href="{% static "v2/css/base.css" %}" as="style">


This is a preload tag, so will try to find that file in the server to pre fetch it. Maybe since will be now a big css file, it should preload that file.

i guess it depends on if we want it to block the loading of the rest of the site..

this will create one file name.css right? I mean <link rel="preload" href="{% static "v2/css/base.css" %}" as="style"> is not the actual call of the file just the instruction to prefetch it. I guess we should have in compress just the files that are loaded in all pages and then add one <link rel="preload" href="{% static "v2/css/compress.css" %}" as="style">

this will create one file name.css right?

yes

I guess we should have in compress just the files that are loaded in all pages and then add one

i read the docs on this and i dont understand what gain this gives the site.. CSS loading should not block the rendering of theDOM right? AFAIK it happens ineline

so I think is not about blocking is about kb that will load minification + concat. For other side I think the most valuable for us is the minification part since we use http2 and the conections to fetch the diff files will be at the same time.

with the preload what happens is the browser knows the priority of the side and will load as soon as possible avoiding any repaint in the browser side

here is a good article showing examples of use of preload https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf

octavioamu · 2019-07-15T17:09:28Z

app/retail/templates/shared/head.html

-  <link rel="stylesheet" href="{% static "v2/css/jquery.modal.min.css" %}" />
-{% endif %}
+<link rel="stylesheet" href="{% static "v2/css/jquery-ui.css" %}" />
+<link rel="stylesheet" href="{% static "v2/css/jquery.modal.min.css" %}" />


adding modal and jquery-ui to all the pages will break a lot of pages.

how does it break? wouldnt pages without a modal / jquery-ui just not activate the features in this css files?

jquery-ui modals styles overwrite bootstrap ones because they use general class like .modal without descendent of special class. There left just a few places where we using jquery-ui the ideas is totally remove it. I think if you open any modal like submit work you will get a messed modal.

got it - is there a task to remove the jquery-ui dependancies? id add some bounty funds to it

i wonder if there are other features of jquery ui we are using...

I think just modals and tooltips

octavioamu · 2019-07-15T17:50:16Z

Some questions
how compressor works?
it runs in dev also?
We can control the generated file name?

octavioamu · 2019-07-15T18:28:38Z

Some questions
how compressor works?
it runs in dev also?
We can control the generated file name?

Is this the doc? https://django-compressor.readthedocs.io/en/stable/usage/

owocki · 2019-07-15T19:21:15Z

yes

…

On Mon, Jul 15, 2019 at 12:28 PM Octavio Amuchástegui < ***@***.***> wrote: Some questions how compressor works? it runs in dev also? We can control the generated file name? Is this the doc? https://django-compressor.readthedocs.io/en/stable/usage/ — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#4791?email_source=notifications&email_token=AAD5PCONCCQL4H2INRBAGPTP7S6VPA5CNFSM4ICTHOAKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZ6SDAY#issuecomment-511517059>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAD5PCJY67P4OVKBTBDQCRTP7S6VPANCNFSM4ICTHOAA> .

-- @owocki <http://www.twitter.com/owocki>

_________________________________________ check out what i'm building on github <http://github.com/owocki> or what i'm shooting on photoshelter <http://photography.owocki.com/> or find me on twitter <http://www.twitter.com/owocki>, facebook <http://www.facebook.com/kevinowocki>, instagram <http://instagram.com/owocki>, linkedin <http://www.linkedin.com/in/owocki>, and owocki.com <http://www.owocki.com/?utm_source=emailsig>. see you around teh internets! PS -- Come to the next Boulder Blockchain <https://www.meetup.com/Boulder-Blockchain/> meetup. Be there or be ^ 2. PPS -- Have I mentioned that *G**itcoin is live?* More @ https://gitcoin.co

danlipert · 2019-07-16T08:37:18Z

PR for images: #4800

owocki · 2019-07-16T18:28:27Z

just addressed everyones comments.

requirements/base.txt

owocki · 2019-07-17T17:14:49Z

just pushed up one commit.. i think i got evertything

owocki · 2019-07-18T22:12:45Z

any other comments? im going to resolve the merge conflicts now

i want to apply this to other pages that take too long to load because of frontend issues next.. as long as the group thinks we are going in a directionally correct way

owocki · 2019-07-18T22:13:34Z

actually, i probably will just cherry-pick the changes into a new PR with a clean commit history rather than resolve the conflicts here..

owocki · 2019-07-18T22:20:10Z

new PR #4826

thelostone-mc · 2019-07-27T13:27:45Z

Closing this out as this is a dupe of #4826

owocki added 2 commits July 12, 2019 16:07

jquery-unvail anywhere and everywhere

c6359dd

site performance

022710a

owocki requested review from danlipert, octavioamu and thelostone-mc as code owners July 12, 2019 23:47

owocki changed the title ~~cuts landing page load time by 55% and DOMready time by 35%~~ frontend speed improvements - cuts landing page load time by 55% and DOMready time by 35% Jul 12, 2019

runs images through imageoptim

1437c9e

owocki force-pushed the kevin/site_perf branch from 541c521 to 1437c9e Compare July 13, 2019 20:20

owocki commented Jul 15, 2019

View reviewed changes

eslint ignore

524a8b4

octavioamu suggested changes Jul 15, 2019

View reviewed changes

danlipert mentioned this pull request Jul 16, 2019

Kevin/site perf2 #4800

Closed

owocki added 5 commits July 16, 2019 11:37

undoes the footer_script_lite

de860fe

more fixes

bd507ad

octavio feedback

087618b

octavio feedback

3601aa0

re-add scripts

58438e9

cant update blank bounties

e0a7494

thelostone-mc reviewed Jul 17, 2019

View reviewed changes

requirements/base.txt Outdated Show resolved Hide resolved

owocki added 2 commits July 17, 2019 09:51

small fix

5e540eb

aditya comment

3650b06

optimizes image downloads

67f1c3c

owocki mentioned this pull request Jul 18, 2019

frontend speed improvements - cuts landing page load time by 55% and DOMready time by 35% #4826

Closed

thelostone-mc closed this Jul 27, 2019

thelostone-mc deleted the kevin/site_perf branch June 27, 2020 00:52

frontend speed improvements - cuts landing page load time by 55% and DOMready time by 35% #4791

frontend speed improvements - cuts landing page load time by 55% and DOMready time by 35% #4791

Conversation

owocki commented Jul 12, 2019 • edited Loading

Description

how

further TODOs

Testing

owocki commented Jul 13, 2019

owocki commented Jul 15, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

octavioamu left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

octavioamu commented Jul 15, 2019

octavioamu commented Jul 15, 2019

owocki commented Jul 15, 2019 via email

danlipert commented Jul 16, 2019

owocki commented Jul 16, 2019

owocki commented Jul 17, 2019

owocki commented Jul 18, 2019

owocki commented Jul 18, 2019

owocki commented Jul 18, 2019

thelostone-mc commented Jul 27, 2019

owocki commented Jul 12, 2019 •

edited

Loading