Попробую формат Телеграма. Буду писать про то, что сейчас делаю в своей текущей работе по оптимизации поиска Яндекса.
Обсуждать и задавать вопросы предлагаю в https://t.me/frontend_ru
Обсуждать и задавать вопросы предлагаю в https://t.me/frontend_ru
Telegram
Frontend_ru
Русскоговорящее сообщество фронтенд разработчиков
Каналы: @frontendnoteschannel @defront
Чаты: @bem_ru @javascript_ru @css_ru
Важно! http://nometa.xyz
Каналы: @frontendnoteschannel @defront
Чаты: @bem_ru @javascript_ru @css_ru
Важно! http://nometa.xyz
При оптимизации по размеру важно помнить, что результат, как правило, будет сжат gzip'ом и любые сравнения надо производить после сжатия.
Рассмотрим на примере.
Функция определения поддержки браузером SVG, которая выставляет класс
Кажется, что тут всё оптимально и сделать меньше уже нелья. Специально обернули в функцию, передали в неё повторяющиеся части, которые превратились в однобуквенные переменные.
Да, но нет. Код ниже больше по размеру (161 байт против 157), но после gzip получается меньше (126 против 154):
Это не говоря о том, что второй пример читается гораздо проще, чем первый, на мой взгляд.
Рассмотрим на примере.
Функция определения поддержки браузером 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 экрана:
после «де-оптимизации» стал таким
Было 191 байт, стало 125.
(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.
Этот же канал на английском: https://t.me/webo_en
Telegram
webo_en
Web sites optimization (by @vithar). Russian version: https://t.me/webo_ru
Сегодня про оптимизацию 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)
Я использую такой набор параметров:
Как правило, этим и ограничиваются.
Но если хочется максимального контроля над размером изображения — нужно смотреть из чего оно состоит и можно ли что-то улучшить/упростить.
Полезно знать, из чего состоят SVG изображения. Это позволяет «нарисовать» его в текстовом редакторе гораздо эффективнее, чем в графическом. Хорошие статьи про SVG на русском — http://css.yoksel.ru/tags/#svg
Ещё один вариант оптимизации, про который мало кто знает и применяет — увеличение изображения, чтобы у точек не было дробных координат.
Вот пример оптимизированного таким образом изображения:
https://yastatic.net/web4/_/BM4YHAtH2zfvUiPvyhZHMkaXw4w.svg
Там же можно увидеть пример использования xlink, но не всегда это даёт наименьший размер, иногда gzip лучше, чем использование symbol.
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.
Wikipedia
data: URL
data: URL — определённая стандартом RFC 2397 схема, которая позволяет включать небольшие элементы данных в строку URL, как если бы они были ссылкой на внешний ресурс. Она гораздо проще альтернативных методов включения, таких, как MIME с cid: или mid:. Согласно…