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

1. PageSpeed 100?!
Perfekte Ladezeiten und SEO-
Hosting für Speed-Freaks
Köln, den 27.10.16

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. Warum Google manchmal dumm ist …

4. dummen SEO
Oder: Was ist preiswertes
Hosting

5. Mein Hosting anno 2010
• 350 Domains, davon ca. 100 projektiert
• 48 Web-Hosting Pakete
• Bei 12 verschiedenen Anbietern

6. und Google so …

7. Step One
• Alles auf einen Server (Dedicated)
• Alle Domains zu einem Hoster
• Zentrale WordPress Verwaltung

8. Step Two
• PageSpeed optimiert
• GZIP aktiviert
• Bilder komprimiert
• Caching Plugins installiert & konfiguriert
• WordPress Themes optimiert :(
• HTTP-Requests minimiert

9. Step Three
• Server Stack Hardening (Extern)
• Varnish Cache installiert
• und als WAF konfiguriert

10. Final Step
• Komplette Betreuung durch PURE HOST

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. 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. und das Beste…
• KEINE PageSpeed-Optimierung mehr nötig

14. Plesk ist besser als sein Ruf

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. 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. WordPress Toolkit
• Sicherheitsüberprüfung
• Automatische Updates
• Plugin + Theme Verwaltung
• Benutzer + Passwörter

18. Google Bildersuche
add_header X-Frame-Options "ALLOW-FROM https://images.google.de/" always;
Kennt ihr das?

19. Achtung: IT-Sicherheitsgesetz!
https://www.datenschutzbeauftragter-info.de/sicherheitsgesetz-zweck-anforderungen-und-sanktionen/
25.07.2015

20. So bitte nicht …

21. … besser so!

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. Multiplexing rockt

24. CloudFlare
Das einzige CDN, dass das „Uncachebare“ cachen kann

25. Warum CloudFlare?

26. Railgun
Typical 99.6% compression and a speedup of over 700%

27. CloudFlare Polish
Lossless or Lossy Image Optimization
https://blog.cloudflare.com/introducing-polish-automatic-image-optimizati/

28. CloudFlare Mirage
Adaptive on-the-fly Optimierung
https://www.cloudflare.com/website-optimization/mirage/

29. CloudFlare - Requests

30. CloudFlare - Bandwidth

31. CloudFlare - Visitors

32. CloudFlare - Protection

33. Skalieren über Hardware?

34. Wenn SEO rockt -> mehr Hardware

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. Google Analytics Live
Google News Traffic zur EM 2016 - 3 Webseiten auf einem Cluster

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. EM-Cluster von PURE HOST
2 Load Balancer
7 Web Server
5 MySQL Galera

39. Microcaching mit NGINX

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. „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. The next step…
AMP + PWA

43. AMP kommt…

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. 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. CSS anpassen

47. Tracking aktivieren!

48. Ad-Networks

49. Validieren wie anno 1999

50. Neues Testing Tool
https://search.google.com/search-console/amp

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. „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. AMP und E-Commerce
https://amphtml.wordpress.com/2016/08/22/getting-started-with-amp-for-e-commerce/

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. 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. Mehr Progressive Web Apps
https://pwa.rocks/

57. There’s more to come
https://www.ampproject.org/roadmap/

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. 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