S.Tominoff

Fullstack JavaScript разработчик

Трускрин

Лендос под аппарат для диагностики рака шейки матки.

Этот лендинг используется для рекламы и продажи какой–то убер штуки для врачей гинекологов. Изначально моя роль в проекте заключалась только в настройке скриптов и целей GA/YMetrika (в том числе отслеживание действий над видео).

После релиза мы перелопатили некоторые блоки и занялись серьёзным упрощением форм (проектировались они с учётом пожеланий заказчика и получились довольно громоздкие).

 

Спустя еще некоторое время, я внедрил на сайте определитель города на основе SypexGeo (что позволило нам отказаться от полей «город/регион»), а также определение часового пояса пользователя (чтобы клиент случайно не позвонил пользователю в ночное время).

 

Занимался мелочами по вёрстке, аля заменить картинки/текст, добавить/удалить блок, написать скрипт центрирования модалок и прочее в том же духе.

 

Самый большой геморрой с этим проектом начался на стадии оптимизации сайта. Google page speed упорно отказывался верить что все изображения оптимизированы должным образом (я использовал связку tinypng и imagemin), причём цифры гугл показывал довольно серьёзные от 20 до 30% упущенной компрессии, и соответственно, выставлял рейтинг в 74 попугайчика!

 

> > >

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

< < <

 

В итоге решил сделать предобработку всех изображений вручную с помощью Gimp, с приемлемой потерей качества. В итоге каталог с сырыми изображениями уменьшился с 2.8 до 2.3mb, а в скомпилированном виде с 2.1 до 1.8mb. Результат этих оптимизаций можно видеть на следующем скрине

 

 

Тесты от pingdom:

 

 

Мораль: никогда не доверяйте выхлопу дизайнера – как правило, они делают изображения с максимальным качеством, не глядя на размер файла. Это хорошо, несомненно, однако если Вашей целью является всесторонняя оптимизация сайта – обязательно ищите узкие места, в том числе, среди изображений — как правило, в некоторых случаях можно пренебречь потерей качества, при этом получив максимально оптимизированный файл.