webo_en

@webo_en Нравится 0
Это ваш канал? Подтвердите владение для дополнительных возможностей

Web sites optimization (by @vithar). Russian version: https://t.me/webo_ru
Гео и язык канала
не указан, Английский
Категория
Технологии


Гео канала
не указан
Язык канала
Английский
Категория
Технологии
Добавлен в индекс
19.06.2018 13:26
реклама
TGStat Bot
Бот для получения статистики каналов не выходя из Telegram
SearcheeBot
Ваш гид в мире Telegram-каналов
TGAlertsBot
Мониторинг упоминаний ключевых слов в каналах и чатах.
84
подписчиков
~0
охват 1 публикации
~1
дневной охват
N/A
постов в день
N/A
ERR %
0.11
индекс цитирования
Последние публикации
Удалённые
С упоминаниями
Репосты
webo_en 9 Aug 2017, 00:01
About SVG

SVG is a text format and in most cases it will be compressed before network transfer, so do any comparision after gzip (see above).

I advice to choose SVG in most cases bacause of its vector nature. It scales well on any device.

You can insert SVG in DOM, as an image using IMG or place it on background in CSS. When an image is small and is used as decoration it is better to place it in CSS background property as data:uri (https://en.wikipedia.org/wiki/Data_URI_scheme) using URLEncode method (https://en.wikipedia.org/wiki/Percent-encoding).

I use SVGO (https://github.com/svg/svgo) to optimize my images with such parameters:

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

Typically it is enough.

But if you want to fine-tune SVG image and achieve minimal image size you need "to go deeper". In some cases it is better to "draw" an image in text editor instead of visual one. So I suggest to learn SVG internals, e.g. using this tutorial: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial

And one more rarery used thing about SVG optimization. Usually SVG has the same dimentions as will be used on web page. In such case vector coordinates may be fractional and it can increase file size. You may scale image to place vector points on pixel grid.

Example:

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

BTW, you may find an example of xlink usage there but that's not always the best way. Sometimes gzip works better than symbol.
Читать полностью
webo_en 2 Aug 2017, 23:58
When you optimizing size keep in mind that final result will be gziped before network transfer. Every comparision must be done after compression.

Let's see an example.

This is a function to detect if browser has SVG support or not:

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

At first look you may consider that this is optimal solution and there is nothing to improve there. We used function, passed repeated parts as one letter params.

We can do better! The code below is bigger (161 bytes versus 157), but after gzip it is smaller (126 bytes versus 154):

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

And it is easier to read IMHO.

The same for the code which detects retina display:

(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)

After "de-optimizing" it is smaller and easier to read (191 byte versus 125):

(screen.deviceXDPI&&screen.logicalXDPI&&screen.deviceXDPI/screen.logicalXDPI||window.devicePixelRatio)>1&&(document.documentElement+=" i-ua_retina_yes")
Читать полностью
webo_en 2 Aug 2017, 23:56
Notes about web site optimizations, based on my tasks on optimizing Yandex search result page.