Optimize performance.

_config.yml

@@ -42,11 +42,13 @@ google_site_verification: google_meta_tag_verification # change to your verifica
 timezone: Asia/Shanghai
 
 google_analytics:
-  # Change to your Google Analytics ID
+  # Fill with your Google Analytics ID
-  id: 'UA-*********-*'
+  id: ''
   # The Google Analytics pageviews switch.
   # DO NOT enable it unless you know how to deploy the Google Analytics superProxy.
   pv: false
+  # superProxy Url, only valid when `google_analytics.pv` is set to 'true'
+  proxy_url: ''
 
 disqus:
   shortname: 'disqus'   # Change to your Disqus shortname.

_includes/head.html

@@ -19,6 +19,27 @@
 
   {% include favicons.html %}
 
+  <!-- google fonts -->
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
+  <link rel="dns-prefetch" href="https://fonts.gstatic.com">
+
+  <!-- ga -->
+  {% if jekyll.environment == 'production' %}
+    <link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
+    <link rel="dns-prefetch" href="https://www.google-analytics.com">
+
+    <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
+    <link rel="dns-prefetch" href="https://www.googletagmanager.com">
+
+    {% if site.google_analytics.proxy_url and site.google_analytics.pv %}
+      <link rel="preconnect" href="{{ site.google_analytics.proxy_url }}" crossorigin="use-credentials">
+      <link rel="dns-prefetch" href="{{ site.google_analytics.proxy_url }}">
+    {% endif %}
+  {% endif %}
+
+  <link rel="preconnect" href="cdn.jsdelivr.net">
+  <link rel="dns-prefetch" href="cdn.jsdelivr.net">
+
   <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
     integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin="anonymous">
@@ -55,25 +76,21 @@
     integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
 
   <script>
-    document.jQuery || document.write('<script src="{{ site.baseurl }}/assets/lib/jquery-3.4.1.min.js"><\/script>');
+    document.jQuery || document.write("<script src=\"{{ site.baseurl }}/assets/lib/jquery-3.4.1.min.js\"><\/script>");
   </script>
 
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.15.0/dist/umd/popper.min.js"
-    integrity="sha256-fTuUgtT7O2rqoImwjrhDgbXTKUwyxxujIMRIK7TbuNU=" crossorigin="anonymous"></script>
+    integrity="sha256-fTuUgtT7O2rqoImwjrhDgbXTKUwyxxujIMRIK7TbuNU=" crossorigin="anonymous" async></script>
 
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
-    integrity="sha256-5+02zu5UULQkO7w1GIr6vftCgMfFdZcAHeDtFnKZsBs=" crossorigin="anonymous"></script>
+    integrity="sha256-5+02zu5UULQkO7w1GIr6vftCgMfFdZcAHeDtFnKZsBs=" crossorigin="anonymous" async></script>
 
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
 
   <script src="{{ site.baseurl }}/assets/js/dist/commons.js" async></script>
 
-  {% if jekyll.environment == 'production' %}
-    {% include google-analytics.html %}
-  {% endif %}
-
   {% if page.layout == 'home' or page.layout == 'post' %}
-    <script src="{{ site.baseurl }}/assets/js/dist/timeago.min.js"></script>
+    <script src="{{ site.baseurl }}/assets/js/dist/timeago.min.js" async></script>
     {% if site.google_analytics.pv %}
       <script src="{{ site.baseurl }}/assets/js/dist/countUp.min.js" async></script>
       <script src="{{ site.baseurl }}/assets/js/dist/pageviews.min.js" async></script>

_layouts/default.html

@@ -17,7 +17,6 @@ layout: compress
     <div id="main-wrap">
       {% include topbar.html %}
       <div id="main">
-        <div class="row justify-content-center bg-white">
 
         {% capture _content %}
           {{ content }}
@@ -26,7 +25,6 @@ layout: compress
         {% include fixlinenos.html %}
         {{ _content }}
 
-        </div>
         {% include footer.html %}
       </div>
       {% include search-results.html %}
@@ -34,11 +32,16 @@ layout: compress
 
     <div id="mask"></div>
 
-    {% include search.html %}
-
     <a id="back-to-top" href="#" class="btn btn-lg btn-box-shadow" role="button">
       <i class="fas fa-angle-up"></i>
     </a>
+
+    {% if jekyll.environment == 'production' %}
+      {% include google-analytics.html %}
+    {% endif %}
+
+    {% include search.html %}
+
   </body>
 
 </html>

_layouts/page.html

@@ -5,23 +5,22 @@ layout: default
 # MIT License
 ---
 
-<div class="col-12 col-lg-11 col-xl-8">
+<div class="row d-flex justify-content-center bg-white">
-  <div id="page" class="post pb-5 pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
+  <div class="col-12 col-lg-11 col-xl-8">
-
+    <div id="page" class="post pb-5 pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
-  {% if page.dynamic_title %}
+    {% if page.dynamic_title %}
-
+      <h1 class="dynamic-title">{{ page.title }}</h1>
-    <h1 class="dynamic-title">{{ page.title }}</h1>
+      <div class="post-content">
-    <div class="post-content">
+        {{ content }}
+      </div>
+    {% else %}
       {{ content }}
-    </div>
+    {% endif %}
 
-  {% else %}
+    </div> <!-- #page -->
 
-    {{ content }}
+  </div><!-- .col-12 -->
 
-  {% endif %}
+  {% include panel.html %}
 
-  </div> <!-- #page -->
+</div>
-</div><!-- end .col-12 -->
-
-{% include panel.html %}

_layouts/post.html

@@ -5,11 +5,11 @@ layout: default
 # MIT Licensed
 ---
 
-{% include date-format.html %}
+<div class="row d-flex justify-content-center bg-white">
+  {% include date-format.html %}
 
-<div class="col-12 col-lg-11 col-xl-8">
+  <div id="post-wrap" class="col-12 col-lg-11 col-xl-8">
-  <div id="post-wrap" class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
+    <div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
-    <div class="post">
       <h1 data-toc-skip>{{ page.title }}</h1>
       <div class="post-meta text-muted d-flex flex-column">
         <!-- Published Date and Categoreis -->
@@ -18,12 +18,13 @@ layout: default
             {{ page.date | date: POST_DATE }}
             <i class="hidden">{{ page.date | date_to_xmlschema }}</i>
           </span>
-        {% if page.categories.size > 0 %}on{% endif %}
+          {% if page.categories.size > 0 %}on{% endif %}
-        {% for category in page.categories %}
+          {% for category in page.categories %}
-          <a href='{{ site.baseurl }}/categories/{{ category | replace: ' ', '-' | downcase }}/'>{{ category }}</a>
+            <a href='{{ site.baseurl }}/categories/{{ category | replace: ' ', '-' | downcase }}/'>{{ category }}</a>
-          {%- unless forloop.last -%}, {%- endunless -%}
+            {%- unless forloop.last -%}, {%- endunless -%}
-        {% endfor %}
+          {% endfor %}
         </div>
+
         <!-- lastmod -->
         {% if page.seo.date_modified > page.date %}
         <div>
@@ -34,12 +35,14 @@ layout: default
           </span>
         </div>
         {% endif %}
+
         <!-- page views -->
         {% if site.google_analytics.pv %}
         <div>
           <span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin"></i></span> views
         </div>
         {% endif %}
+
       </div> <!-- .post-meta -->
 
       {% capture post_content %}
@@ -68,44 +71,46 @@ layout: default
             {{- tag -}}
           </a>{%- if forloop.last != true -%}&ensp;{%- endif -%}
           {% endfor %}
-        </div>
+          </div>
         {% endif %}
-      </div><!-- endof .post-tail -->
+      </div><!-- div.post-tail -->
+
+      {% include related-posts.html %}
+
+      <div class="post-pager d-flex justify-content-between">
+      {% if page.previous.url %}
+        <a href="{{ site.baseurl }}{{page.previous.url}}" class="btn btn-outline-primary">
+      {% else %}
+        <a href="javascript:;" class="btn btn-outline-primary disabled">
+      {% endif %}
+          <i class="fas fa-angle-left mr-1"></i>
+          OLDER POST
+        </a>
+
+      {% if page.next.url %}
+        <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary">
+      {% else %}
+        <a href="javascript:;" class="btn btn-outline-primary disabled">
+      {% endif %}
+        NEWER POST
+        <i class="fas fa-angle-right ml-1"></i>
+        </a>
+      </div> <!-- div.post-pager -->
 
     </div> <!-- .post -->
+  </div> <!-- #post-wrap -->
 
-    {% include related-posts.html %}
+  {% include panel.html %}
-
-    <div class="post-pager d-flex justify-content-between">
-    {% if page.previous.url %}
-      <a href="{{ site.baseurl }}{{page.previous.url}}" class="btn btn-outline-primary">
-    {% else %}
-      <a href="javascript:;" class="btn btn-outline-primary disabled">
-    {% endif %}
-        <i class="fas fa-angle-left mr-1"></i>
-        OLDER POST
-      </a>
-
-    {% if page.next.url %}
-      <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary">
-    {% else %}
-      <a href="javascript:;" class="btn btn-outline-primary disabled">
-    {% endif %}
-      NEWER POST
-      <i class="fas fa-angle-right ml-1"></i>
-      </a>
-    </div> <!-- end .post-pager -->
 
+  <div id="comment-wrap" class="col-12 col-lg-11 col-xl-8">
+    <div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4 pl-xl-3">
     {% if site.disqus.comments and page.comments %}
       {% include disqus.html %}
-    {% else %}
-      <br>
     {% endif %}
+    </div>
+  </div>
 
-  </div> <!-- #post-wrap -->
+</div> <!-- .row -->
-</div> <!-- div.col-12..col-lg-11.col-xl-8 -->
-
-{% include panel.html %}
 
 <!-- image lazy load -->
 <script type="text/javascript">

assets/css/main.scss

@@ -352,7 +352,8 @@ body {
   -webkit-transition: transform 0.4s ease;
 }
 
-#main>div.row>div {
+#main>div.row>div:nth-child(1),
+#main>div.row>div:nth-child(2) {
   margin-top: 3rem; /* same as the height of topbar */
 }
 
@@ -360,10 +361,6 @@ body {
   min-height: calc(100vh - 3rem - 6rem); /* 3rem for topbar, 6rem for footer */
 }
 
-#main-wrap .col-xl-3 {
-  max-width: 300px;
-}
-
 #topbar.row,
 #main>.row,
 #search-result-wrap>.row {
@@ -972,7 +969,8 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     top: 0 !important;
   }
 
-  #main>div.row>div {
+  #main>div.row>div:nth-child(1),
+  #main>div.row>div:nth-child(2) {
     margin-top: 0;
   }
 
@@ -1083,10 +1081,11 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
 }
 
 
-/*--- Large screens ---*/
+/*--- Large screens, both sidebar and panel are visable ---*/
-@media all and (min-width: 1200px) {
 
-  #main>div.row .col-xl-8 {
+@media all and (min-width: 1201px) {
+
+  #main>div.row>div.col-xl-8 {
     -webkit-box-flex: 0;
     -ms-flex: 0 0 75%;
     flex: 0 0 75%;
@@ -1094,7 +1093,13 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     padding-left: 3%;
   }
 
-  #breadcrumb { padding-left: 0; }
+  #panel-wrap {
+    max-width: 300px;
+  }
+
+  #breadcrumb {
+    padding-left: 0;
+  }
 
   #topbar-main {
     padding: 0 calc((100% - 1150px) / 2)!important;
@@ -1120,7 +1125,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
 
 @media all and (min-width: 1650px) {
 
-  #main>div.row .col-xl-8 {
+  #main>div.row>div.col-xl-8 {
     padding-left: 0px;
     max-width: 850px;
   }
@@ -1129,7 +1134,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     margin-left: 350px;
   }
 
-  #main-wrap .col-xl-3 {
+  #panel-wrap {
     margin-left: calc((100% - 1150px) / 10);
   }
 
@@ -1258,7 +1263,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     padding-right: calc(100% - 1570px); /* 100% - (1920px - 350px) */
   }
 
-  #main-wrap .col-xl-3 {
+  #panel-wrap {
     margin-left: calc((100% - 1150px) / 8);
   }
 

assets/css/post.scss

@@ -106,4 +106,35 @@
   position: relative;
   top: 1rem;
   right: 1rem;
+}
+
+#comment-wrap {
+  min-height: 2rem;
+}
+
+/*
+  The following resposive design aim to make #comment-wrap margin-right same as pannel's width
+*/
+@media all and (min-width: 1201px) {
+  #comment-wrap {
+    margin-right: 25%;
+  }
+}
+
+@media all and (min-width: 1460px) {
+  #comment-wrap {
+    margin-right: 300px;
+  }
+}
+
+@media all and (min-width: 1650px) {
+  #comment-wrap {
+    margin-right: calc((100% - 1150px) / 10 + 300px);
+  }
+}
+
+@media all and (min-width: 1700px) {
+  #comment-wrap {
+    margin-right: calc((100% - 1150px) / 8 + 300px);
+  }
 }