webo_ru
452 subscribers
3 links
Оптимизация web-сайтов (ведёт @vithar). Обсуждать и задавать вопросы в https://t.me/frontend_ru. English version: https://t.me/webo_en
Download Telegram
Channel created
Попробую формат Телеграма. Буду писать про то, что сейчас делаю в своей текущей работе по оптимизации поиска Яндекса.

Обсуждать и задавать вопросы предлагаю в https://t.me/frontend_ru
При оптимизации по размеру важно помнить, что результат, как правило, будет сжат gzip'ом и любые сравнения надо производить после сжатия.

Рассмотрим на примере.

Функция определения поддержки браузером SVG, которая выставляет класс ua_svg_yes или ua_svg_no на <html>:

(function(d,n){d.documentElement.className="ua_svg_"+(d[n]&&d[n]("http://www.w3.org/2000/svg","svg").createSVGRect?"yes":"no")})(document,"createElementNS")

Кажется, что тут всё оптимально и сделать меньше уже нелья. Специально обернули в функцию, передали в неё повторяющиеся части, которые превратились в однобуквенные переменные.

Да, но нет. Код ниже больше по размеру (161 байт против 157), но после gzip получается меньше (126 против 154):

document.documentElement.className=document.createElementNS&&document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect?"ua_svg_yes":"ua_svg_no"

Это не говоря о том, что второй пример читается гораздо проще, чем первый, на мой взгляд.
Аналогично код для определения retina экрана:

(function(w,e,s,c,x,l,p,d){c="className";x="deviceXDPI";l="logicalXDPI";p="devicePixelRatio";d=x in s&&l in s&&s[x]/s[l]||p in w&&w[p];d>1&&(e[c]+=" i-ua_retina_yes")})(window,document.documentElement,screen)

после «де-оптимизации» стал таким

(screen.deviceXDPI&&screen.logicalXDPI&&screen.deviceXDPI/screen.logicalXDPI||window.devicePixelRatio)>1&&(document.documentElement+=" i-ua_retina_yes")

Было 191 байт, стало 125.
Сегодня про оптимизацию SVG.

SVG — это текстовый формат. Важно помнить, что он при передаче по сети скорее всего будет gzip'ован. Так что все сравнения надо делать после сжатия (см. выше).

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

SVG можно вставлять непосредственно в DOM, как изображение в IMG или как фон. Если изображение небольшое и используется для оформления, то лучше использовать его как фон через data:uri (https://ru.wikipedia.org/wiki/Data:_URL), но не base64, а URLEncoded (https://ru.wikipedia.org/wiki/URL#Кодирование_URL). В этом случае только небольшой набор символов кодируется, а остальные остаются как есть и потом хорошо сжимаются.

Для оптимизации SVG лучше всего использовать SVGO (https://github.com/svg/svgo)

Я использую такой набор параметров:

svgo -p 2 --multipass --enable=removeDesc --enable=removeTitle --enable=sortAttrs --enable=removeViewBox --enable=removeStyleElement

Как правило, этим и ограничиваются.

Но если хочется максимального контроля над размером изображения — нужно смотреть из чего оно состоит и можно ли что-то улучшить/упростить.

Полезно знать, из чего состоят SVG изображения. Это позволяет «нарисовать» его в текстовом редакторе гораздо эффективнее, чем в графическом. Хорошие статьи про SVG на русском — http://css.yoksel.ru/tags/#svg

Ещё один вариант оптимизации, про который мало кто знает и применяет — увеличение изображения, чтобы у точек не было дробных координат.

Вот пример оптимизированного таким образом изображения:

https://yastatic.net/web4/_/BM4YHAtH2zfvUiPvyhZHMkaXw4w.svg

Там же можно увидеть пример использования xlink, но не всегда это даёт наименьший размер, иногда gzip лучше, чем использование symbol.