Ускоряем загрузку сайта наглядно с помощью Autoptimize

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

http://hi-tech-remont.com/beyerdynamic-dt-770-pro-i-zamena-ambushyur/

Jetpack

Jetpack косячит своим ускорением загрузки изображений Photon – все картинки в HTML перенаправляет на свой сайт и таким макаром картинки быстрее грузяться с сервера https://i1.wp.com/ но куча нового кода в HTML и некоторые картинки перестали отображаться (особенно файлы у которых были в названии символы кириллицы ).

Плюс, были замечены ошибки уже загруженных картинок – картинка не отображалась, а если кликнуть по ней правой кнопкой и открыть картинку в новой закладке – закладка ругалась “We cannot complete this request, remote data could not be fetched“.
На англоязычном сайте одна блогерша рассказала о своем счастье – просто отключила ускорение загрузки изображений Photon от Jetpack и типа даже сайт стал быстрее загружаться. Здесь она может и права – HTML сайта стал чище от оптимизатора Photon и быстрее всего у нее там по одной картинке на страницу, и там незначительный прирост, а вот если на сайте по 3 или даже 20 картинок на сайте –  Photon ускорял заметно (смотри ниже анализ скорости).

Отключаем эту какашку и смотрим от гугл проверку скорости pagespeed:

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fhi-tech-remont.com%2Fremont-telefonov-huawei-zamena-stekla-tachskrina-displeya-akb-gnezda-sc-v-moskve-na-gorbushke%2F&tab=mobile

  • Вкл Photon

моб / ПК
18 / 59
22 / 68
20 / 69
21 / 66

  • Выкл Photon

17 / 41
18 / 41

 

Как видим – сайт стал медленнее загружаться. Тест проводить надо несколько раз чтобы примерно видеть примерную скорость.

Autoptimize

Теперь просто установим плагин Autoptimize от Автора Frank Goossens (futtta) и ничего не активируя в нем проверим скорость.

19 / 63
20 / 69

Уже скорость примерно как с использованием Photon. Удивительно! Это мы еще не включали Lazy Load и оптимизацию Java, CSS и HTML.

Становиться все интересней 🙂

Включаем ленивую загрузку изображений Lazy Load и смотрим скорость.

17 / 62
22 / 66
16 / 61

Примерно такая же скорость. Хм.

Включаем “оптимизировать код JavaScript”.

32 / 64
31 / 77

На мобильной версии и ПК получили примерно по +10 в скорости 🙂

Вкл “Оптимизировать код CSS ”

37 / 77
41 / 92
35 / 90

На мобильной примерно +10 , на ПК +20 🙂

Вкл “Оптимизировать код HTML”

37 / 93
43 / 94
48 / 94
41 / 92

Супер!

И это всего за пол часа с записями и экспериментами.

Мобильную версию еще надобно поковырять но уже легче сайту:)

Дополнительно было протестировано все включенное быстро меняется на старое при деактивации плагина. То-есть откатить сайт есть шансы:)

Оставьте комментарий