Petar Nikolow - OA Conf 2021
0 likes60 views
This document discusses technical optimization of websites and looks towards the future. It covers the evolution of JavaScript and how Googlebot renders pages, including its transition to rendering JavaScript. It also discusses various techniques for optimizing sites such as server-side rendering, caching, log file analysis, and optimizing the client-side experience through techniques like reducing JavaScript payload and improving core web vitals. The key takeaways are that technical optimization will become more difficult and expensive over time, requiring experienced developers and infrastructure, and that sites must continuously optimize and modernize code to keep up with changing browser technologies.
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
- 6. Преди Клиент - Браузър UI Сървър Web DB HTTP Requests HTML/CSS
- 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
- 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
- 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