Źródła: 1. https://www.statista.com/statistics/216573/worldwide-market-share-of-search-engines/ 2. https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html 3. https://blogs.bing.com/webmaster/october-2019/The-new-evergreen-Bingbot-simplifying-SEO-by-leveraging-Microsoft-Edge 4. https://developers.google.com/search/docs/guides/javascript-seo-basics 5. https://www.youtube.com/watch?v=DK1rJhvTAdM&feature=youtu.be 6. https://www.youtube.com/watch?v=acr3i9UCCZ0&t=1922 7. https://www.onely.com/blog/how-much-content-not-indexed-google-2019/ 8. https://developers.google.com/search/docs/guides/fix-search-javascript 9. https://web.dev/http-cache/#long-lived-caching-for-versioned-urls 10. https://www.youtube.com/watch?time_continue=1071&v=DK1rJhvTAdM 11. https://developers.google.com/web/updates/2018/07/search-ads-speed 12. https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/javascript-startup-optimization 13. https://www.smashingmagazine.com/2016/10/next-generation-server-compression-with-brotli/ 14. https://engineering.linkedin.com/blog/2017/05/boosting-site-speed-using-brotli-compression 15. https://webpack.js.org/guides/code-splitting/ 16. https://webpack.js.org/guides/tree-shaking/ 17. https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript#how_do_i_measure_the_impact_of_third-party_script_on_my_page 18. https://en.wikipedia.org/wiki/Single-page_application 19. https://developers.google.com/web/updates/2018/05/beyond-spa 20. https://web.dev/what-are-pwas/ 21. https://webmasters.googleblog.com/2014/02/infinite-scroll-search-friendly.html 22. https://web.dev/pwa-checklist/ 23. https://moz.com/blog/progressive-web-apps 24. https://www.gatsbyjs.org/ 25. https://developers.google.com/search/docs/guides/dynamic-rendering#troubleshooting

1. SEO
#TarczaAntykryzysowaSenuto
JavaScript
w praktyce

2. Poszukiwanie odpowiedzi na
pytanie, czy JS ma negatywny
wpływ na widoczność strony w
wyszukiwarkach i szukanie
przyczyn tej sytuacji.

3. Agenda
Wyszukiwarki
vs. JS
Czy Google i inne
wyszukiwarki
internetowej potrafią
ogarnąć JS?
WRS
Co trzeba wiedzieć o
Googlowym Web
Rendering Service?
Wydajność
Jak nasz JS wpływa
na prędkość strony?
Przykłady & Chrome
Dev Tools 101.
SPA / PWA
Na co zwrócić
uwagę tworząc SPA i
PWA? Podejścia do
SSR i ich
konsekwencje.

4. Wyszukiwarki
vs. JavaScript
01

5. Świat vs. JavaScript1,2,3

6. Świat vs. JavaScript1,2,3

7. Proces indeksowania stron4

8. - Google4
“The page may stay on this queue for a few
seconds, but it can take longer than that. Once
Googlebot's resources allow, a headless
Chromium renders the page and executes the
JavaScript.”

9. - Martin Splitt (03.2020)5
“You can assume that between initial crawling and
rendering on median there's a delay of 5
seconds and the queue”

10. Które strony zostaną
skierowane do
renderowania?6,7
“Pretty much every website when
we see them for the first time
goes to rendering, so there's no
indexing before it hasn't been
rendered.”

11. Google porówna zwróconą stronę z serwera
z tą wyrenderowaną przez siebie. 6,7

12. Jak sprawdzić co renderujemy przy pomocy JS?
Chrome Dev
Tools
Porównując pierwszą
stronę zwróconą z
serwera z tą finalnie
wyrenderowaną w
przeglądarce.
Wyłącz JS w
przeądarce
Obsługę JS można
wyłączyć samemu
bezpośrednio w
przeglądarce wpisując np.
chrome://settings/conte
nt/javascript
What Would JS
Do?
Narzędzie udostępniane
za darmo przez Onely:
https://www.onely.com/t
ools/wwjd/
WWJD

14. Czy Google poprawnie renderuje
moją stronę?
GSC
URL Inspection Tool

15. Czy Google poprawnie renderuje
moją stronę?
Mobile-
Friendly
Test
https://search.googl
e.com/test/mobile-
friendly

16. Czy Google
poprawnie
indeksuje
moją stronę?
site:url “fragment, którego szukamy”

17. WRS
Web Rendering Service
02

18. - Google8
“Googlebot, wykorzystując usługę renderowania
sieciowego (WRS), stale analizuje i identyfikuje
zasoby, które nie mają wpływu na istotne treści
strony i może ich nie pobierać. “

19. Odrzuci pytania o pozwolenie
na dostęp8

20. Nie zachowa danych z
poprzednich odwiedzin8
Local Storage
Session Storage
Cookies

21. Możliwe, że
zignoruje nagłówki
odpowiedzi
związane z
cachowaniem,
serio.8
“Googlebot caches aggressively
in order to reduce network
requests and resource usage.
WRS may ignore caching
headers.”

23. Content fingerprinting8,9,10
main.js main.2bb85551.js
main.js?version=2bb85551

25. Wydajność
vs. JavaScript11
03

26. Jak przeglądarka przetwarza JS?12
Pobieranie Rozpakowywanie Parsowanie /
Kompilowanie
Renderowanie
01 02 03 04
Źródło: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/javascript-startup-optimization

27. Jak przeglądarka przetwarza JS?12
Rozpakowywanie Parsowanie /
Kompilowanie
02 03
Źródło: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/javascript-startup-optimization

28. 170 KB JS vs 170 KB JPEG12
Pobieranie Parsowanie /
kompilowanie
vs.
Dekodowanie
Renderowanie
vs.
Rasteryzacja
JavaScript 3.4 s 2 s 1.5 s
Obrazek 3.4 s 0.064 s 0.028 s
@addyosmani, Slow 3G, 170KB skompresowane, Moto G4

29. Parsowanie / kompilowanie
chrome://flags/#enable-devtools-experiments

30. Parsowanie / kompilowanie
chrome://flags/#enable-devtools-experiments

31. Shift x6

32. Shift x6

33. Parsowanie / kompilowanie

34. Parsowanie / kompilowanie12
Źródło: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/javascript-startup-optimization

35. Czy pliki są skompresowane?12,13,14

36. Czy pliki są skompresowane?12,13,14

37. Czy przesyłamy tylko to, co niezbędne?12,15,16

38. Czy przesyłamy tylko to, co niezbędne?12,15,16

39. Czy kod jest zminimalizowany?12

40. Jak
analizować
Third
Party?17

41. Jak
analizować
Third
Party?17

42. Jak analizować Third Party?17

43. Jak analizować Third Party?17

44. Jak analizować Third Party?17

45. Co jeszcze ciekawego ukrywa
się w Dev Toolsach?

46. Co jeszcze ciekawego ukrywa
się w Dev Toolsach?

47. SPA / PWA
& SSR
Czyli wszystkie modne skróty na
w jednym miejscu.
04

48. Czym się różnią:
SPAMPA PWA
Klasyk
Nowa strona
=
nowy URL
All in One18
Nowa strona
=
JS aktualizuje stronę
MPA lub SPA
z ikonką na
ekranie19

49. Czym jest
PWA?20
Źródło: https://web.dev/what-are-pwas/

50. O co chodzi z tymi service workerami?19
Źródło: https://developers.google.com/web/updates/2018/05/beyond-spa

51. O co chodzi z tymi service workerami?19
Źródło: https://developers.google.com/web/updates/2018/05/beyond-spa

52. Checklista PWA dla SEO
(checklista PWA dla dev)22
Unikalne URLe
Zmieniamy adresy URL w
pasku przegladarki za
pomoca JS, bez
przeladowania strony.
# to zło.
Web App Manifest
Plik JSON umieszczony w
<head>.
Dostępność
Działa na wszystkich
przegladarkach.
JS & CSS widoczne dla
Googlebota.
Google Analytics
Śledzenie offline
=
Measurement Protocol
Infinite scroll21
Czy działa poprawnie?
SSR!
Czy została wdrożona
jakakolwiek forma SSR
lub prerendering?

53. Jak zapewnić Googlebotowi dostęp do statycznego
HTML?23
DYNAMIC RENDERING HYBRID RENDERING /
ISOMORPHIC JS
JAMstack APPROACH
Crawler otrzyma statyczna
stronę na podstawie User
Agenta. Bot jest traktowany
inaczej niż użytkownicy.
Bot i użytkownicy są traktowani
tak samo. Brak wyjątków na UA.
Bot i użytkownicy są traktowani
tak samo. Brak wyjątków na UA.
Trzeba monitorować osobną
usługę.
Aplikacja działa równolegle na
serwerze i w przeglądarce.
Renderowanie strony to ostatni
etap jej budowania przez
programistów.
Jeśli o niej zapomnimy (rozjedzie
się content pomiędzy wersjami)
możemy podpaść pod cloaking.
Skomplikowana implementacja. Warto sprawdzić: GatsbyJS24

54. Walidacja SSR
URL inspection Tool
lub
Mobile-friendly Test
Structured Data
Testing Tool

55. Problemy z
wyrenderowaną treścią
Niepełna strona lub wygląda
inaczej niż powinna.
Wysokie czasy
odpowiedzi
Crawler może anulować request.
Potencjalne obniżenie crawling
budgetu.
Brakuje danych
strukuralnych
Brakuje UA Google-Structured-
Data-Testing-Tool lub problem z
serwowaniem JSON-LD
Potencjalne problemy z Prerenderingiem25

56. Źródła – Wyszukiwarki vs. JS
1. Udział w rynku wyszukiwarek internetowych (Statista, 2020)
2. “The new evergreen Googlebot” (Google, 2019)
3. Bingbot wykorzystuje do renderowania ten sam silnik co Googlebot (Bing, 2019)
4. Tutorial – Podstawy SEO JS (Google, 2020)
5. Google Webmaster JavaScript SEO office hours (Google, o3.2020)
6. Google Webmaster Central office-hours (Google, 08.2019)
7. How much content is NOT indexed in Google in 2019? (Onely, 2019)

57. Źródła – WRS
8. Fix Search-related JavaScript problems (Google, 2020)
9. Prevent unnecessary network requests with the HTTP Cache (Google, 2018)
10. Caching: Google Webmasters JavaScript SEO office hours (Google, 03.2020)
Źródła – Wydajność
11. Prędkość ładowania strony jako czynnik rankingowy (Google, 2018)
12. JavaScript Start-up Optimization (Google, ?)
13. Next Generation Server Compression With Brotli (Smashing Magazine, 2016)
14. Boosting Site Speed Using Brotli Compression (LinkedIn, 2017)
15. Code Splitting (Webpack tutorial)
16. Tree Shaking (Webpack tutorial)
17. How do I measure the impact of third-party script on my page? (Google,?)

58. Źródła – SPA / PWA / SSR
18. Single-page application (Wikipedia, 2020)
19. Beyond SPAs: alternative architectures for your PWA (Google, 2018)
20. What are Progressive Web Apps? (Google, 2020)
21. Infinite scroll search-friendly recommendations (Google, 2014)
22. What makes a good Progressive Web App? (Google, 2020)
23. SEO & Progressive Web Apps: Looking to the Future (MOZ, 2019)
24. GatsbyJS
25. Implement dynamic rendering (Google,?)

59. Dzięki!
Tak, teraz można zadawać pytania.
Barbara Gaca-Tworek
Technical SEO @PMI
https://www.linkedin.com/in/barbaragaca/
https://twitter.com/GacaTworek