Всем доброго времени суток!
Я написал скрипт changeImgsFormat.js, который меняет атрибуты всем img и image с png/jpg на файлы webp, которые в одноименной папке в каждой директории. Скрипт подключается в head.
Почему Google PageSpeed его не видит?
И как мне это исправить?
Я не могу поменять тэги image на img, потому что к image применины маски, которые их обрезают по нужной форме.
Вот этот сайт:
umark.it
Вот мой скрипт, который берёт все тэги img и image из html и меняет им источник картинки на картинку webp, если браузер поддерживает.
// Функция проверки поддержки браузером формата webp
const canUseWebp = function () {
// Создаем элемент canvas
let elem = document.createElement('canvas');
// Приводим элемент к булеву типу
if (!!(elem.getContext && elem.getContext('2d'))) {
// Создаем изображение в формате webp, возвращаем индекс искомого элемента и сразу же проверяем его
return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0;
}
// Иначе Webp не используем
return false;
}()
// Устанавливаем тэгу html класс webp или no-webp, чтобы в стилях ставить нужные картинки
const setClassToBody = (() => {
document.documentElement;
if (canUseWebp) {
document.documentElement.classList.add('webp')
} else {
document.documentElement.classList.add('no-webp')
}
})();
document.addEventListener('DOMContentLoaded', () => {
const allImgs = [document.querySelector('.why__lightning'), document.querySelector('.why__target')];
//здесь будут все тэги, для которых будем менять источник изображения, если браузер поддерживает webp
const workersImgs = document.querySelectorAll('.animated-mask__img');
const caseItemsImgs = document.querySelectorAll('.case__item');
function iterateArray(data) {
const {
arrayToIterate,
arrayToPush
} = data;
for (let i = 0; i < arrayToIterate.length; i++) {
arrayToPush.splice(2, 0, arrayToIterate[i])
}
}
(function pushEverythingToAllImgs() {
iterateArray({
arrayToIterate: workersImgs,
arrayToPush: allImgs
});
iterateArray({
arrayToIterate: caseItemsImgs,
arrayToPush: allImgs
});
})()
allImgs.forEach((item, index) => {
const content = item.outerHTML;
if (canUseWebp) {
function changeDiretionToFile(data) {
const {
typeOfSource,
dirToImg,
newExt
} = data;
const srcArray = dirToImg.split('/');
const lastSrcArrayItem = srcArray[srcArray.length - 1];
const fileName = lastSrcArrayItem.split('.');
fileName[1] = newExt; //2ой элемент массива из имени файлы, т.е. расширение файла
const fileNameNewExt = fileName.join('.')
srcArray[srcArray.length - 1] = `webp/${fileNameNewExt}`
// console.log(srcArray[srcArray.length-1])
const newDirectionToFile = srcArray.join('/')
//console.log(newDirectionToFile)
item.setAttribute(typeOfSource, newDirectionToFile)
// item.setAttribute('src',)
}
if (content.includes('<img')) {
const typeOfSource = 'src';
const src = item.getAttribute('src');
changeDiretionToFile({
typeOfSource: 'src',
dirToImg: src,
newExt: 'webp'
})
//webp-картинки лежат рядом с картинками в папке webp/, чтобы не было путаницы, если картинок много
}
if (content.includes('<image')) {
const href = item.getAttribute('href');
changeDiretionToFile({
typeOfSource: 'href',
dirToImg: href,
newExt: 'webp'
})
}
}
});
})
Вот на эти картинки жалуется Google PageSpeed, хотя скрипт отрабатывает правильно
