Fix Slow Site Loading Speed part2 (#18512)

* host JQuery locally * defer time consuming scripts * defer more render-blocking script * move general version dropdown css from head to scss * update quotation mark * add cache control * add licenses info to jquery * remove jquery from github # Conflicts: # docs/static_site/src/assets/js/jquery-3.3.1.min.js * load jquery based on env * update wget jquery command Co-authored-by: Yang Shi <[email protected]>
apache · Jun 11, 2020 · 1bf881f · 1bf881f
1 parent a361f33
commit 1bf881f
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 49 deletions.
diff --git a/docs/static_site/Makefile b/docs/static_site/Makefile
@@ -19,6 +19,7 @@ all: html
 
 html:
 	mkdir -p build
+	wget -O src/assets/js/jquery-3.3.1.min.js https://code.jquery.com/jquery-3.3.1.min.js
 	cd src && bundle install && JEKYLL_ENV=production bundle exec jekyll build --config _config_prod.yml -d ../build/html && cd ..
 	wget https://mxnet-website-static-artifacts.s3.us-east-2.amazonaws.com/versions.zip && unzip versions.zip -d build/html && rm -rf build/html/__MACOSX && rm versions.zip
 

diff --git a/docs/static_site/src/.htaccess b/docs/static_site/src/.htaccess
@@ -3,6 +3,25 @@ DirectorySlash off
 RewriteEngine on
 RewriteOptions AllowNoSlash
 
+<IfModule mod_expires.c>
+  ExpiresActive on
+
+  # Images
+  ExpiresByType image/png                 "access plus 7 days"
+  ExpiresByType image/jpg                 "access plus 7 days"
+  ExpiresByType image/jpeg                "access plus 7 days"
+  ExpiresByType image/svg+xml             "access plus 7 days"
+
+  # CSS, Javascript, HTML
+  ExpiresByType text/css                  "access plus 1 days"
+  ExpiresByType application/javascript    "access plus 1 days"
+  ExpiresByType text/html                 "access plus 0 seconds"
+
+  # Web fonts
+  ExpiresByType application/font-woff     "access plus 1 month"
+
+</IfModule>
+
 # Redirect Chinese visitors to Chinese CDN, temporary solution for slow site speed in China
 RewriteCond %{ENV:GEOIP_COUNTRY_CODE} ^CN$
 RewriteCond %{HTTP_HOST} !cdn

diff --git a/docs/static_site/src/_includes/head.html b/docs/static_site/src/_includes/head.html
@@ -6,57 +6,18 @@
   {%- seo -%}
   <script src="https://medium-widget.pixelpoint.io/widget.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
-  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
+  <link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}">
   {%- feed_meta -%}
   {%- if jekyll.environment == 'production' and site.google_analytics -%}
     {%- include google-analytics.html -%}
   {%- endif -%}
-  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
-  <script src="{{'/assets/js/globalSearch.js'|relative_url}}"></script>
-  <script src="{{'/assets/js/clipboard.js'|relative_url}}"></script>
-  <script src="{{'/assets/js/copycode.js'|relative_url}}"></script>
-  <style>
-  .dropdown-option-active {
-      color: #FF4500 !important;
-      font-weight: lighter;
-  }
-
-  .dropdown {
-    position: relative;
-    display: inline-block;
-  }
-
-  .dropdown-content {
-    display: none;
-    position: absolute;
-    background-color: #f9f9f9;
-    min-width: 160px;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-    padding: 12px 16px;
-    z-index: 1;
-    text-align: left;
-  }
-
-  .dropdown:hover .dropdown-content {
-    display: block;
-  }
-
-  .dropdown-header {
-      color: #FFFFFF;
-      display: inline-flex;
-  }
-
-  .dropdown-caret {
-      width: 18px;
-  }
-
-  .trigger .dropdown-caret {
-      height: 57px;
-  }
-
-  .dropdown-caret-path {
-      fill: #FFFFFF;
-  }
-  </style>
+  {%- if jekyll.environment == 'production' -%}
+    <script src="{{'/assets/js/jquery-3.3.1.min.js'|relative_url}}"></script>
+  {%- else -%}
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+  {%- endif -%}
+  <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" defer></script>
+  <script src="{{'/assets/js/globalSearch.js'|relative_url}}" defer></script>
+  <script src="{{'/assets/js/clipboard.js'|relative_url}}" defer></script>
+  <script src="{{'/assets/js/copycode.js'|relative_url}}" defer></script>
 </head>
diff --git a/docs/static_site/src/_sass/generalVersionDropdown.scss b/docs/static_site/src/_sass/generalVersionDropdown.scss
@@ -0,0 +1,41 @@
+.dropdown-option-active {
+  color: #ff4500 !important;
+  font-weight: lighter;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  padding: 12px 16px;
+  z-index: 1;
+  text-align: left;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.dropdown-header {
+  color: #ffffff;
+  display: inline-flex;
+}
+
+.dropdown-caret {
+  width: 18px;
+}
+
+.trigger .dropdown-caret {
+  height: 57px;
+}
+
+.dropdown-caret-path {
+  fill: #ffffff;
+}
diff --git a/docs/static_site/src/assets/main.scss b/docs/static_site/src/assets/main.scss
@@ -7,3 +7,4 @@ body {
 
 @import "minima";
 @import "globalSearch";
+@import "generalVersionDropdown";