Google PageSpeed Insights: автоматическая оптимизация изображений сайта


23-07-2018
Денис Л.
Оптимизация сайта
5

Google PageSpeed Insights: автоматическая оптимизация изображений сайта

Оптимизация сайта - дело непростое. Необходимо учитывать огромное количество факторов.

Особенно долго можно переносить изображения, например, в таких системах как Wordpress или Битрикс, поскольку там каждое изображение находится в отдельной папке. И если таких папок более 100, а в интернет-магазинах и более 1000, то процесс копирования изображений может занять несколько дней рутинной работы...

Я, как веб-разработчик, регулярно занимаюсь оптимизацией сайтов, и однажды пришла идея написать скрипт, который делает это всё в автоматическом режиме.

Поскольку сервис Google PageSpeed анализирует за один раз только одну конкретную страницу, данный скрипт оптимизирует только те изображения, которых входят в этот анализ (т.е. изображения на одной конкретной странице). Если Ваш сайт находится на выделенном сервере, Вы хорошо владеете консолью и хотя бы немного знакомы с Node.js, то Вам будет более интересен мой пост "Node.js: как рекурсивно сжать все изображения на сайте за 1 час".

Если кроме оптимизации изображений Вы хотите значительно увеличить скорость загрузки своего сайта, то об этом подробнее я пишу в посте: "Скорость загрузки сайта и как её увеличить".

Скрипт для оптимизации изображений, полученных с сайта developers.google.com/speed/pagespeed/insights/


Ссылка на bitbucket: https://bitbucket.org/lisogorsky/dev/src/master/copyImgFromGoogle/


Первоначальные действия:

  1. Заходим на сайт через ftp-клиент
  2. Создаём в корне сайта папку с именем _image_min
  3. Создаём файл с расширением .php (например imgMinCopy.php), в который копируем код, который идёт чуть ниже

Для начала работы необходимо дать файлу скрипта права 0755. Потом делаем обратно 0644 (!)

Делаем анализ сайта через сервис https://developers.google.com/speed/pagespeed/insights/

Находим блок с названием "Оптимизируйте изображения"

Ищем в этом блоке фразу: "Оптимизируйте следующие изображения, чтобы уменьшить их размер на ..."

Кликаем по этой строчке правой кнопкой мыши, выбираем "Просмотреть код".

Открывается встроенный в браузер редактор кода.

Ищем <div class="url-block">

Кликаем два раза по "url-block", нажимаем стрелку вправо на клавиатуре (чтобы не затереть название "url-block" и добавляем класс "my").

Должно получиться: <div class="url-block my">

Переходим на вкладку Console, вводим туда код ниже:

let urls=document.querySelectorAll('.url-block.my [data-title]');let arr = []; let result = [];
for(let i=0;iarr.push(urls[i].dataset.title);}
for(let i in arr){let ddd=(arr[i].split('/')).slice(3);result.push(ddd.join('/'));}
console.log(result);  // ---> в итоге мы получаем массив из нужных ссылок на изображения

Скачиваем с сайта Google PageSpeed Insights папку с оптимизированным контентом. Извлекаем содержимое папки с изображениями.

В папку с именем "_image_min" (которую мы создавали ранее) размещаем оптимизированные изображения, полученные от Google


Ниже привожу код файла imgMinCopy.php

<?php header('Content-Type: text/html; charset=utf-8');

$imgMinFolder = '_image_min/';

$backupFolder = 'backup/'.date("H-i-s_d-m-Y"); $imgArr=[]; $i=0;

$imgPath = []; // сюда вводим массив ссылок на те изображения, которые нужно оптимизировать (массив берём из pagespeed)

foreach(glob($imgMinFolder.'*.*') as $filename) {
	$name = strstr($filename, '/');
	foreach($imgPath as $path) {
		if(strpos(mb_strtolower($path), $name)) {$arr = [substr($name,1), $path];}
	}
	array_push($imgArr, $arr);
}

mkdir($imgMinFolder.$backupFolder, 0755, true);
foreach($imgPath as $img) {
	$nameBackup = strrchr($img,'/');
	if(copy($img, $imgMinFolder.$backupFolder.$nameBackup)) {$backupResult = true;}
}

// echo "<pre>";
// print_r($imgArr);

echo "<table style='border-collapse:collapse;border-spacing:2px;'><style>td{border:1px solid;padding:2px 10px}</style>";
foreach($imgArr as $keys) {
	$file = $imgMinFolder.$keys[0];
	$newPath = $keys[1]; $i++;
	if(copy($file, $newPath)) {
		echo "<tr><td style='text-align:right'>{$i}</td><td>Файл {$file}</td><td><b style='color:#0bef0b'>успешно</b></td><td>скопирован по пути: /{$newPath}</td></tr>"; unlink($file);
	}else{
		echo "<tr><td style='text-align:right'>{$i}</td><td>Файл {$file}</td><td><b style='color:red'>не удалось скопировать</b></td><td>по пути /{$newPath}</td></tr>";
	}
}
echo "</table>";

if($backupResult) echo "<h3>Создана резервная копия заменяемых изображений по адресу: {$imgMinFolder}{$backupFolder}</h3>";

?>

Далее заходим по адресу вашего сайта и после слеша указываем имя скрипта, например: http://сайт.ru/imgMinCopy.php

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


Видео-инструкция (без звука)

Читайте также:

Автоматическая адаптация iframe на сайте

Скорость загрузки сайта и как её увеличить