Многие из нас привыкли к тому, что быстрый и стабильный интернет это данность в 2023 году, поэтому оптимизацией вебсайтов под этот случай особо не занимаются. Однако все еще остаются сценарии, когда это не так: например, в дороге между населенными пунктами или в некоторых помещениях, которые либо находятся под землей, либо плохо пропускают сигнал по какой-то другой причине.
Для нашего проекта combat-sport.club как раз актуальна ситуация, когда взвешивание спортсменов перед проведением соревнований нередко происходит в каком-нибудь подвальном помещении с плохой связью, и тяжелый SPA с большим количеством медиа может грузиться очень долго. В свою очередь это влияет и на возможность работать с платформой и в целом на удовлетворенность пользователей.
Можно считать это как продолжение серии моих статей про оптимизацию в целом: раз и два.
В этой статье я рассмотрю один из методов оптимизации сайта для пользователей с медленной скоростью интернета - Network Information API. Это API с большим набором различной информации о сети, но пока не с самой лучшей поддержкой среди браузеров. Тем не менее это не повод не использовать его для тех пользователей, чей браузер это поддерживает - а это около 73% глобальных пользователей. Примеры кода будут на Vue.
Компонент для картинок и сервис imagekit
Начну с того, что у нас на проекте есть компонент AppImage, который отвечает за все изображения, а для их используется сервис imagekit.io. Опуская не имеющие значения детали, в упрощенном виде AppImage выглядит вот так:
<script lang="ts" setup>
import { computed } from 'vue'
import { useMedia } from '@/composables/media.ts'
interface IProps {
imgId?: string
src?: string
height: number | string
width: number | string
...
}
const props = withDefaults(defineProps<IProps>(), {
imgId: '',
src: '',
...
})
const { getImageById } = useMedia()
const srcAttrs = computed(() => {
if (props.src) {
return {
src: props.src,
}
}
return {
src: getImageById(props.imgId, +props.width, +props.height, props.type),
srcset: `${getImageById(props.imgId, +props.width * 2, +props.height * 2, props.type)} 2x`,
}
})
</script>
<template>
<img
v-bind="srcAttrs"
:height="height"
:width="width"
>
</template>
В нем есть функция getImageById, которая обращается к сервису imagekit с id изображения и параметрами w и h для запроса этого изображения в определенных размерах:
const getImageById = (
id: string,
width: number,
height: number,
...
): string => {
...
return `${BASE_URL}/${id}${width ? `?tr=w-${width}` : ''}${width && height ? `,h-${height}` : ''}`
}Помимо этого, у сервиса есть параметр q, который принимает значения от 1 до 100 и отвечает за качество отдаваемой картинки. Например, вот две картинки с q=90 и q=20, вес которых соответственно составляет 31kb и 3kb:
Именно этот параметр я и буду менять в зависимости от скорости интернета у пользователя. Если же вы подобным сервисом не пользуетесь, то хотя все будет сложнее, но все же вы можете отдельно подготовить картинки разного качества и подставлять их.
Используем effectiveType для определения скорости сети
Нам нужно написать сервис, который будет отслеживать информацию о сети и вслед за этим менять качество картинок. Назовем сервис handleNetwork и объявим переменные, которые нам нужны:
import { ref } from 'vue'
export function handleNetwork() {
const imagesQuality = ref(90)
const effectiveType = ref(undefined)
}effectiveType это свойство Network Information API, доступное через navigator.connection.effectiveType. Оно может иметь несколько значений: slow-2g, 2g, 3g, 4g, каждое из которых соответствует определенной скорости интернета, даже если пользователь использует wifi или проводной интернет. Вот таблица с небольшим пояснением:
Именно на эти значения мы и будем ориентироваться, меняя переменную imagesQuality.
Для того чтобы проинициализировать и отслеживать изменения значения effectiveType нам нужно добавить слушатель на событие change для navigator.connection, а также создать функцию updateNetworkState, которая будет обрабатывать обновления.
Важно: обязательно добавляйте проверку на то, что браузер поддерживает это API с помощью простой проверки 'connection' in navigator:
function updateNetworkState() {
...
}
if (navigator && 'connection' in navigator) {
navigator.connection.addEventListener('change', updateNetworkState)
}
updateNetworkState()Теперь напишем функцию updateNetworkState. В ней тоже добавим проверку на поддержку API и конструкцию switch, которая будет задавать значения для imagesQuality:
function updateNetworkState() {
if (!navigator || !('connection' in navigator)) return
effectiveType.value = navigator.connection.effectiveType
switch (effectiveType.value) {
case ('slow-2g'):
case '2g':
imagesQuality.value = 1
break
case '3g':
imagesQuality.value = 20
break
case '4g':
imagesQuality.value = 90
break
default:
imagesQuality.value = 90
break
}
}И добавляем return с imagesQuality, чтобы получить доступ к этой переменной в компонентах. В итоге получаем такой код:
import { ref } from 'vue'
export function handleNetwork() {
const imagesQuality = ref(90)
const effectiveType = ref(undefined)
function updateNetworkState() {
if (!navigator || !('connection' in navigator)) return
effectiveType.value = navigator.connection.effectiveType
switch (effectiveType.value) {
case ('slow-2g'):
case '2g':
imagesQuality.value = 1
break
case '3g':
imagesQuality.value = 20
break
case '4g':
imagesQuality.value = 90
break
default:
imagesQuality.value = 90
break
}
}
if (navigator && 'connection' in navigator) {
navigator.connection.addEventListener('change', updateNetworkState)
}
updateNetworkState()
return {
imagesQuality: imagesQuality.value,
}
}Меняем качество изображений
Возвращаемся к компоненту AppImage и импортируем туда наш сервис. Здесь мы сделаем следующее:
1) Передадим переменную imagesQuality как новый параметр функции getImageById
2) Если imagesQuality меньше 20, то оставляем атрибут srcset с 2х изображением пустым, т.к. при медленном интернете нет смысла загружать картинки более высокого разрешения
<script lang="ts" setup>
...
import { handleNetwork } from '@/services/network'
...
const srcAttrs = computed(() => {
const { imagesQuality } = handleNetwork()
...
return {
src: getImageById(..., imagesQuality),
srcset: imagesQuality > 20 ? `${..., imagesQuality)} 2x` : '',
}
})
</script>Обновленная функция getImageById с параметром quality:
const getImageById = (
id: string,
width: number,
height: number,
quality?: number,
...
): string => {
...
return `${BASE_URL}/${id}${width ? `?tr=q-${quality},w-${width}` : ''}${width && height ? `,h-${height}` : ''}`
}Готово! Теперь в зависимости от качества сети у нас будут подгружаться картинки разного качества. Убедиться в этом можно переключая эти значения во вкладке Network инструментов разработчика в браузере:
Оптимизируем background-image
Следующая возможность для оптимизации это отключение фоновых изображений, которые мы задаем через CSS, т.к. как правило фоновые изображения используются чисто в декоративных целях, не неся какой-то ценной информации - следовательно при медленном интернете ими можно пожертвовать и не загружать, используя вместо них заливку цветом.
Для этого допишем наш сервис, добавив туда 'флаг' isSlowConnection , который поможет нам определять, когда показывать или не показывать фоновые картинки:
const isSlowConnection = ref(false)Далее дополним конструкцию switch, чтобы помимо качества картинок там менялось и значений нашей новой переменной:
switch (effectiveType.value) {
case ('slow-2g'):
case '2g':
imagesQuality.value = 1
isSlowConnection.value = true
break
case '3g':
imagesQuality.value = 20
isSlowConnection.value = true
break
case '4g':
imagesQuality.value = 90
isSlowConnection.value = false
break
default:
imagesQuality.value = 90
isSlowConnection.value = false
break
}А ниже добавим переключение класса (назвать его можно как угодно, но лучше с каким-то особым префиксом, чтобы не столкнуться с конфликтом стилей) на body, с помощью которого мы сможем через CSS селектор определять нужные стили:
document.body.classList.toggle('cs-slow-connection', isSlowConnection.value)Например, у нас есть фоновое изображение на странице соревнования. Напишем стили, чтобы при наличии класса cs-slow-connection вместо фоного изображения была просто заливка похожим цветом:
.event-header {
&::before {
background-image: url("/img/event-default-img.webp");
background-position: center;
background-size: cover;
}
}
body.cs-slow-connection {
.event-header {
&::before {
background-color: #e4e4e4;
background-image: none;
}
}
}Выглядеть это будет вот так:
И действительно, во втором случае у нас даже не будет запроса на загрузку изображения, что в какой-то степени облегчит и так тяжелую работу для медленного соединения.
Другие возможности
Я показал всего два примера использования Network Information API для оптимизации изображений, но возможности использования намного больше - можно загружать плейсхолдеры вместо видео, можно вообще не загружать изображения на 2g, можно попробовать не загружать какие-то неосновные шрифты, можно даже убирать или подменять целые компоненты... и так далее и тому подобное.
Но надеюсь, что хотя бы этими примерами вызвал к этому интерес и обратил внимание на проблемы с плохим интернетом.
Автор: Илья Туев
