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.

SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks

3,587 views

Published on

Vortrag PageSpeed 100?!
 Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks von Kai Spriestersbach und Sebastian Jankord

SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks

  1. 1. PageSpeed 100?!
 Perfekte Ladezeiten und SEO- Hosting für Speed-Freaks Köln, den 27.10.16
  2. 2. Kai Spriestersbach Inhaber, SEARCH ONE Online Strategy Consultant, eology GmbH Frontend- und Backend SEO seit 12 Jahren WordPress Developer Sebastian Jankord CTO PURE HOST Linux, Clustersysteme für Hosting und Sicherheitslösungen WordPress sicher machen: Tipps zum richtigen Umgang mit Themes, Plug-ins und Servern
  3. 3. Warum Google manchmal dumm ist …
  4. 4. dummen SEO Oder: Was ist preiswertes Hosting
  5. 5. Mein Hosting anno 2010 • 350 Domains, davon ca. 100 projektiert • 48 Web-Hosting Pakete • Bei 12 verschiedenen Anbietern
  6. 6. und Google so …
  7. 7. Step One • Alles auf einen Server (Dedicated) • Alle Domains zu einem Hoster • Zentrale WordPress Verwaltung
  8. 8. Step Two • PageSpeed optimiert • GZIP aktiviert • Bilder komprimiert • Caching Plugins installiert & konfiguriert • WordPress Themes optimiert :( • HTTP-Requests minimiert
  9. 9. Step Three • Server Stack Hardening (Extern) • Varnish Cache installiert • und als WAF konfiguriert
  10. 10. Final Step • Komplette Betreuung durch PURE HOST
  11. 11. Vorteile • Sicher, Schnell, Zuverlässig, Bezahlbar! • Backups 4 x täglich für 120 Tage • Sicherheit durch Updates, WAF & CloudFlare • Zentrale WordPress Verwaltung, inkl. Updates • Lastminierung durch Caching + CloudFlare • Schneller Support bei Problemen Endlich wieder Fokus auf meine Arbeit!
  12. 12. Was heißt bezahlbar? Vorher Nachher Verbesserung Kosten für Hosting 
 inkl. Buchhaltung > 750 EUR / Monat < 200 EUR / Monat -73% Kosten Arbeitszeit intern > 16 Stunden / Monat < 4 Stunden / Monat -75% Zeit Unique Users max. 150.000 / Monat > 1.000.000 / Monat +660% Performance = Neues Hosting ist 96x Kosteneffizienter!
  13. 13. und das Beste… • KEINE PageSpeed-Optimierung mehr nötig
  14. 14. Plesk ist besser als sein Ruf
  15. 15. Plesk 17: Onyx • NGINX only Hosting möglich • HTTP/2 Out-Of-The-Box • Let’s encrypt SSL • Zentrale Verwaltung • WordPress Toolkit • Automatische Backups • Git, Docker, Ruby und node.js Support
  16. 16. Backups mit Plesk • Inkrementelle Backups
 Mehrfach täglich • Backups nach Zeitplan • Externe Backups
 z.B. Dropbox / FTP • Backups verschlüsselt • Disaster Recovery möglich Zusätzlich 4 mal täglich via BackUp PC
  17. 17. WordPress Toolkit • Sicherheitsüberprüfung • Automatische Updates • Plugin + Theme Verwaltung • Benutzer + Passwörter
  18. 18. Google Bildersuche add_header X-Frame-Options "ALLOW-FROM https://images.google.de/" always; Kennt ihr das?
  19. 19. Achtung: IT-Sicherheitsgesetz! https://www.datenschutzbeauftragter-info.de/sicherheitsgesetz-zweck-anforderungen-und-sanktionen/ 25.07.2015
  20. 20. So bitte nicht …
  21. 21. … besser so!
  22. 22. Vorteile von HTTP/2 • HTTP/2 nur noch über SSL • Komprimierte Header • Mehrere “Streams” gleichzeitig • ServerPush • Multiplexing • schnellere Ladezeiten http://caniuse.com/#feat=http2
  23. 23. Multiplexing rockt
  24. 24. CloudFlare Das einzige CDN, dass das „Uncachebare“ cachen kann
  25. 25. Warum CloudFlare?
  26. 26. Railgun Typical 99.6% compression and a speedup of over 700%
  27. 27. CloudFlare Polish Lossless or Lossy Image Optimization https://blog.cloudflare.com/introducing-polish-automatic-image-optimizati/
  28. 28. CloudFlare Mirage Adaptive on-the-fly Optimierung https://www.cloudflare.com/website-optimization/mirage/
  29. 29. CloudFlare - Requests
  30. 30. CloudFlare - Bandwidth
  31. 31. CloudFlare - Visitors
  32. 32. CloudFlare - Protection
  33. 33. Skalieren über Hardware?
  34. 34. Wenn SEO rockt -> mehr Hardware
  35. 35. Wenn Google News rockt -> Cloud? 1,5 Mio. Unique Users innerhalb von 90 Minuten 20 Mio. Unique Users in einem Monat über Google News Bei Interesse: http://kai.im/seoday-newstool SEARCHONENEWSOPTIMIZER
  36. 36. Google Analytics Live Google News Traffic zur EM 2016 - 3 Webseiten auf einem Cluster
  37. 37. Traffic Stats Extreme • 20 Millionen Unique Besucher in einem Monat • 85 Millionen Seiten Hits & 250 Millionen Requests • 308 TB Traffic während EM / 100 GB in 15 Minuten • Über 40.000 Besucher gleichzeitig
  38. 38. EM-Cluster von PURE HOST 2 Load Balancer 7 Web Server 5 MySQL Galera
  39. 39. Microcaching mit NGINX
  40. 40. Kostenlose NGINX Microcaching Config fastcgi_cache_path /dev/shm/microcache levels=1:2 keys_zone=microcache:5M max_size=1G inactive=2h; fastcgi_cache_key "$scheme$request_method$host$request_uri"; fastcgi_cache_use_stale error timeout invalid_header http_500; fastcgi_ignore_headers Cache-Control Expires Set-Cookie; set $skip_cache 0; # POST Requests und URLS mit einem String gehen direkt an PHP if ($request_method = POST) { set $skip_cache 1; } if ($query_string != "") { set $skip_cache 1; } # Kein Cachen des Adminsbereich / Sitemap usw. if ($request_uri ~* "/wp-admin/|/xmlrpc.php|wp-.*.php|/feed/|index.php|sitemap(_index)?.xml { set $skip_cache 1; } # Kein Cache für eingeloggte User die gerade Kommentare verfassen if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_no_cache|wordpress_logged_in") { set $skip_cache 1; } location / { try_files $uri $uri/ /index.php?$args; } # Scripte die noch nicht im Cache sind direkt an PHP schicken location ~ .php$ { fastcgi_split_path_info ^(.+.php)(.*)$; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; fastcgi_cache microcache; fastcgi_cache_bypass $skip_cache; fastcgi_no_cache $skip_cache; # Zeiten für den Cache fastcgi_cache_valid 200 1d; fastcgi_cache_valid 302 301 1m; fastcgi_cache_valid 404 1s; fastcgi_cache_min_uses 1; fastcgi_cache_use_stale error timeout invalid_header updating http_500; fastcgi_ignore_headers Cache-Control Expires; fastcgi_pass_header Set-Cookie; fastcgi_pass_header Cookie; } Download unter: https://kai.im/seoday-nginx
  41. 41. „Cloud“ im Kostenvergleich ca. 8.500 EURca. 700 EUR • 14 Server • 2 Loadbalancer • 5 MySQL Galera • 7 WebServer • Cloudflare + Railgun • S3 für statische Inhalte • EC2 Instanzen • RDS Instanzen • Cloudfront
  42. 42. The next step… AMP + PWA
  43. 43. AMP kommt…
  44. 44. – Gary Illyes „The other thing is that there is a very strong push for AMP everywhere. And you can expect more launches around that.“ http://searchengineland.com/google-whats-important-2017-machine-learning-amp-structured-data-261150
  45. 45. AMP in WP aktivieren https://de.wordpress.org/plugins/amp/ https://de.wordpress.org/plugins/pagefrog/ Note #1: that Pages and archives are not currently supported. 
 Pages support is being worked on.1. Plugin: AMP 2. Plugin: Pagefrog
  46. 46. CSS anpassen
  47. 47. Tracking aktivieren!
  48. 48. Ad-Networks
  49. 49. Validieren wie anno 1999
  50. 50. Neues Testing Tool https://search.google.com/search-console/amp
  51. 51. WP: Strip invalid code add_filter( 'the_content', 'amp_remove_lightbox', 999 ); function amp_remove_lightbox( $content ) { if ( is_single() && is_amp_endpoint() ) 
 //Change invalid rel="lightbox" to data-rel= $content = str_replace("rel", "data-rel", $content); // Returns the content. return $content; } In die functions.php des Child-Themes:
  52. 52. „Hacking“ AMP <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script> iFrames aktivieren: sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms" „Features“ aktivieren: Wert Aktiviert Nutzung allow-forms Formulare Leads / Sales / Kommentare allow-popups Popups Werbung / Cookies allow-scripts JavaScript Tracking / Werbung / Cookies / Maps Auch für White Hats geeignet!
  53. 53. AMP und E-Commerce https://amphtml.wordpress.com/2016/08/22/getting-started-with-amp-for-e-commerce/
  54. 54. AMP + PWA amp-install-serviceworker <script async custom-element="amp-install-serviceworker" src="https:// cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script> Serviceworker 
 im AMP HTML <amp-install-serviceworker src="https://www.your-domain.com/serviceworker.js" data-iframe-src="https://www.your-domain.com/install-sw.html" layout="nodisplay"> </amp-install-serviceworker> Installations JS startet Download Download der WebApp im Hintergrund Direkter Zugriff beim nächsten Klick bzw. Besuch!
  55. 55. PWA - Flipkart • Das „Amazon Indiens“ • AMP und PWA kombiniert • Direkt aus dem Web in die App! • 3x mehr Zeit auf der Seite • 40% höhere Wiederbesuchsrate • 70% höhere Conversionrate bei App Nutzern • 3x weniger Datenverbrauch https://developers.google.com/web/showcase/2016/flipkart
  56. 56. Mehr Progressive Web Apps https://pwa.rocks/
  57. 57. There’s more to come https://www.ampproject.org/roadmap/
  58. 58. Warum ich AMP mag … • Es ist wirklich schnell • Neue Rankings in den Schlagzeilen • Doppelrankings möglich! Organisch #1 + OneBox • Affiliate-Links & Werbung funktionieren • E-Commerce Unterstützung via PWA & iFrames
  59. 59. Kai Spriestersbach Inhaber, SEARCH ONE Online Strategy Consultant, eology GmbH Sebastian Jankord CTO PURE HOST Vielen Dank! Noch Fragen? https://www.pure-host.de https://www.search-one.de

×