Website performance improvements (#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

website/index.html

@@ -1,3 +1,7 @@
+{% set prefetch_items = [
+    ('/docs/en/', 'document')
+] %}
+
 {% extends "templates/base.html" %}
 
 {% block content %}

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() {

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 %}

website/templates/index/community.html

@@ -9,7 +9,7 @@
                         <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 @@
                         <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 @@
                 <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 @@
                         <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 @@
                         <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 @@
                         <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 @@
                 <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 @@
                         <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 @@
                 <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">

website/templates/index/efficient.html

@@ -9,7 +9,7 @@
                 <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 @@
 </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>

website/templates/index/scalable.html

@@ -9,7 +9,7 @@
                 </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>

website/templates/index/why.html

@@ -7,7 +7,7 @@
         </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>
@@ -15,7 +15,7 @@
             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 @@
         </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>

website/workers/events.js

@@ -1,34 +0,0 @@
-addEventListener('fetch', event => {
-  event.respondWith(handleRequest(event.request))
-})
-
-async function handleRequest(request) {
-  let raw = await fetch('https://raw.githubusercontent.com/ClickHouse/ClickHouse/master/README.md');
-  let text = await raw.text();
-  let lines = text.split('\n');
-  let skip = true;
-  let events = [];
-  for (let idx in lines) {
-      let line = lines[idx];
-      if (skip) {
-          if (line.includes('Upcoming Events')) {
-              skip = false;
-          }
-      } else {
-          if (!line) { continue; };
-          line = line.split('](');
-          var tail = line[1].split(') ');
-          events.push({
-            'signup_link': tail[0],
-            'event_name': line[0].replace('* [', ''),
-            'event_date': tail[1].slice(0, -1).replace('on ', '')
-          });
-      }
-  }
-           
-  let response = new Response(JSON.stringify({
-    'events': events
-  }));
-  response.headers.set('Content-Type', 'application/json');
-  return response;
-}

website/workers/meet-form.js

@@ -1,75 +0,0 @@
-
-addEventListener('fetch', event => {
-  event.respondWith(handleRequest(event.request))
-})
-
-async function handleRequest(request) {
-  if (request.method != 'POST') {
-    return new Response('Bad request', {
-      status: 400,
-      statusText: 'Bad request'
-    });
-  }
-  let url = new URL('https://api.sendgrid.com/v3/mail/send');
-  let newHdrs = new Headers();
-  newHdrs.set('Authorization', 'Bearer ' + SENDGRID_TOKEN);
-  newHdrs.set('Content-Type', 'application/json');
-  let args = await request.json();
-  let subject = args['name'] + ' wants to meet';
-  let content = '';
-  let argsKeys = Object.keys(args);
-  if (['name', 'email', 'city', 'company'].filter(n=>!argsKeys.includes(n)).length) {
-    return new Response('Bad request', {
-      status: 400,
-      statusText: 'Bad request'
-    });
-  }
-  for (let key in args) {
-    content += key.charAt(0).toUpperCase() + key.slice(1);
-    content += ':\r\n' + args[key] + '\r\n\r\n';
-  }
-  let body = {
-    "personalizations": [
-      {
-        "to": [
-            {
-              "email": "clickhouse-feedback@yandex-team.ru",
-              "name": "ClickHouse Core Team"
-            }
-          ],
-        "subject": subject
-      }
-    ], "content": [
-      {
-        "type": "text/plain",
-        "value": content
-      }
-    ], "from": {
-      "email": "no-reply@clickhouse.tech",
-      "name": "ClickHouse Website"
-      }, "reply_to": 
-      {
-        "email": "no-reply@clickhouse.tech",
-        "name": "ClickHouse Website"
-      }  
-    };
-  const init = {
-    body: JSON.stringify(body),
-    headers: newHdrs,
-    method: 'POST'
-  }
-
-  let response = await fetch(url, init);
-  let status = 200;
-  if (response.status != 202) {
-    status = 200;
-  }
-
-  return new Response('{}', {
-    status: status,
-    statusText: response.statusText.replace('Accepted', 'OK'),
-    headers: new Headers({
-      'Content-Type': 'application/json'
-    })
-  })
-}

website/workers/play-api.js

@@ -1,24 +0,0 @@
-addEventListener('fetch', event => {
-  event.respondWith(handleRequest(event.request))
-})
-
-async function handleRequest(request) {
-  let url = new URL(request.url);
-  url.hostname = 'play-api.clickhouse.tech';
-  url.port = 8443;
-  url.pathname =  url.pathname.replace('/api/', '/');
-  let newHdrs = new Headers()
-  
-  const init = {
-    body: request.body,
-    headers: request.headers,
-    method: request.method
-  }
-
-  let response = await fetch(url, init);
-
-  return new Response(response.body, {
-    status: response.status,
-    statusText: response.statusText
-  })
-}

website/workers/repo.js

@@ -1,10 +0,0 @@
-addEventListener('fetch', event => {
-  event.respondWith(handleRequest(event.request))
-})
-
-async function handleRequest(request) {
-  let url = new URL(request.url);
-  url.hostname = 'repo.yandex.ru';
-  url.pathname = '/clickhouse' + url.pathname;
-  return fetch(url)
-}