Коды пятого урока

Преподключение

к какому-то ресурсу

Инструкция

(скрыть)

Используем preconnect для подключения к сторонним ресурсам: к своему хостингу, dropbox, cdnjs и другим местам. Указываем для одного проекта не больше двух-трех ресурсов.

Скопируй код и вставь в HEAD всего сайта или страницы
Замени ссылку на свою и проследи, чтобы она заканчивалось доменным именем, без слешей и продолжения ссылки (на com или ru)
Ссылки с google fonts можно взять там же, где копируется ссылка на подключения шрифта.

Обрати внимание, что ссылка на dl.dropbox уже внутри ;)

<link rel="preconnect" href="https://dl.dropboxusercontent.com" />

Предварительная загрузка

для самого большого изображения

Инструкция

(скрыть)

Используем preload для загрузки самого большого ресурса на странице (это подскажет lighthouse), либо вставляем в консоль код, который выведет в нее ссылку на этот ресурс.

Скопируй код 1, вставь его в блок T123 на странице, опубликуйте ее. Откройте консоль, в ней будет ссылка на самое большое изображение. Если ссылки нет, значит все изображения допустимых размеров. Либо обнаружь самый большой ресурс с помощью Lighthouse.
Скопируй код 2, вставь в HEAD на странице или в настройках целого сайта.
Замени ссылку на ресурс/изображение

!Передавать клиенту сайт с первым кодом не нужно

Пример:
<link rel="preload" href="https://static.tildacdn.com/tild6437-3332-4131-b662-306663343461/J7Aw.gif" as="image" crossorigin />

<script>
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});
</script>

<link rel="preload" href="ссылка на изображение" as="image" crossorigin />

Переадресация

на мобильную версию

Инструкция

(скрыть)

Этот код используется для открытия на экранах меньше 700px другую версию страницы. Внутри медизапроса можно указать свое значение.

1. Скопируй код и вставь его в блок T123 на основную (не мобильную страницу) страницу.
2. Укажи свое число в медиазапросе (принцип работы медизапросов был описанан в первом уроке), если это нужно.
3. Замени ссылку на свою страницу, на которую будет осуществляться переадресация

Сложный пример на всякий:
Нужно сделать переадресацию на две мобильные версии: до 480px и от 480px до 700, а также загрузить отдельную версию для экранов шириной от 1920px

<script>
if (window.matchMedia ("(max-width: 480px)").matches) {
window.location.href = "ссылка на страницу до 480";
} else if (window.matchMedia ("(min-width: 480px) and (max-width: 700px)").matches) {
window.location.href = "ссылка на страницу от 480 до 700";
} else if (window.matchMedia ("(min-width: 1920px)").matches) {
window.location.href = "ссылка на страницу от 1920";
}
</script>

<script>
if (window.matchMedia("(max-width: 700px)").matches) {
    window.location.href = "ссылка";
}
</script>

Переадресация

для firefox

Инструкция

(скрыть)

Этот код используется для открытия в браузере firefox другой версии страницы (без автоскейла или каких-то анимаций).

Скопируй код и вставь его в блок T123 на основную страницу (не на страницу для лисы)
Замени ссылку на свою страницу, на которую будет осуществляться переадресация

! НОВОЕ. Добавила внутрь кода способ показа в firefox не страницы, а блока

<script>
let sBrowser, sUsrAg = navigator.userAgent;
    
if (sUsrAg.indexOf("Firefox") > -1) {
    window.location.href = "ссылка на страницу";
}

// Если нужно показать какой-то блок, а не страницу - раскоментируй этот код

// let sBrowser, sUsrAg = navigator.userAgent;
    
// if (sUsrAg.indexOf("Firefox") > -1) {
//     document.querySelector('.uc-firefox').style.display = "block";
// } else {
//     document.querySelector('.uc-firefox').style.display = "none";
// }
</script>

Переадресация

для firefox и opera

Инструкция

(скрыть)

Этот код используется для открытия в браузере firefox и opera другой версии страницы (без автоскейла или каких-то анимаций).

Скопируй код и вставь его в блок T123 на основную страницу (не на страницу для лисы и оперы)
Замени ссылку на свою страницу, на которую будет осуществляться переадрессация

! НОВОЕ. Добавила внутрь кода способ показа в firefox не страницы, а блока

<script>
 let sBrowser, sUsrAg = navigator.userAgent;
 let Opera = (navigator.userAgent.match(/Opera|OPR\//) ? true : false);
 if (sUsrAg.indexOf("Firefox") > -1) {
     window.location.href = "ссылка на сайт для лисы";
 } else if (Opera) {
   window.location.href = "ссылка на сайт для оперы";
 }

// Если нужно показать какой-то блок, а не страницу - раскоментируй этот код

// let sBrowser, sUsrAg = navigator.userAgent;
// let Opera = (navigator.userAgent.match(/Opera|OPR\//) ? true : false);
// if (sUsrAg.indexOf("Firefox") > -1) {
//     document.querySelector('.uc-firefox').style.display = "block";
//     document.querySelector('.uc-opera').style.display = "none";
// } else if (Opera) {
//     document.querySelector('.uc-firefox').style.display = "none";
//     document.querySelector('.uc-opera').style.display = "block";
// } else {
//     document.querySelector('.uc-firefox').style.display = "none";
//     document.querySelector('.uc-opera').style.display = "none";
// }
</script>

Переадресация

для safari

Инструкция

(скрыть)

Этот код используется для открытия в браузере safari другой версии страницы (без автоскейла или каких-то анимаций).

Скопируй код и вставь его в блок T123 на основную страницу (не на страницу для сафари)
Замени ссылку на свою страницу, на которую будет осуществляться переадрессация

! НОВОЕ. Добавила внутрь кода способ показа в firefox не страницы, а блока

<script>
let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

if (isSafari) {
    window.location.href = "ссылка на сайт";
}

// Если нужно показать какой-то блок, а не страницу - раскоментируй этот код

// let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

// if (isSafari) {
//     document.querySelector('.uc-safari').style.display = "block";
// } else {
//     document.querySelector('.uc-safari').style.display = "none";
// }
</script>

Связаться