Less is more

ЗдравейтеПетър НиколовPeter Nikolow

Можете да ме намерите:

twitter.com/peternikolowfacebook.com/peter.nikolowlinkedin.com/in/peternikolowplus.google.com/+peternikolow

“We must deliver and render the above the fold (ATF) content in

under one second, which allows the user to begin interacting with the

page as soon as possible

https://developers.google.com/speed/docs/insights/mobile

Рендиране на мобилна страница за 1 секунда

DNS преобразуване

Рендиране от браузъра

Сървърна обработка

HTTP заявка и отговор

TCP свързване

200 ms 200 ms200 ms 200 ms 200 ms

600 ms идващи от 3G мрежата които не може да бъдат оптимизирани

400 ms които може да бъдат оптимизирани от Вас

https://developers.google.com/speed/docs/insights/mobile

Theory

1. if you can do it in HTML, don’t use CSS2. if you can do it in CSS, don’t use JS3. if all else fails use JS

https://developers.google.com/web/fundamentals/performance/?hl=en

Practical - desktop

Resource Nov 2010 Nov 2017

HTML 34k 53k

Stylesheets 25k 90k

Scripts 113k 459k

Fonts 2k 113k

Total 702k 3422k

http://httparchive.org

Praticle - mobile

Resource Jun 2010 Nov 2017

HTML 42k 50k

Stylesheets 20k 86k

Scripts 80k 440k

Fonts 1k 94k

Total 377k 3051k

http://httparchive.org

Какво се промени?Veni, vidi, vici!

Plan AОптимизация на съдържанието със използването на framework

Plan A

▷ Apple - News▷ Facebook - Instant Articles▷ Google, Twitter, WordPress - AMP

▷ “Carrot and stick” motivation principle

▷ Tools - plugins

“Q: Where is AMP going?

A: I'm not at the level I can disclose that.

Maile OhyeSEJSummit 13 Apr

https://twitter.com/jenstar/status/720308428493561856

Plan BОптимизация на съдържанието със премахване на излишното

Scripts

▷ Remove unused JS scripts▷ Minimize JS scripts▷ Vanilla JS

Scripts

▷ Tools - YellowLab Tools, any text editor, WebDev tools, Analytics, WebPageTest

▷ GitHub - vanilla js▷ “You Might Not Need jQuery”▷ “You Might Not Need JavaScript”

“Parse times on mobile were 36%

higher than on desktop

https://medium.com/reloading/javascript-start-up-performance-69200f43b201

Scripts

Fonts

▷ Minimize fonts usage▷ Fonts are render blockers!▷ Optimize fonts delivery:

○ EOT/TTF/WOFF/WOFF2

▷ Use built-in fonts:○ Arial, Helvetica, Verdana, Geneva,

sans-serif○ Tahoma, Georgia, Times, “Times New

Roman”, serif○ "Courier New", Courier, Monaco,

monospace

Images

▷ Choose right format:○ JPG○ PNG○ GIF○ WebP/SVG

▷ Recompress:○ ImageOptim○ TinyJPG/TinyPNG○ JpegMini○ Kraken.IO

▷ HTML5 Picture tag

Styles

▷ Cleanup - 1 file maximum▷ Unused styles ▷ Inline CSS in HEAD▷ Size < 100k

HTML

▷ Divitis▷ DOM elements - count/depth▷ Minimize iFrames▷ Remove CSS style in HTML

ResultsОптимизация на скоростта

Results

Results

Results

Results

Results

Results

▷ Result 1 - 2013 Intuit

http://conferences.oreilly.com/velocity/velocityny2013/public/schedule/detail/30146

Results

▷ Result 2 - 2014 WalmartFrom 7.2 to 2.9 secs:Up to 2% conversion ratio for each second improvements.

https://www.radware.com/PleaseRegister.aspx?returnUrl=6442455868

Results

▷ Result 4○ Google

500 ms slower = 20% drop of traffic

○ Yahoo400 ms slower = 5-9% drop in full-page traffic

○ Amazon100 ms slower = 1% drop in sales

○ Mozilla - 60M YoY1 sec faster = +2.7% more downloads2.2 sec faster = +15.4% more downloads

Results - 4Sales.bg

▷ 2013-15○ време на зареждане - над 10-15

секунди (HTML)

○ 5-10 поръчки▷ 2016

○ VPS, PrestaShop ○ време на зареждане - 5 секунди○ 20-25 поръчки

▷ 2017○ време на зареждане - 1-2 секунди○ 35 поръчки

Results - 4Sales.bg

▷ 2017 - черен петък○ Dedicated server + Memcached○ време на зареждане - <1 секунда○ 45-55 поръчки○ “таблети” - от 70та позиция на 17та○ 1.2 MB CSS; 0,5 MB JS; 0.4 MB Fonts

▷ 2017 - Коледа○ Още по-бързо цялостно зареждане -

HTML, CSS, JavaScript, Images○ Home page 10s -> 3s○ Categories page 10s -> 3s○ Product page 14s -> 5s

Gifts

▷ Themes○ http://ok.bgdn.net○ http://stx.bgdn.net/index.html

AMP

Благодаря!Въпроси?