Website performance improvements (ClickHouse#10175)

* workers moved to separate repo https://github.com/ClickHouse/clickhouse-website-worker * support prefetch tag * Prefetch docs from front page + async load of secondary images
nikvas0 · Apr 10, 2020 · 0b4019b · 0b4019b
1 parent 81a7b4b
commit 0b4019b
Show file tree

Hide file tree

Showing 11 changed files with 30 additions and 159 deletions.
diff --git a/website/index.html b/website/index.html
@@ -1,3 +1,7 @@
+{% set prefetch_items = [
+    ('/docs/en/', 'document')
+] %}
+
 {% extends "templates/base.html" %}
 
 {% block content %}

diff --git a/website/js/base.js b/website/js/base.js
@@ -47,6 +47,12 @@
         }, 70);
     }
 
+    $('img').each(function() {
+        var src = $(this).attr('data-src');
+        if (src) {
+            $(this).attr('src', src);
+        }
+    });
 
     (function (d, w, c) {
         (w[c] = w[c] || []).push(function() {

diff --git a/website/templates/common_meta.html b/website/templates/common_meta.html
@@ -19,3 +19,7 @@
       content="{% if description %}{{ description }}{% else %}{{ _('ClickHouse is an open source distributed column-oriented database management system that allows generating analytical data reports in real time using SQL queries. Сreated by Yandex ClickHouse manages extremely large volumes of data in a stable and sustainable manner.') }}{% endif %}"/>
 <meta name="keywords"
       content="ClickHouse, DBMS, OLAP, relational, analytics, analytical, big data, open-source, SQL, web-analytics" />
+
+{% for prefetch_item in prefetch_items %}
+<link rel="prefetch" href="{{ prefetch_item.0 }}" as="{{ prefetch_item.1 }}" />
+{% endfor %}
diff --git a/website/templates/index/community.html b/website/templates/index/community.html
@@ -9,7 +9,7 @@ <h2 id="community" class="display-4 text-white mb-5">{{ _('ClickHouse community'
                         <a href="https://www.youtube.com/c/ClickHouseDB"
                             rel="external nofollow noreferrer" target="_blank">
                             <div class="bg-dark p-4">
-                                <img src="images/index/youtube.svg"
+                                <img data-src="images/index/youtube.svg"
                                      alt="{{ _('ClickHouse YouTube Channel') }}"
                                      title="{{ _('ClickHouse YouTube Channel') }}"
                                      class="bg-secondary-alt rounded-circle p-2" />
@@ -21,7 +21,7 @@ <h2 id="community" class="display-4 text-white mb-5">{{ _('ClickHouse community'
                         <a href="https://twitter.com/ClickHouseDB"
                             rel="external nofollow noreferrer" target="_blank">
                             <div class="bg-dark p-4">
-                                <img src="images/index/twitter.svg"
+                                <img data-src="images/index/twitter.svg"
                                      alt="{{ _('ClickHouse Official Twitter Account') }}"
                                      title="{{ _('ClickHouse Official Twitter Account') }}"
                                      class="bg-secondary-alt rounded-circle p-2" />
@@ -32,7 +32,7 @@ <h2 id="community" class="display-4 text-white mb-5">{{ _('ClickHouse community'
                 <div class="row mb-3">
                     <div class="col-lg">
                         <div class="bg-dark p-4">
-                            <img src="images/index/telegram.svg"
+                            <img data-src="images/index/telegram.svg"
                                  alt="{{ _('ClickHouse at Telegram') }}"
                                  title="{{ _('ClickHouse at Telegram') }}"
                                  class="bg-secondary-alt rounded-circle p-2 mb-4" />
@@ -56,7 +56,7 @@ <h5 class="text-white mb-lg-3">Telegram</h5>
                         <a href="https://github.com/ClickHouse/ClickHouse/issues/new/choose"
                             rel="external nofollow noreferrer" target="_blank" class="text-decoration-none">
                             <div class="bg-dark p-4">
-                                <img src="images/index/github.svg"
+                                <img data-src="images/index/github.svg"
                                      alt="ClickHouse GitHub"
                                      title="ClickHouse GitHub"
                                      class="bg-secondary-alt rounded-circle p-2 mb-4" />
@@ -72,7 +72,7 @@ <h5 class="text-yellow mb-lg-3">GitHub</h5>
                         <a href="https://join.slack.com/t/clickhousedb/shared_invite/enQtOTUzMjM4ODQwNTc5LWJmMjE3Yjc2YmI1ZDBlZmI4ZTc3OWY3ZTIwYTljYzY4MzBlODM3YzBjZTc1YmYyODRlZTJkYTgzYzBiNTA2Yjk"
                             rel="external nofollow noreferrer" target="_blank" class="text-decoration-none">
                             <div class="bg-dark p-4">
-                                <img src="images/index/slack.svg"
+                                <img data-src="images/index/slack.svg"
                                      alt="{{ _('ClickHouse Slack Workspace') }}"
                                      title="{{ _('ClickHouse Slack Workspace') }}"
                                      class="bg-secondary-alt rounded-circle p-2 mr-4 float-left"
@@ -92,7 +92,7 @@ <h5 class="text-yellow">Slack</h5>
                         <a href="https://stackoverflow.com/questions/tagged/clickhouse"
                             rel="external nofollow noreferrer" target="_blank" class="text-decoration-none">
                             <div class="bg-dark p-4">
-                                <img src="images/index/stack-overflow.svg"
+                                <img data-src="images/index/stack-overflow.svg"
                                      alt="ClickHouse at Stack Overflow"
                                      title="ClickHouse at Stack Overflow"
                                      class="bg-secondary-alt rounded-circle p-2 mr-4 float-left" />
@@ -107,7 +107,7 @@ <h5 class="text-yellow">Stack Overflow</h5>
                 <div class="row mb-3">
                     <div class="col w-100">
                         <div class="bg-dark p-4">
-                            <img src="images/index/blog.svg"
+                            <img data-src="images/index/blog.svg"
                                  alt="ClickHouse Blog"
                                  title="ClickHouse Blog"
                                  class="bg-secondary-alt rounded-circle p-2 mr-4 float-left" />
@@ -124,7 +124,7 @@ <h5 class="text-white">{{ _('ClickHouse Blog') }}</h5>
                         <a href="https://groups.google.com/group/clickhouse"
                             rel="external nofollow noreferrer" target="_blank" class="text-decoration-none">
                             <div class="bg-dark p-4">
-                                <img src="images/index/google-groups.svg"
+                                <img data-src="images/index/google-groups.svg"
                                      alt="{{ _('ClickHouse at Google Groups') }}"
                                      title="{{ _('ClickHouse at Google Groups') }}"
                                      class="bg-secondary-alt rounded-circle p-2 mr-4 float-left" />
@@ -156,7 +156,7 @@ <h2 id="meet" class="display-4 mt-5">{{ _('Hosting ClickHouse Meetups') }}</h2>
                 <p class="lead">
                     {{ _('ClickHouse meetups are essential for strengthening community worldwide, but they couldn\'t be possible without the help of local organizers. Please, feel this form if you want to become one or want to meet ClickHouse core team for any other reason.') }}
                 </p>
-                <img src="images/index/meetup.svg" alt="{{ _('ClickHouse Meetup') }}" title="{{ _('ClickHouse Meetup') }}" class="img-fluid mt-5" />
+                <img data-src="images/index/meetup.svg" alt="{{ _('ClickHouse Meetup') }}" title="{{ _('ClickHouse Meetup') }}" class="img-fluid mt-5" />
             </div>
 
             <div class="col-lg">

diff --git a/website/templates/index/efficient.html b/website/templates/index/efficient.html
@@ -9,7 +9,7 @@ <h2 id="hardware-efficient" class="display-4 my-4">Hardware efficient</h2>
                 <p class="lead">Total cost of ownership could be further lowered by using commodity hardware with rotating disk drives instead of enterprise grade NVMe or SSD without significant sacrifices in latency for most kinds of queries.</p>
             </div>
             <div class="col-lg">
-                <img src="images/index/hardware-efficient.svg" class="img-fluid" alt="ClickHouse is hardware efficient" title="ClickHouse is hardware efficient" />
+                <img data-src="images/index/hardware-efficient.svg" class="img-fluid" alt="ClickHouse is hardware efficient" title="ClickHouse is hardware efficient" />
             </div>
         </div>
         <div class="row">
@@ -37,6 +37,6 @@ <h3>Minimizes data transfers</h3>
 </div>
 <div>
     <div class="container text-center">
-        <img src="images/curl.svg" alt="ClickHouse не тормозит" title="ClickHouse не тормозит" />
+        <img data-src="images/curl.svg" alt="ClickHouse не тормозит" title="ClickHouse не тормозит" />
     </div>
 </div>
diff --git a/website/templates/index/scalable.html b/website/templates/index/scalable.html
@@ -9,7 +9,7 @@ <h2 id="linearly-scalable" class="display-4 mt-5">Linerarly scalable</h2>
                 </p>
             </div>
             <div class="col-lg">
-                <img src="/images/index/linearly-scalable.svg" alt="Lineraly scalable" title="Linearly scalable" class="mt-5" />
+                <img data-src="/images/index/linearly-scalable.svg" alt="Lineraly scalable" title="Linearly scalable" class="mt-5" />
             </div>
         </div>
     </div>

diff --git a/website/templates/index/why.html b/website/templates/index/why.html
@@ -7,15 +7,15 @@ <h2 class="display-4">Why ClickHouse might be the right choice?</h2>
         </div>
         <div class="row mb-5">
             <div class="col-lg-1">
-                <img src="images/index/flash.svg" alt="Blazing fast" title="Blazing fast" />
+                <img data-src="images/index/flash.svg" alt="Blazing fast" title="Blazing fast" />
             </div>
             <div class="col-lg-5">
                 <h3 class="display-5">Blazing fast</h3>
                 <p>ClickHouse uses all available hardware to its full potential to process each query as fast as possible. Peak
             processing performance for a single query stands at more than 2&nbsp;terabytes per second <span class="text-muted">(after decompression, only used columns)</span>. In distributed setup  reads are automatically balanced among healthy replicas to avoid increasing latency.</p>
             </div>
             <div class="col-lg-1">
-                <img src="images/index/safe.svg" alt="Fault tolerant" title="Fault tolerant" />
+                <img data-src="images/index/safe.svg" alt="Fault tolerant" title="Fault tolerant" />
             </div>
             <div class="col-lg-5">
                 <h3 id="fault-tolerant" class="display-5">Fault-tolerant</h3>
@@ -24,14 +24,14 @@ <h3 id="fault-tolerant" class="display-5">Fault-tolerant</h3>
         </div>
         <div class="row">
             <div class="col-lg-1">
-                <img src="images/index/heart.svg" alt="Easy to use" title="Easy to use" />
+                <img data-src="images/index/heart.svg" alt="Easy to use" title="Easy to use" />
             </div>
             <div class="col-lg-5">
                 <h3 class="display-5">Easy to use</h3>
                 <p>ClickHouse is simple and works out-of-the-box. It streamlines all your data processing: ingest all your structured data into the system and it becomes instantly available for building reports. SQL dialect allows expressing the desired result without involving any custom non-standard API that could be found in some DBMS.</p>
             </div>
             <div class="col-lg-1">
-                <img src="images/index/shield.svg" alt="Highly reliable" title="Highly reliable" width="60" />
+                <img data-src="images/index/shield.svg" alt="Highly reliable" title="Highly reliable" width="60" />
             </div>
             <div class="col-lg-5">
                 <h3 id="highly-reliable" class="display-5">Highly reliable</h3>

diff --git a/website/workers/events.js b/website/workers/events.js
diff --git a/website/workers/meet-form.js b/website/workers/meet-form.js
diff --git a/website/workers/play-api.js b/website/workers/play-api.js
diff --git a/website/workers/repo.js b/website/workers/repo.js
-Original file line number
+Diff line change
@@ Expand Up @@
                     </p>
                 </div>
                 <div class="col-lg">
-                    <img src="/images/index/linearly-scalable.svg" alt="Lineraly scalable" title="Linearly scalable" class="mt-5" />
+                    <img data-src="/images/index/linearly-scalable.svg" alt="Lineraly scalable" title="Linearly scalable" class="mt-5" />
                 </div>
             </div>
         </div>
@@ Expand Down @@