Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Pagespeed Learnings aus mehreren Relaunches (SEO Campixx 2017)

626 views

Published on

Einige essentielle Learnings zur Ladezeitoptimierung aus mehreren begleiteten und betreuten Relaunches. Sorry, I realized the used font is not supported by slideshare. Some slides look bad now. Animated gifs and embedded videos are not playing.

Published in: Technology
  • Be the first to comment

Pagespeed Learnings aus mehreren Relaunches (SEO Campixx 2017)

  1. 1. PageSpeed Learnings aus zahlreichen Relaunches
  2. 2. Benjamin Wingerter SEO & Affiliate seit 2008 Analytics, Guided Shopping Finstar Ltd. SIXT praktikawelten.de 21sportsgroupRelaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer OnlineMarketingGeneralsTradingcardgame omg-tcg.com
  3. 3. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer • zwei komplette Relaunches bei FINSTAR Ltd. • mehrere Rebrushs bei SIXT • 1 epischer Relaunch bei PW Benjamin Relaunch Die unendliche Geschichte
  4. 4. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer • 1 Jahr Vorbereitung • SEO von Anfang im Boot! • Riesen Wunschliste • 3/7 Relaunch-KPIs = SEO
  5. 5. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer 87thingsto check
  6. 6. • 1 Jahr Vorbereitung • SEO von Anfang im Boot! • Riesen Wunschliste • 3/7 Relaunch-KPIs = SEO Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  7. 7. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  8. 8. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  9. 9. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer -60 % - 98 %
  10. 10. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer -45 %
  11. 11. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer -98
  12. 12. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer -100
  13. 13. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer -90 % -70 %
  14. 14. Nicht immer sind die SEOs schuld ;) Politik & Projektmanagementschwächen müssen stimmen Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  15. 15. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer + Stopp aller SEO-Aktivitäten
  16. 16. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  17. 17. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  18. 18. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  19. 19. SEO KPIs Erfolg sichern Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  20. 20. SEO KPIs: nicht nur für SEO einige SEO KPIs sollten auch offziell „von oben“ abgesegnete Ziele für die IT sein Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  21. 21. SEO KPIs für den perfekten Relaunch: TECH Was wären gute KPIs für den Relaunch? Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  22. 22. SEO KPIs für den perfekten Relaunch: TECH 1) Ladezeit • webpagetest.org, LTE, Frankfurt, mobile Chrome = 2sec • Google PageSpeed = 85 Punkte mobile 2) Keine 404er über Referrals (check: Logfiles, Webanalysetool,..) 3) Definierte Elemente (Content + Links) crawl- und indexierbar 4) ??? 5) Profit!! Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  23. 23. SEO KPIs für den perfekten Relaunch: SOFT 1) Keine Fehler in der GSC 2) Vollständige Indexierung der gewünschten Seiten 3) Trafficsteigerung durch mehr oder bessere Rankings (#Sichtbarkeit) 4) ??? 5) Profit!! Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  24. 24. Vorbereitung ist 1 halber Relauch Vong späterem Ärger her. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  25. 25. Vorbereitung: Die 2 Essentials 1) KILL-Liste • URLs auflisten • Inbound Links recherchieren, um SEO-Relevanz zu schätzen • Ggf. Content bewerten nach „super“ / „nachbessern“ / „kann weg“ • wirtschaftlich bewerten (Rankings, New Visits, CTR, Conversion Rate, Revenue) • über die Zukunft entscheiden • URL-Vorher-Nachher-Matching für das Redirect Handling 2) SEO Wunschliste • Priorisieren und mit umsetzender IT besprechen • Lastenheft Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer , nein besser „PFLICHTENheft“ erstellen
  26. 26. http  https = needs no 301 Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  27. 27. Multiple Simultaneous Requests SPEED Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  28. 28. Speed: multiple simultaneous requests Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  29. 29. Speed: multiple simultaneous requests • Verteilen von Dateien auf mehrere hosts ermöglicht die gleichzeitige Anfrage und Übermittlung von Dateien zum Receiver-Client • Statische Ressourcen und Bilder auf eigene (sub)domains Beispiele: static.domain.tld, i.domain.tld, mydomain-img.de, … (bestenfalls cookiefrei) Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  30. 30. Speed: CDN/Cloud Storages Amazon Web Services • Amazon S3 Cloud Speicher: • 1 Jahr Free: (monatlich) 5 GB Amazon S3- Standardspeicher, 20.000 GET- Anforderungen, 2.000 PUT- Anforderungen und 15 GB transfer • Kostenkalkulation anhand geschätztem Traffic und Speichernutzung pro Monat • Storage: erstes TB/Monat $0.0324 pro GB (Größe abzulegender Dateien?) • Requests: $0.0043 pro 10.000 GET (Anzahl Requests/Pageview * Pageviews?) • Transfer: erstes GB/Monat free, dann $0.090 pro GB (bis zu 10 TB pro Monat) Google Cloud • Google Cloud Storage: kostet ungefähr das Gleiche wie Amazon S3 Cloud. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  31. 31. Speed: CDN/Cloud Storages Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer Quelle: httparchive.org/trends.php
  32. 32. Speed: CDN/Cloud Storages Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer 6,36KB -78% 28,99KB
  33. 33. Speed: Kekse machen dick • statische Resourcen auf cookie-freie Subdomains (static., bilder.) • oder cookiefreie top level domains, wenn wir auf unserer Hauptdomain cookies für alle subs werfen Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  34. 34. Und dann ist da noch… Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  35. 35. Speed: HTTP/2 Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer http 1.1 HTTP/2
  36. 36. Speed: HTTP/2 ⁺ gleichzeitige Übertragung mehrerer Ressourcen ⁺ Header Compression spart bis zu ~80% Daten ⁺ TLS/SSL/https muss aktiviert und im browser möglich sein ⁺ teures/aufwendiges Domain Sharding („CDN“) unnötig Noch nicht ausgereift, besonders die „push-Steuerung“ Info: seox.me/http2push2016 Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  37. 37. Speed: HTTP/2 Wer nutzt HTTP/2 bereits? • Akami, Apache, NGINX, Chromium, Firefox, IE 11, Twitter, Jetty,… Info: seox.me/http2ready (Übersicht, bisheriger Implementierung) Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  38. 38. Speed: HTTP/2 Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer HTTP/2 Demo: seox.me/http2demo Mehr Info zu HTTP/2: seox.me/http2
  39. 39. Progressive Enhancement Logik SPEED Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  40. 40. Speed: Progressive Enhancement Logic • Echtes RESSponsives Design (seox.me/RESSponsive) • Device Detection und clevere Auslieferung der passenden Dateien • Navigationsmenü und opulenteFooterblöcke • Social Media Integration • Tripfinder / fancy Suchfilter • Interaktive Elemente wie svg-Weltkarten • Sonstiges JS für desktop-only-Applikationen: Funktionalitäten, Animationen & Effekte • Mobile ausgeblendete Contentelemente und CSS Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  41. 41. HTML-Code = 2 bis 4 MB Ganze Page = bis zu 12 MB Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  42. 42. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer Monatlich verfügbares mobiles Datenvolumen pro Kopf Quelle: https://de.statista.com/statistik/daten/studie/3506/umfrage/monatliches-datenvolumen-pro-mobilfunknutzer-in-deutschland/
  43. 43. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  44. 44. Im Laufe der Zeit wuchs die durchschnittliche Größe einer Seite im Internet von 14kb auf über 2MB (in 2014). „we can expect the average size of a web page delivered to a mobile device to exceed 2MB in 2018“ (Quelle) Dabei blieb der Quelltext aber immer unter 100kb bei einfachen Seiten und unter 1MB bei Seiten mit Tracking und Funktionen. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  45. 45. Speed: HTML5 picture tag • je Breakpoint eine andere Bilddatei, gesteuert mit dem HTML5 Picture Tag • Notwendige Attribute: source, alt, eventuell border & sizes Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  46. 46. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  47. 47. Speed: Ladereihenfolge von Skripten • JS wenn möglich in den Footer der Seite • Ausnahme ggf. Analyse und Conversion Skripte • Asynchrones Laden blockt Rendering nicht Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  48. 48. Speed: Ladereihenfolge von Skripten Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  49. 49. Speed: Ladereihenfolge von Skripten Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  50. 50. Speed: Ladereihenfolge von Skripten Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  51. 51. Critical Rendering Path Hack SPEED Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  52. 52. Speed: Critical Rendering Path Hack • Wichtigstes HTML & CSS inline auf 14kb reduzieren und in den header packen, vor dem buffer flush • Vollständiges CSS und JS im body/footer asynchron laden  Ergebnis: Erste Elemente der Seite sichtbar in <1s! Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  53. 53. Speed: Critical Rendering Path Hack Google selbst empfiehlt das: seox.me/pspeed14kb Info: seox.me/CRP1 (Critical Rendering Path erklärt) Tool: seox.me/CRPgen (Generiert inline-CSS für eigene Tests) Wir müssen für alle Skripte bzw. für jede einzelne Funktion entscheiden, ob sie kritisch sind. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  54. 54. Speed: Critical Rendering Path Hack Wir müssen für alle Skripte bzw. für jede einzelne Funktion entscheiden, ob sie kritisch sind. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  55. 55. Weitere Rendering Tipps SPEED Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  56. 56. Clevere DOM & CSS – und regelmäßig spülen! • Geringe Verschachtelung, wenig divs (DOM depth) • Ist CSS wirklich kaskadierend? Sind Regeln redundant oder gar unbenutzt? • Reflow und skinning vermeiden • Buffer nach <head> oder dem above the fold flushen, wenn Cache es zulässt (flush soon and often  ) Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  57. 57. Speed: Design = CSS, nicht JS • Anfertigen einer Liste: Wo wird layout durch JS gesteuert, statt durch CSS? • Ist das in jedem Fall notwendig? Wenn nein: killen! Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  58. 58. Speed: predictable prefetch • preload (unconditional & conditional) die Daten der vermutlich als nächstes aufgerufenen Seite, wenn der Browser nix zu tun hat (Buchungsstrecke, Overlay-Scripte und andere Funktions-Scripte, content von rel-next und rel-prev, Produktbilder der TopSeller) Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  59. 59. • Beim Screaming Frog SEO Spider die RAM hochsetzen und dann mit JavaScript Rendering crawlen • TimeOut auf 1sec setzen • Listen Upload nutzen und Seiten der Mitbewerber einmischen • Crawl mehrmals wiederholen, auch zu Stoßzeiten • ACHTUNG: Crawl bei IT vorankündigen, ggf. Freigabe einholen ;) • Fetch as Googlebot in der Search Console zeigt manche Renderingprobleme an Speed: SFSS & Fetch as Googlebot Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  60. 60. PreRendering SPEED & CRAWLABILITY Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  61. 61. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer gerendertimBrowser gerendertimGoogleCache
  62. 62. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  63. 63. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  64. 64. Speed & Crawlability: Prerender JS 1. render JS templates on the server 2. inline the results into HTML 3. then use client-side templating once the application is loaded Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  65. 65. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer Video: seox.me/angular2016
  66. 66. Speed: JavaScript vorrendern • JS serverseitig rendern und ausliefern • AngularJS für Google vorrendern Tool: prerender.io Tool: seo4ajax.com ABER: Auch PHP kann vorgerendert werden! Tool: eaccelerator.net „eAccelerator typically reduces server load and increases the speed of your PHP code by 1-10 times.” Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  67. 67. Datenbankoptimierung SPEED & CRAWLABILITY Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  68. 68. Speed: Datenbankoptimierung • Datenbankabfragen über den Server RAM abwickeln • Datenbankabfragen dann messen und optimieren • Optimierte Datenbankabfragen cachen (Frontend UND Backend) Info: seox.me/optimizeDB Tool: seox.me/mySQLtuner Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  69. 69. Speed: Datenbankoptimierung • Optimierte Datenbankabfragen cachen (Frontend UND Backend) • Prüfen, ob Query Caching aktiviert ist (bei mySQL) Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer mysql> SHOW VARIABLES LIKE 'query_cache_size'; +------------------+----------+ | Variable_name | Value | +------------------+----------+ | query_cache_size | 0 | +------------------+----------+ 1 row in set (0.00 sec) +------------------+----------+ | Variable_name | Value | +------------------+----------+ | query_cache_size | 67108864 | +------------------+----------+ 1 row in set (0.00 sec)
  70. 70. Linkmaskierung PageRank Sculpting Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  71. 71. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  72. 72. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer Manche Filteroptionen sind keine a-tags (links) sondern JS onclick events. Aber ausgewählte Funktionselemente sind ganz normale a-tags mit sauberem Ziel-URL. Zum Beispiel bei den Farben:
  73. 73. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  74. 74. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  75. 75. PageRank Sculpting: Linkmaskierung • unnötige interne und ausgehende Links verstecken mit BASE64 kodiertem JS • Product Tiles auf Kategorieseiten • "in die Buchungsstrecke" wird nicht verlinkt (kein a href) (siehe Amazon)) • Share-“Links“ • Links zu Overlays • Links auf Formularseiten Tipp: JS in eine asynchron ladende Datei auslagern und/oder für Google & Co per serverseitigem Deny sperren Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  76. 76. Google und JavaScript • Google kommt mit einfachem JavaScript klar (Stand Q1/2017) Info: seox.me/JSseoBasics Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer Quelle: Michael Göpfert seox.me/JSseoBasics
  77. 77. PageRankSculpting: Siloing • Unwichtige beziehungsweise thematisch nicht zur Seite passende Navigation & Footerlinks „unleserlich“ machen • mit AngularJS • mit ausgelagertem, asynchron ladendem JavaScript Bonus: Noscript-Bereich definieren mit Links die thematisch zur aktuellen Seite passen – keine Links zu anderen Themenfeldern (z.B. nur Schuhe, oder nur Fahrräder) Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  78. 78. Server Konfiguration SPEED Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  79. 79. Speed: gzip & deflate • bei statischen Dateien mod_gzip compression • bei dynamischen Dateien mod_deflate • vorher MIME Type bzw. Dateigrößenminimum festlegen! Pro-Tipp: First bytes ohne compression senden  TTFB (time to first byte) ist dann kürzer, weil der Server eh schon kleine Dateien nicht erst komprimiert Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  80. 80. Speed: gzip & deflate • bei statischen Dateien mod_gzip compression Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer <IfModule mod_gzip.c> mod_gzip_on Yes mod_gzip_static_suffix .gz mod_gzip_can_negotiate yes AddEncoding gzip .gz mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_include mime ^text/.* mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </IfModule>
  81. 81. Speed: keep alive, age, modified • Keep alive Server-Befehl mit Timeout und max time definieren • last-modified und if-modified-since festlegen für sauberen 304 (Not Modified) • max-age oder mod_expires festlegen (cache control per ExpiresByType in .htaccess (vorher MIME Type festlegen)) Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  82. 82. Speed: mod_pagespeed Open Source Server-Erweiterung für Apache und NGINX Einfach googlen: „mod pagespeed“ https://developers.google.com/speed/pagespeed/module/ https://modpagespeed.com/doc/configuration Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  83. 83. Tools? TOOLS! Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  84. 84. Relaunch-Tools für kleines Geld • Balsamiq https://www.mybalsamiq.com/ (30 Tage Trial reicht für Mockups, für NGOs gibt es eine kostenlose Dekstopversion, sonst 90€) • Filestage https://filestage.io/ (15€/member) • Trello (kostenlos) • JIRA (10€/User) • seoratiotools • SFSS • Xenu’s link sleuth • SISTRIX oder Searchmetrics für Keyword-Excerpt • Majestic für Linkliste • Diverse Ladezeitchecks (google pagespeed / mobilefriendly, webpagetest.org, Chrome) • Brains. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  85. 85. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  86. 86. MIXED / UNSORTIERT Bonusfolien
  87. 87. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  88. 88. Crawling: HTTP Header Canonicals • Auch PDFs oder sogar Bilder lassen sich kanonisieren • Zum Beispiel via .htaccess Datei können einzelne Dateien mit dem entsprechenden header versehen werden Info: seox.me/canonicalheader Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer <Files „merkblatt-2014.pdf“> Header add Link „<http://www.exmample.com/files/merkblatt-2017.pdf>; rel=“canonical““ </Files>
  89. 89. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  90. 90. Speed: kleine Bilddateien als Icon-Fonts • oder BASE64-kodiert um HTTP Requests zu reduzieren (base64- image.de bzw. schon vorab mit PS-Plugin "PNG Hat") • Spart Requests und ermöglicht Verzicht von Sprites Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  91. 91. Bilder: webP Bildformat anbieten • webP Bildformat für Chromebrowser ausliefern • 40% unserer User nutzen Chrome • Ladezeit und Bildqualität profitieren • https://developers.google.com/speed/webp/ Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  92. 92. Speed: iPhone kann nur 500kb cachen • Alle sitewide genutzten Componenten (z.B. css, scripte, sprites) sollten für iPhones unter 25kb jeweils liegen - insgesamt bis maximal 475-500kb. Sonst werden sie auf iPhones nicht gecached • stimmt nicht mehr: • http://stevesouders.com/tests/cachesize/ Da hat er bis zu 4MB File Size gecached. • http://www.guypo.com/mobile-browser-cache-sizes-round-2/ • http://serverfault.com/questions/338722/what-is-the-maximum-file-size- that-will-be-cached-by-a-browser • ABER: prüfen ob solche Probleme noch oder wieder existieren Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  93. 93. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  94. 94. Sicherheit • CMS-Hinweis bzw. Versionsnummer aus Quelltext entfernen • x-powered-by deaktivieren Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  95. 95. Komfortable SEO-Steuerung SEOfriendly CMS-Backend Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  96. 96. Backend: Character Counting & Tooltips • Character Counting bei input fields für title & meta description (incl. space) und Min-Max Wert festlegen • Tooltipps mit Optimierungsempfehlungen neben Eingabefeldern • Title: • Title muss Klickstark sein und Interesse wecken • absolut individuell für jede Seite • Keyword möglichst zu Beginn • maximal 55 Zeichen, aber als Suffix " |Praktikawelten" anfügen • Meta Description: • muss zum vermutete Suchanfrage befriedigen bzw. zum Klicken animieren • (einen USP wenn es passt und Call To Action einbauen wie "hier die super Übersicht zu...") • absolut individuell für jede Seite • Keyword in der Description vorhanden • 155 Zeichen (desktop) bzw. 133 Zeichen (mobile) • Alles ggf. durch externe Onpagetools möglich (onpage.org, seobility,..) Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  97. 97. Backend: Duplikatschecks • Title • h1 tags • interne Linktexte • Alt-Attributswerte unterschiedlicher Bilddateien • Content allgemein • Alles ggf. durch externe Onpagetools möglich (onpage.org, seobility,..) Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  98. 98. Random Checks Aus mehr als 80 Checks für SEO-risikofreie Relaunches Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  99. 99. https Quality/Feature Check Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer https://www.ssllabs.com/ssltest/analyze.html?d=YOURDOMAIN.COM&latest
  100. 100. Mixed, nur angerissen aus Zeitgründen • Für jede Page kann ein default Anchortext definiert werden, der bei programmatisch generierten Links verwandt wird und ansonsten als title-Attributwert gilt • Jede Page hat Pflichtfelder, ohne deren Befüllung ein publishing unmöglich ist (title, h1, default Anchortext) • Title Prä- und Suffix vererbbar pflegbar • HTML: saubere, übliche header Angaben (DocType, Language, hreflang, canonical…) • UTF-8-Kodierung (ASCII/Unicode Sonderzeichen möglich) • Absolute Pfadangaben im Quelltext • Kurz-URLs (Marketing redirects) je Seite pflegbar • Sitemap Inkludierung und Priorisierung je Seite vererbbar pflegbar • Noindex je Seite vererbbar pflegbar • Bei bildlastigen Seiten Bilder sharebar machen • Bilddateinamen werden beim upload geprüft und ggf. optimiert: Umlaute, Leerschritte, Sonderzeichen, Bindestriche/Underscores.. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  101. 101. Quelltext parsen und filtern • Programmatisch Quelltext parsen und cleanen oder manuell regelmäßig crawlen • HTML & CSS Kommentare und wenn möglich Leerzeilen und Leerzeichen filtern • Leere src-Attribute, h2-6, i, p, bold/strong-tags, etc.. • Mögliches Problem bei der Verwendung von RTEs/WYSIWYG • Manuelles crawlen und cleanen möglich • MS-Office Markup cleanen • HTML-Entitäten verwenden für …, „“, €, &, usw. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  102. 102. Diverse ToDos (aus Zeitgründen nicht alle) • Liste aller Keywords zu jedem URL aus SISTRIX/searchmetrics/… exportieren und nach Relaunch kontrollieren • Falls sich URLs ändern werden, Liste aller eingehenden Links erfassen aus mehreren tools (majestic, ahref, Google Search Console, Analytics Referrals…) und Redirects in .htaccess vorbereiten, damit beim Switch auf die neuen URLs keine 404er entstehen und nachher ggf. Linkänderungen bei den Quellen angefragt werden können • Ziel-URLs in Ads (AdWords, BingAds, Facebook,…) aktualisieren • URLs wichtiger Oberseiten nach Relaunch als Googlebot fetchen (GSC) • Zigmal crawlen, am besten mit mehreren Tools (Liste folgt) • Logfileanalyse vor und nach dem Relaunch kann BotTraps zeigen Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  103. 103. Speed: AMP wenn rentabel • bei News Content • www.ampproject.org Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  104. 104. Favicon • favicon unter 1kb • korrekte Größe • expire header auf 1 Jahr • Touch Icons für iOS, Android & Windows-Phone Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  105. 105. Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer
  106. 106. SUFU! • Suchfunktionen für den User geil machen: • Elastic Search z.B. mit Amazon Web Services • Oder Prediggio: https://www.prediggo.com/en/recherche-navigation/ • cool für ne Mischung aus Produktergebnissen und use-case-content aus dem Magazin • Suchergebnisseiten speichern und an SEO-Team melden, damit Content angereichert wird und die Seiten indexiert werden können • Oder einfach Google Analytics Custom Search einrichten und auswerten Relaunch: 80+ SEO & UX Checks Download: seouxindainer.de/relaunch twitter: @seouxindianer

×