Petar Nikolow - OA Conf 2021

1. Съвременни начини за техническа
оптимизация на сайтове
Решаване на технически проблеми
през 2021
Поглед към бъдещето

2. Здравейте
Петър Николов
Peter Nikolow
Можете да ме намерите:
twitter.com/peternikolow
facebook.com/peter.nikolow
linkedin.com/in/peternikolow
Product Expert - Google Webmaster Help
Forum

3. JavaScript
“But Marc Andreessen of Netscape, Bill Joy of Sun,
and myself and a few others saw that there was a
need for a language that was approachable, that you
could put directly in the web page”
Brendan Eich

4. Първи стъпки
Нaчалото

6. Преди
Клиент - Браузър
UI
Сървър
Web DB
HTTP Requests
HTML/CSS

7. Началото
- DHTML

8. След
Клиент - Браузър
UI
Сървър
Web DB
HTTP Requests
HTML/CSS/JS
XML/JSON
AJAX

9. Първи стъпки
- XMLHttpRequest
- GMail
- Google Maps
- jQuery
- MooTools
- YUI

11. Втори стъпки
- Google Wave
- Node.JS
- React
- Angular
- Vue.JS

12. “ДНЕС Е РАЗЛИЧНО!”
ДА АМА НЕ!

15. Googlebot
- 1997 - 2009 - static HTML
- 2009-2015 - AJAX Crawling
- 2015 - JavaScript rendering

16. JavaScript Rendering 2014-2019

17. JavaScript Rendering 2018-today

18. Googlebot
- Blackbox - no logs, no rendered
HTML
- Google Evergreen Bot
- Chrome Developer Tools
- Mobile Friendly Test (MFT)
- Rich Results Test (RRT)
- AMP Test
- Single URL Inspection Tool (SUIT)

19. Googlebot is Evergreen
Timeframe - week

20. Crawling Report

21. Log file analysis
- ELK stack
- Screaming Frog
- Botify
- SEMRush
- Seolyzer
- OnCrawl
- JetOctopus
- NetPeak?

22. From Zero to Hero
Site Pages
Crawled Pages
Indexed Pages
Search Traffic
Pages
Money Pages
$$$
M
O
N
E
Y
$
€
£
₴
C
O
U
N
T

23. Stack Optimization
- Client Side
- Core Web Vitals
- Chrome APIs
- Ship Less
- Server Side
- Crawling optimization
- Efficient caching
- Efficient scaling

24. Server Side
Web Server
Language
PHP
CMS
Ecommerce
Plugins
DB Server
Themes
Static files
DB

25. Server Side
Сървър
Web DB

26. Server Side Caching
Сървър
Web DB
CDN
Caching

27. JS Rendering

28. Server Side Caching + SSR
Сървър
Web DB
CDN
Caching
SSR
Static
files
SSR
Server
Fram

29. JS Rendering

30. Server Side Rendering
- Self Hosted
- Woo
- OpenCart
- PrestaShop
- Magento
- SaaS
- GombaShop
- CloudCart
- Seliton
- DreamShop

31. “
Dynamic rendering is not cloaking
Googlebot generally doesn't
consider dynamic rendering as
cloaking. As long as your dynamic
rendering produces similar content,
Googlebot won't view dynamic
rendering as cloaking.
https://developers.google.com/search/docs/guides/dynamic-rendering

32. Rendering
- Infracost
- 5000 products x 100 kb = 500MB
- 5000 category pages x 100 kb = 500MB
- Home Page x 100 kb = 100 kb
- Total = ~ 1Gb

33. Rendering
- Time
- 5s rendering - 10000 pages
- 50000 secs, 833 mins, 13 ¾ hours
- 2s rendering - 10000 pages
- 20000 secs, 333 min, 5 ½ hours
- 1s rendering - 10000 pages
- 10000 secs, 166 mins, 2 ¾ hours

34. Rendering
- Tools
- Headless Chrome
- Puppeteer
- Server - VPS, Dedicated
- Serverless
- AWS Lambda
- GCP AppEngine, CloudFunctions, CloudRun
- Azure Functions

36. Client
- Core Web Vitals - CWV
- Lighthouse
- CrUX - Chrome User Experience Report
- Chrome

37. Client

38. Client
- Hacks
- LCP
- .hero{ background: linear-gradient(140deg,
#004990e6, #00499057) }
- FID
- Reduce JS
- Reduce network requests
- Minimize main thread

39. Client
- CLS

40. Client

41. Client

42. Client

43. Client

44. Core Web Vitals
- “Nothing important, will be
lightweight ranking signal”
- Just few other tests
- GMail
- Maps
- Chrome
- Android

45. Web APIs
- Networking API
- Chrome Data Saving (Lite Mode)
- Resource Hints
- Reporting API
- Other

46. Web APIs
- Lite Mode
Client Server
GET
HTML
Client Server
GET
save-data: on
Lite
HTML

47. Web APIs
- Client Hints - HTTPS
Client Server
GET
HTML
Accept-CH: ECT
Client Server
GET CSS/JS/IMG
ECT: 2g
CSS/JS/IMG

48. Web APIs
- Networking API
- YouTube “Web Zurich Virtual Meetup
July 2020” 55:00+
- No support for Safari
- Reporting API
- Warning, Errors, Violation
- Network Errors
- Crash Reports

49. Web
- Cookieless
- JavaScriptless
- HTTP Partition Cache
- 3rd party resources
- GA, Fonts, JS
SiteA
SiteB
SiteC
SiteB
SiteA
SiteC
Before
After

50. Изводи
Техническата оптимизация ще става все по-
трудна и скъпа.
Ако искате да се представяте по-добре
задължително трябва да имате опитни Devs,
DevOps, Admins и по-хубава инфраструктура.
Информирайте се за новости от Браузърите.
Не се колебайте да изхвърлите мъртъв код
или да напишете по-оптимален такъв.

51. Изводи
Времето когато се правеше сайт и не се буташе
със години безвъзвратно отмина.
Оттук насетне предстоящите промени ще са все
по-чести, все по-големи и все по-брутални.
Рекорд - >11000% ROI

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