0
73
2019-01-16

Gtmetrix.com - Как сразу загрузить все оптимизированные изображения

Как загрузить оптимизированные Gtmetrix.com изображения? Уверен моё решение пригодится Вам во время оптимизации или ускорения очередного сайта.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

В данной статье я поделюсь своим решением для быстрой загрузки уже оптимизированных изображений которые сервис gtmetrix.com любезно предоставляет нам после анализа нашего сайта в таком виде (ссылки на скриншоте перечеркнуты из-за сео плагина который добавляет свои стили к nofollow ссылкам):

Gtmetrix.com - отображение списка изображений для оптимизации

Данный отчет не плох, да и сжатие изображений сервис делает неплохо, но вот только реализация как загрузки файлов так и имен оптимизированных файлов желает лучшего. Поэтому я придумал свое решение чтобы максимально ускорить загрузку оптимизированных картинок с сервиса.

Чтобы воспользоваться данным решением откройте консоль разработчика в браузере Chrome (F12).

Chrome - Консоль в режиме разработчика

И на вкладке консоль введите скрипт написанные ниже. Так как изображений на проектах которые я делаю в основном не более 30 или 20 штук, это соответственно не составляет огромного труда просто прощелкать по ссылкам которые скрипт предоставляет в консоли.

Gtmetrix.com - результат работы скрипта для изображений в режиме разработчика Chrome

Далее после того когда все ссылки были прощелканы в ручную, изображения оптимизированные сервисом будут открыты в новых вкладках браузера - просто сохраните их в удобное место и переименуйте соответствии имени оригинала.

После данных манипуляций остается только сохранить оптимизированные изображения в соответствии местоположения оригинальных изображений в папках вашего сайта.

Скрипт для получения ссылок оригинального и оптимизированного изображения в Gtmetrix.com

jQuery(document).ready(function($){
        console.log('%c Получаем данные о изображениях:', 'color: black; font-size:18px;font-weight: bold;padding:0;margin:0;','\n');

        var Tab = $('#pagespeed > div > div.layout-cols-content > table > tbody > tr p:contains("Optimize the following images to reduce")');
        var Search = Tab.next('ul').find('a:contains("optimized version")');

        Search.each(function(){

            console.log('%c Оригинальное изображение:', 'color: black; font-weight: bold;padding:0;margin:0;','\n');

            var Prev_link = $(this).prev('a').text();
            console.log(Prev_link);

            console.log('%c Оригинальный путь к изображению:', 'color: black; font-weight: bold;padding:0;margin:0;','\n');

            var Prev_link = $(this).prev('a').attr('href');
            var val=Prev_link;
            // Получаем название файла
            console.log(val.substring(0, val.lastIndexOf('/'))+'/');

            console.log('%c Оригинальное название изображения:', 'color: black; font-weight: bold;padding:0;margin:0;','\n');

            var Prev_link = $(this).prev('a').attr('href');
            var val=Prev_link;
            // Получаем название файла
            console.log(val.substring(val.lastIndexOf('/')+1,val.length));               

           console.log('%c Оптимизированное изображение:', 'color: black; font-weight: bold;padding:0;margin:0;','\n');

            var link = $(this).attr('href');
            console.log('https://gtmetrix.com'+link);
            console.log('\n');

        });

        console.log('%c Все данные о оптимизированных изображениях были получены.', 'color: black; font-size:18px;font-weight: bold;padding:0;margin:0;','\n');
        console.log('%c ---------------------------------------------------------', 'color: black; font-size:18px;font-weight: bold;padding:0;margin:0;','\n');
});

Скрипт для получения всех путей к оригинальным изображениям в Gtmetrix.com

jQuery(document).ready(function($){
        console.log('%c Получаем все пути к файлам:', 'color: black; font-size:18px;font-weight: bold;padding:0;margin:0;','\n');
        var Tab = $('#pagespeed > div > div.layout-cols-content > table > tbody > tr p:contains("Optimize the following images to reduce")');
        var Search = Tab.next('ul').find('a:contains("optimized version")');

        Search.each(function(){
//          console.log('%c Оригинальный путь к изображению:', 'color: black; font-weight: bold;padding:0;margin:0;','\n');

            var Prev_link = $(this).prev('a').attr('href');
            var val=Prev_link;
            // Получаем путь к файлу
            console.log(val.substring(0, val.lastIndexOf('/'))+'/');

        });
        console.log('%c Все пути были получены.', 'color: black; font-size:18px;font-weight: bold;padding:0;margin:0;','\n');
});

И не забывайте что сервис хранит ресурсы отчета (а значит и оптимизированные изображения тоже) только в течении трех дней.