Vic Shóstak

Уменьшите битрейт и разрешение видео.
Переместите метаданные в начало mp4 контейнера
Установите preload="metadata"
htmlbook.ru/html/video/preload

Чтобы пиксели в глаза не бросались наложите на видео сеточку из маленьких черных точек
https://jsfiddle.net/soumyabg/wefLyrhp/
css background dotted overlay

Python 3 вышел 9 лет назад, уже тогда нужно было забыть про второй python.

Чисто vue решение:
Создаете json файл со списком шагов, полей, описываете в нем логику переходов.
При заходе на страницу, получаете этот файл, парсите, строите поля, прогрессбар и т.д.
Тут надо быть готовым к перезагрузке страницы, и возможно, сохранять промежуточные данные в localstorage например.

Ожидаемая нагрузка, например, +1500 активных уников в месяц

это не большие нагрузки
ну и не забывайте за optimization.guide

делайте все на одном, только реплицировать не забудьте БД ( + бэкапы само собой)

Я не раз видел попытки такого разделения пользователей по классам в проектах на Django. Не знаю, почему все сразу выбирают такое решение, которое в перспективе не приносит ничего, кроме боли.

Проще всего пойти стандартным путем: унаследовать пользователя от django.contrib.auth.models.AbstractUser, а различие между пользователями определять либо по группе/разрешениям, либо добавить поле в свою модель типа is_moderator. Это будет во много раз (на порядок точно) проще реализовать и поддерживать, будет совместимость со всем стандартным кодом Django и сторонними библиотеками, любому просто войти в проект и внести изменения.

Разделение на две разных модели никаких абсолютно преимуществ не дает, кроме тонны мусорного кода и головняков с поддержкой данной гидры.

TLDR:
1) Из вашего вопроса остается неясным, почему требуется разделение по разным классам. Это самый безумный вариант для разграничения полномочий, и в Django разделение полномочий пользователей уже предусмотрено по умолчанию
2) Поддерживал пару проектов с разными классами для разных классов пользователей. Поверьте, это просто ужас-ужас в поддержке, а самое главное, что он ничем не оправдан.

vk.com/share.php использует подобие jsonp. Вот пример:

window.VK = {Share:{}}

class Vkontakte {
  constructor(url = document.location.href) {
    this.url = encodeURIComponent(url);
  }
  getCounter() {
    let count_url = 'https://vk.com/share.php?act=count&index=1&url=' + this.url;
    window.VK.Share.count = (_, counter) => {
        console.log(counter)
        script.parentNode.removeChild(script)
    }
    let script = document.createElement('script')
    script.src = count_url
    document.body.appendChild(script)
  };
}

new Vkontakte().getCounter();

Через ajax-запрос vk данные не отдаёт, так что fetch тут не поможет.

Tumblr же использует настоящий jsonp. Скачайте библиотеку или делайте вручную, например так:

class Tumblr {
  constructor(url = document.location.href) {
    this.url = encodeURIComponent(url);
  }
  getCounter() {
    let callback = ('cb_' + Math.random()).replace('.', '')
    let count_url = 'https://api.tumblr.com/v2/share/stats?url=' + this.url +
      '&callback=' + callback;
    window[callback] = function(counter) {
        console.log(counter.response.note_count)
        script.parentNode.removeChild(script)
    }
    let script = document.createElement('script')
    script.src = count_url
    document.body.appendChild(script)
  };
}

new Tumblr().getCounter();

getCounter ничего не возвращает. xhr работает асинхронно, obj надо получать через callback или Promise.

getCounter(cb) {
    let xhr = new XMLHttpRequest();
    let api = 'https://vk.com/share.php?act=count&index=1&url=' + encodeURIComponent(this.url);
    
    xhr.open('GET', api, true);
    xhr.send();
    
    xhr.onreadystatechange = () => {
      if (this.readyState != 4) return;
      if (this.status != 200) {
        console.log('Vkontakte provider error: ' + (this.status ? this.statusText : 'response not send!'));
        return;
      }
      
      let obj = this.responseText.match(/^VK\.Share\.count\(\d, (\d+)\);$/)[1] / 1;
      cb(obj);
    }
  }

new Vkontakte().getCounter(count => console.log(count));

getCounter() {
    return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    let api = 'https://vk.com/share.php?act=count&index=1&url=' + encodeURIComponent(this.url);
    
    xhr.open('GET', api, true);
    xhr.send();
    
    xhr.onreadystatechange = () => {
      if (this.readyState != 4) return;
      if (this.status != 200) {
        console.log('Vkontakte provider error: ' + (this.status ? this.statusText : 'response not send!'));
        return;
      }
      
      let obj = this.responseText.match(/^VK\.Share\.count\(\d, (\d+)\);$/)[1] / 1;
      resolve(obj);
    }
  });
  }

new Vkontakte().getCounter().then(count => console.log(count));

Кстати onreadystatechange будет работать неправильно, this будет указывать на инстанс Vkontakte, а не на xhr.

В vk_counter вы кладёте результат выполнения getCounter(). Эта функция ничего не возвращает, что эквивалентно возврату undefined.

возможно надо как то так

deleteArticle: function (url) {
      let self = this;
      swal({
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        closeOnConfirm: false
      }, function () {
        self.$http.delete(url, function () {
          swal("Deleted!", "Your imaginary file has been deleted.", "success");
        });
      });
    }

UPD:
чтобы сформировать url для удаления статьи можно попробовать сделать так
blade

<a href="#" 
  v-on:click="deleteArticle()">Удалить</a>

layouts/app.blade.php

window.Laravel = <?= json_encode([
     'base_url' => url(),
     'article' => isset($article) ? $article->toArray() : null,
]); ?>

app.js

var article_form = new Vue({
		el: '#article_form',
		data: {
			delete_url: window.Laravel.base_url + '/article/' + window.Laravel.article.id + '/delete'
		},
		methods: {
			deleteArticle: function () {
				var self = this;

				swal({
					title: "Are you sure?",
					text: "You will not be able to recover this imaginary file!",
					type: "warning",
					showCancelButton: true,
					confirmButtonColor: "#DD6B55",
					confirmButtonText: "Yes, delete it!",
					closeOnConfirm: false
				}, function () {
					self.$http.delete(self.delete_url, function () {
						swal("Deleted!", "Your imaginary file has been deleted.", "success");
					});
				});
			}
		}
	});

Мне кажется в данном случае самым простым выходом будет написать свой облегченный аналог jquery с тем же подходом и теми же названиями методов/функций. И конвертировать ничего не надо будет, и от сторонней библиотеки избавитесь.

Например если бы вы вакуумно использовали бы только селектор, достаточно было бы этого:

window.$ = document.querySelectorAll.bind(document)