420873535

Сортируем существующий массив:

messages.sort((a, b) => {
  [ a, b ] = [ a, b ].map(n => sortableLanguages.indexOf(n.language));
  return a === -1 ? 1 : b === -1 ? -1 : a - b;
});

Собираем отсортированный новый:

const sorted = (arr, key) => arr
  .map(n => [ n, key(n) ])
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0]);


const order = Object.fromEntries(sortableLanguages.map((n, i) => [ n, i + 1 ]));
const sortedMessages = sorted(messages, n => order[n.language] || Number.MAX_SAFE_INTEGER);

// или

function sorted(arr, order, key) {
  const ordered = new Map(order.map(n => [ n, [] ]));
  const unordered = [];

  arr.forEach(n => (ordered.get(key(n)) || unordered).push(n));

  return [].concat(...ordered.values(), unordered);
}


const sortedMessages = sorted(messages, sortableLanguages, n => n.language);

Верстка под WP по сути укладывается всего в несколько отличий от верстки под что либо еще:

1. В некоторых местах (body, меню, обертки страниц/записей и тд) WP генерит свой список классов. Его можно и нужно использовать, если тема предназначена на продажу или в репозиторий на .org, предполагается что ее будут крутить/развивать под свои задачи. Если для себя / для клиента, то можно не использовать, но как минимум с меню придется на бекенде несколько правок сделать.
2. Контент, который редактируется в редакторе (старый TinyMCE или новый Gutengerg) либо лишен классов по умолчанию (тогда стучимся по классу контейнера), либо как разработчики намудрят (Gutenberg, всякие конструкторы страниц). В принципе, можно полностью под себя сделать с Gutenberg, но это дополнительные временные расходы.
3. Статика (скрипты, стили) подключается из PHP, картинки и другие файлы - как правило тоже, через медиа-библиотеку.

Иногда что-то по мелочи попадается, но в целом - это все.

Без JS и с описанной адаптивностью: https://codepen.io/arsenty/pen/mYxXoQ

Cosmonaut ., одинаковые шрифты подключаются с одним именем, различающуюся жирность и стиль пишут в font-weight и font-style.

Для современных браузеров нужны форматы woff2 и woff.

@font-face {
    font-family: "OpenSans";
    src: url("fonts/opensans.woff2") format("woff2")
            url("fonts/opensans.woff") format("woff") ;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "OpenSans";
    src: url("fonts/opensansbold.woff2") format("woff2"),
            url("fonts/opensansbold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

Scrollbar стилизовать можно только в webkit браузерах и ie да и то не очень сильно. В ie так не получится скорее всего. В webkit с помощью свойств:
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer.
Пример:

::-webkit-scrollbar { width: 3px; height: 3px;}
::-webkit-scrollbar-button {  background-color: #666; }
::-webkit-scrollbar-track {  background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}

Лучше использовать какой-нибудь js-плагин, типа этого: manos.malihu.gr/jquery-custom-content-scroller

https://codepen.io/topicstarter/pen/RdNRXo

1) Скрыть элемент через стили (если они загружаются в шапке не асинхронно, ну или добавьте inline стили к элементу), после загрузки поменять текст и показать.
2) Скрыть через стили, добавить текст через стили, через свойство content. Чтобы не кидать текст в CSS файл, используйте функцию attr. Пример https://jsfiddle.net/y86e3a4m/

На метрику точно забейте.

Ютуб надо убирать под JS, вместо плеера картинка -> при клике вставляется плеер.
Ютуб безобразно долго грузится.

Живосайт не факт что так сильно влияет, но можно сделать финт ушами

setTimeout(function(){
(function(){ var widget_id = '***';var d=document;var w=window;function l(){
  var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true;
  s.src = '//code.jivosite.com/script/widget/'+widget_id
    ; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss);}
  if(d.readyState=='complete'){l();}else{if(w.attachEvent){w.attachEvent('onload',l);}
  else{w.addEventListener('load',l,false);}}})();
}, 3000);

В целом вся оптимизация вордпресса это:
1. Прогнать картинки через https://compressor.io/
2. И поставить какой-нибудь W3 Total Cache + включить всякие минификации и т.д.
3. Всякие виджеты засунуть в setTimeout

На выходе получите 90-100 для десктопа и 80-100 для мобильного на PageSpeed

Самый простой способ:
codepen.io/iiil/pen/bDFei
Для наглядности я вставил большую картинку (сделал ширину поменьше, чтобы видно было, как она грузится). После ее полной загрузки iframe присваивается нужный url.
Код:

<iframe src="" frameborder="0" id="iframe"></iframe>

window.onload = function(){
  document.getElementById('iframe').src = 'http://iiil.name';
}

Если нужна задержка после загрузки - используйте таймаут (в примере просто раскоментите строчки). Код:

window.onload = function(){
     setTimeout(function(){
  	document.getElementById('iframe').src = 'http://iiil.name';
     },5000)
}

Чтобы не зависеть от скрипта можно url помещать в data-атрибуты и оттуда доставать.

Если вы говорите об использовании схемы data:uri , то вопрос тут не в "корректности", а в производительности, а также том, для чего вообще вы это делаете.
Собственно, вероятность того, что это не будет работать, определяется а) поддержкой data:uri самим browser-ом caniuse.com/#feat=datauri и б) поддержкой SVG caniuse.com/#feat=svg
Вопрос "где хранится" - непонятен. Если вы уже вставили закодированную картинку в CSS или HTML, то там она и хранится.
Имейте в виду, что если вы не предъявляете каких-то специальных требований к работе страниц, лучше не использовать это, потому что оно только сильнее все тормозит.
Специальные требования могут включать в себя полную переносимость страницы (т.е. отсутствие внешних ссылок, когда абсолютно все, от самого HTML до скриптов, стилей и картинок, хранится в одном файле), какие-то особые условия, связанные с HTTP-запросами (экзотические настройки сервера, который отдает один запрос одному клиенту, но по широкому каналу, например) и так далее. Иногда это можно использовать для каких-то совсем маленьких элементов, когда есть риск, что сервер отдаст их последними, а без них рушится все отображение.

Я эти фокусы использовал в свое время только для формирования бланков, которые пользователь мог бы сохранять и смотреть оффлайн. Некая замена PDF.

<div class="test1"><div class="test2"><img src=""></div></div>

test1 - задаем жесткие размеры 400х500 и overflow hidden
test2 - задаем жесткие размеры 400х500 и overflow-y scroll + padding-right -20px (прячем прокрутку)

Переключить в вертикальный режим
Отображать семь слайдов
Стилизовать эти слайды свойствами opacity и transform3d

Пардон, невнимательно рассмотрел инфу на сайте: jquery.eisbehr.de/lazy/example_load-background-images

Возьми какой-нибудь плагин для jQuery, типа такого https://www.jqueryscript.net/layout/jQuery-Plugin-...
или пили свой велосипед, например так:

Для этого нужно знать высоту содержимого этого div'а. В таком случае:

var scrollBottom = $('#inner').height() - $('#outer').height() - $('#outer').scrollTop();

Пример jsfiddle.net/4RkqP/

Если нет такого элемента, как #inner (т.е. узнать высоту содержимого не так просто), то нужно создать клон div'a, сделать его css height равной auto, а потом, с помощью яваскрипта узнать его высоту. И сделать так, как описано выше.

Пример jsfiddle.net/a47tX/