«
»
GravWEBWordPress

Gtmetrix.com(http://gtmetrix.com/) – Как сразу загрузить все оптимизированные изображения

В данной статье я поделюсь своим решением для быстрой загрузки уже оптимизированных изображений которые сервис 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'); });

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

Связанные записи
ElementorWordPressПлагиныПолезные сайты

Elementor - 10 потрясающих мест для поиска бесплатных или премиальных шаблонов

Chrome DevToolsGoogleGoogle ChromeWEB

Запускайте фрагменты JavaScript на любой странице с помощью Chrome DevTools

MailChimpWordPressПлагины

5 лучших плагинов WordPress для Mailchimp (большинство из них бесплатны)

WoocommerceWordPressПлагины

Дропшиппинг: Как импортировать продукты AliExpress в WooCommerce при помощи плагина DropshipMe