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

.eslintignore

@@ -8,6 +8,7 @@ app/assets/v2/js/lib/showdown.js
 app/assets/v2/js/lib/tooltip.js
 app/assets/v2/js/lib/tweenlite.js
 app/assets/v2/js/abi.js
+app/assets/v2/js/lib/vue.js
 
 app/assets/onepager/js/confetti.js
 

app/app/settings.py

@@ -38,6 +38,7 @@
 env.read_env(str(root.path('app/.env')))  # reading .env file
 
 DEBUG = env.bool('DEBUG', default=True)
+TEMPLATE_DEBUG = env.bool('TEMPLATE_DEBUG', default=False)
 ENV = env('ENV', default='local')
 DEBUG_ENVS = env.list('DEBUG_ENVS', default=['local', 'stage', 'test'])
 IS_DEBUG_ENV = ENV in DEBUG_ENVS
@@ -113,6 +114,8 @@
     'revenue',
     'event_ethdenver2019',
     'inbox',
+    "compressor",
+    'statici18n',
 ]
 
 MIDDLEWARE = [
@@ -150,6 +153,7 @@
             'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages',
             'app.context.preprocess', 'social_django.context_processors.backends',
             'social_django.context_processors.login_redirect',
+            'django.template.context_processors.i18n',
         ],
     },
 }]
@@ -346,6 +350,13 @@
 STATICFILES_LOCATION = env.str('STATICFILES_LOCATION', default='static')
 MEDIAFILES_LOCATION = env.str('MEDIAFILES_LOCATION', default='media')
 
+STATICFILES_FINDERS = (
+    'django.contrib.staticfiles.finders.FileSystemFinder',
+    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
+    # other finders..
+    'compressor.finders.CompressorFinder',
+)
+
 if ENV in ['prod', 'stage']:
     DEFAULT_FILE_STORAGE = env('DEFAULT_FILE_STORAGE', default='app.static_storage.MediaFileStorage')
     THUMBNAIL_DEFAULT_STORAGE = DEFAULT_FILE_STORAGE
@@ -672,6 +683,13 @@
 
 STABLE_COINS = ['DAI', 'USDT', 'TUSD']
 
+from datetime import date, timedelta
+tenyrs = date.today() + timedelta(days=365*10)
+# Expires 10 years in the future at 8PM GMT
+AWS_HEADERS = {
+    'Expires': tenyrs.strftime('%a, %d %b %Y 20:00:00 GMT')
+}
+
 # Silk Profiling and Performance Monitoring
 ENABLE_SILK = env.bool('ENABLE_SILK', default=False)
 if ENABLE_SILK:

app/assets/v2/css/gitcoin.css

@@ -374,7 +374,6 @@ div.button-pink {
 }
 
 .footer__main {
-  background-image: url('/static/v2/images/footer.png');
   background-color: #0d023b;
   background-size: contain;
   background-position: bottom;

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');
+
   background-position: 15% -20%;
   background-size: 150% 150%;
   background-repeat: no-repeat;

app/dashboard/models.py

@@ -283,7 +283,7 @@ class Bounty(SuperModel):
     canceled_on = models.DateTimeField(null=True, blank=True)
     canceled_bounty_reason = models.TextField(default='', blank=True, verbose_name=_('Cancelation reason'))
     project_type = models.CharField(max_length=50, choices=PROJECT_TYPES, default='traditional')
-    bounty_categories = ArrayField(models.CharField(max_length=50, choices=BOUNTY_CATEGORIES), default=list)
+    bounty_categories = ArrayField(models.CharField(max_length=50, choices=BOUNTY_CATEGORIES), default=list, blank=True)
     permission_type = models.CharField(max_length=50, choices=PERMISSION_TYPES, default='permissionless')
     repo_type = models.CharField(max_length=50, choices=REPO_TYPES, default='public')
     snooze_warnings_for_days = models.IntegerField(default=0)

app/dashboard/templates/bounty/details.html

@@ -442,7 +442,7 @@ <h5 class="bounty-heading">{% trans "Funder" %}</h5>
   <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>
-  <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+  <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>  
   <script src="{% static "v2/js/clipboard.js" %}"></script>
   <script>
     let bootstrapTooltip = $.fn.tooltip.noConflict()

app/dashboard/templates/bounty/fulfill.html

@@ -15,7 +15,7 @@
     along with this program. If not, see <http://www.gnu.org/licenses/>.
 
 {% endcomment %}
-{% load i18n static %}
+{% load i18n static compress %}
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -102,8 +102,11 @@ <h1 class="text-center title">{% trans "Submit Work" %}</h1>
   </body>
 
   <!-- jQuery -->
+  {% compress js %}
   <script src="{% static "v2/js/lib/popper.min.js" %}"></script>
   <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+  {% endcompress %}  
+
   <script>
     var bootstrapTooltip = $.fn.tooltip.noConflict()
     var bootstrapModal = $.fn.modal.noConflict()

app/dashboard/templates/bulk_payout_bounty.html

@@ -14,7 +14,7 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program. If not, see <http://www.gnu.org/licenses/>.
 {% endcomment %}
-{% load i18n static %}
+{% load i18n static compress %}
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -203,8 +203,11 @@ <h5>{% trans 'Payout Preview' %}</h5>
   </body>
 
   <!-- jQuery -->
+  {% compress js %}
   <script src="{% static "v2/js/lib/popper.min.js" %}"></script>
   <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+  {% endcompress %}    
+
   <script>
     var bootstrapTooltip = $.fn.tooltip.noConflict()
     var bootstrapModal = $.fn.modal.noConflict()

app/dashboard/templates/dashboard/index.html

@@ -15,7 +15,7 @@
     along with this program. If not, see <http://www.gnu.org/licenses/>.
 
 {% endcomment %}
-{% load i18n static %}
+{% load i18n static compress %}
 <!DOCTYPE html>
 <html lang="en">
 
@@ -106,8 +106,12 @@ <h3>{% trans "No results found." %}</h3>
     {% include 'shared/footer_scripts.html' %}
     {% include 'shared/footer.html' %}
     {% include 'shared/messages.html' %}
+    {% compress js %}
     <script src="{% static "v2/js/lib/popper.min.js" %}"></script>
     <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+    {% endcompress %}  
+
+
     <script>
       let bootstrapTooltip = $.fn.tooltip.noConflict()
       $.fn.runTooltip = bootstrapTooltip

app/dashboard/templates/dashboard/users.html

@@ -15,7 +15,7 @@
     along with this program. If not, see <http://www.gnu.org/licenses/>.
 
 {% endcomment %}
-{% load i18n static email_obfuscator add_url_schema avatar_tags %}
+{% load i18n static email_obfuscator add_url_schema avatar_tags compress %}
 <!DOCTYPE html>
 <html lang="en">
 
@@ -250,8 +250,12 @@ <h6 class="font-weight-bold mb-3">Invite User to Bounty</h6>
     {% include 'shared/footer_scripts.html' %}
     {% include 'shared/footer.html' %}
     {% include 'shared/messages.html' %}
+    {% compress js %}
     <script src="{% static "v2/js/lib/popper.min.js" %}"></script>
     <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+    {% endcompress %}  
+
+
     <script>
       let bootstrapTooltip = $.fn.tooltip.noConflict()
       $.fn.runTooltip = bootstrapTooltip;

app/dashboard/templates/ftux/avatar.html

@@ -14,7 +14,7 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program. If not, see <http://www.gnu.org/licenses/>.
 {% endcomment %}
-{% load i18n static hash strip_char is_in_list_type_iexact jsonify %}
+{% load i18n static hash strip_char is_in_list_type_iexact jsonify compress %}
 
 
 <ul id="avatar-tabs" class="nav nav-tabs my-5" role="tablist">
@@ -169,6 +169,7 @@ <h3 id="section-title">
 
 <script src="{% static "v2/js/lib/jquery.js" %}"></script>
 <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+
 <script>
   var profileId = '{{ profile_id }}';
   var options = {

app/dashboard/templates/onepager/send2.html

@@ -25,12 +25,12 @@
   <script src="{% static "v2/js/amounts.js" %}"></script>
   <script src="{% static "v2/js/lib/secrets.min.js" %}"></script>
   <script src="{% static "v2/js/ethereumjs-accounts.js" %}"></script>
-  <script src="/dynamic/js/tokens_dynamic.js"></script>
   <script src="{% static "onepager/js/send.js" %}"></script>
   <script src="{% static "onepager/js/confetti.js" %}"></script>
   <script src="{% static "v2/js/user-search.js" %}"></script>
   <script src="{% static "v2/js/tooltip_hover.js" %}"></script>
 {% endblock %}
+  <script src="/dynamic/js/tokens_dynamic.js"></script>
 <!-- Main -->
 {% block 'main' %}
 <link rel="stylesheet" type="text/css" href="{% static "v2/css/tooltip_hover.css" %}">

app/dashboard/templates/process_bounty.html

@@ -15,7 +15,7 @@
     along with this program. If not, see <http://www.gnu.org/licenses/>.
 
 {% endcomment %}
-{% load i18n static %}
+{% load i18n static compress %}
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -155,13 +155,17 @@ <h3 class="font-bigger-1 mb-0">Suggested Kudos</h3>
   </script>
 
   <!-- jQuery -->
+  {% compress js %}
   <script src="{% static "v2/js/lib/ipfs-api.js" %}"></script>
   <script src="{% static "v2/js/ipfs.js" %}"></script>
   <script src="{% static "v2/js/lib/secrets.min.js" %}"></script>
   <script src="{% static "v2/js/ethereumjs-accounts.js" %}"></script>
   <script src="{% static "onepager/js/send.js" %}"></script>
   <script src="{% static "v2/js/lib/popper.min.js" %}"></script>
   <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+  {% endcompress %}  
+
+
   <script>
     var bootstrapTooltip = $.fn.tooltip.noConflict()
     var bootstrapModal = $.fn.modal.noConflict()

app/dashboard/templates/profiles/profile.html

@@ -1,4 +1,4 @@
-{% load i18n email_obfuscator humanize static add_url_schema avatar_tags %}
+{% load i18n email_obfuscator humanize static add_url_schema avatar_tags compress %}
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -7,13 +7,15 @@
     {% endif %}
     {% include 'shared/head.html' %}
     {% include 'shared/cards_pic.html' %}
+    {% compress css %}
     <link rel="stylesheet" href={% static "v2/css/dashboard.css" %} />
     <link rel="stylesheet" href={% static "v2/css/profile.css" %} />
     <link rel="stylesheet" href={% static "v2/css/tag.css" %} />
     <link rel="stylesheet" href={% static "v2/css/kudos/styles.css" %} />
     <link rel="stylesheet" href={% static "v2/css/tabs.css" %} />
     <link rel="stylesheet" href={% static "v2/css/rating.css" %} />
     <link rel="stylesheet" href={% static "v2/css/scroll-carousel.css" %} />
+    {% endcompress %}
   </head>
   <body class="interior {{ active }} g-font-muli">
     {% include 'shared/tag_manager_2.html' %}
@@ -302,11 +304,15 @@ <h1 class="profile-header__handle">
     {% include 'shared/messages.html' %}
 
     <!-- jQuery -->
+  {% compress js %}
     <script src="{% static "v2/js/abi.js" %}"></script>
-    <script src="/dynamic/js/tokens_dynamic.js"></script>
     <script src="{% static "v2/js/tokens.js" %}"></script>
     <script src="{% static "v2/js/lib/popper.min.js" %}"></script>
     <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+    {% endcompress %}  
+    <script src="/dynamic/js/tokens_dynamic.js"></script>
+
+
     <script>
       var bootstrapTooltip = $.fn.tooltip.noConflict()
       var bootstrapModal = $.fn.modal.noConflict()

app/dashboard/templates/shared/nav_auth.html

@@ -30,7 +30,7 @@
           {% trans "Send Tip" %}
         </a>
         <a class="dropdown-item" href="{% url "kudos_marketplace" %}">
-          <i class="fas"><img src="{% static "v2/images/kudos/IconKudos.svg" %}"></i>
+          <i class="fas"><img data-src="{% static "v2/images/kudos/IconKudos.svg" %}"></i>
           {% trans "Send Kudos" %}
         </a>
         <a class="dropdown-item" href="{% url "new_funding" %}">
@@ -40,15 +40,15 @@
 
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="{% url "grants:profile" %}">
-          <i class="fas"><img src="{% static "v2/images/grants/icons/black.svg" %}"></i>
+          <i class="fas"><img data-src="{% static "v2/images/grants/icons/black.svg" %}"></i>
           {% trans "My Grants" %}
         </a>
         <a class="dropdown-item" href="{% url "explorer" %}?bounty_filter=createdByMe&network=mainnet&order_by=-web3_created">
-          <i class="fas"><img src="{% static "v2/images/grants/icons/black.svg" %}"></i>
+          <i class="fas"><img data-src="{% static "v2/images/grants/icons/black.svg" %}"></i>
           {% trans "My Funded Bounties" %}
         </a>
         <a class="dropdown-item" href="{% url "explorer" %}?bounty_filter=startedByMe&network=mainnet&order_by=-web3_created">
-          <i class="fas"><img src="{% static "v2/images/grants/icons/black.svg" %}"></i>
+          <i class="fas"><img data-src="{% static "v2/images/grants/icons/black.svg" %}"></i>
           {% trans "My Started Bounties" %}
         </a>
         <div class="dropdown-divider"></div>

app/grants/templates/grants/detail/index.html

@@ -14,7 +14,7 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program. If not, see <http://www.gnu.org/licenses/>.
 {% endcomment %}
-{% load static humanize i18n grants_extra %}
+{% load static humanize i18n grants_extra compresscompress %}
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -68,6 +68,7 @@
     {% include 'grants/shared/shared_scripts.html' %}
   </body>
 
+  {% compress js %}
   <script src="{% static "v2/js/pages/wallet_estimate.js" %}"></script>
   <script src="{% static "v2/js/pages/tabs.js" %}"></script>
   <script src="{% static "v2/js/grants/index.js" %}"></script>
@@ -80,6 +81,9 @@
   <script src="{% static "v2/js/ipfs.js" %}"></script>
   <script src="{% static "v2/js/lib/popper.min.js" %}"></script>
   <script src="{% static "v2/js/lib/bootstrap.min.js" %}" crossorigin="anonymous"></script>
+  {% endcompress %}  
+
+
   <script>
       var bootstrapTooltip = $.fn.tooltip.noConflict()
       $.fn.runTooltip = bootstrapTooltip;