@konstant1n13

Google PageSpeed не видит мой скрипт замены картинок на webp. Что делать?

Всем доброго времени суток!

Я написал скрипт 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, хотя скрипт отрабатывает правильно
6070b148ac09c297766172.png
  • Вопрос задан
  • 79 просмотров
Решения вопроса 1
iiiBird
@iiiBird
Пока ты спишь - твой конкурент совершенствуется
ну как бы от того что ты их поменял - они не перестали загружаться в браузере. ты по сути даже хуже сделал. у тебя сначала грузятся jpg/png, а потом в добавок webp.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
ThunderCat
@ThunderCat
{PHP, MySql, HTML, JS, CSS} developer
Вот мой скрипт, который берёт все тэги img и image из html и меняет им источник картинки на картинку webp, если браузер поддерживает.
Откройте для себя тег picture! И да - iBird Rose абсолютно прав, вы только хуже наколхозили.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы