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

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

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

PageSpeed 100?! Perfekte Ladezeiten und SEO-

Hosting für Speed-Freaks

Köln, den 27.10.16

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

Warum Google manchmal dumm ist …

dummen SEO

Oder: Was ist preiswertes Hosting

Mein Hosting anno 2010

• 350 Domains, davon ca. 100 projektiert

• 48 Web-Hosting Pakete

• Bei 12 verschiedenen Anbietern

und Google so …

Step One

• Alles auf einen Server (Dedicated)

• Alle Domains zu einem Hoster

• Zentrale WordPress Verwaltung

Step Two

• PageSpeed optimiert

• GZIP aktiviert

• Bilder komprimiert

• Caching Plugins installiert & konfiguriert

• WordPress Themes optimiert :(

• HTTP-Requests minimiert

Step Three

• Server Stack Hardening (Extern)

• Varnish Cache installiert

• und als WAF konfiguriert

Final Step

• Komplette Betreuung durch PURE HOST

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!

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!

und das Beste…

• KEINE PageSpeed-Optimierung mehr nötig

Plesk ist besser als sein Ruf

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

Backups mit Plesk

• Inkrementelle BackupsMehrfach täglich

• Backups nach Zeitplan

• Externe Backupsz.B. Dropbox / FTP

• Backups verschlüsselt

• Disaster Recovery möglich

Zusätzlich 4 mal täglich via BackUp PC

WordPress Toolkit

• Sicherheitsüberprüfung

• Automatische Updates

• Plugin + Theme Verwaltung

• Benutzer + Passwörter

Google Bildersuche

add_header X-Frame-Options "ALLOW-FROM https://images.google.de/" always;

Kennt ihr das?

Achtung: IT-Sicherheitsgesetz!

https://www.datenschutzbeauftragter-info.de/sicherheitsgesetz-zweck-anforderungen-und-sanktionen/

25.07.2015

So bitte nicht …

… besser so!

Vorteile von HTTP/2

• HTTP/2 nur noch über SSL

• Komprimierte Header

• Mehrere “Streams” gleichzeitig

• ServerPush

• Multiplexing

• schnellere Ladezeitenhttp://caniuse.com/#feat=http2

Multiplexing rockt

CloudFlareDas einzige CDN, dass das „Uncachebare“ cachen kann

Warum CloudFlare?

Railgun

Typical 99.6% compression and a speedup of over 700%

CloudFlare PolishLossless or Lossy Image Optimization

https://blog.cloudflare.com/introducing-polish-automatic-image-optimizati/

CloudFlare MirageAdaptive on-the-fly Optimierung

https://www.cloudflare.com/website-optimization/mirage/

CloudFlare - Requests

CloudFlare - Bandwidth

CloudFlare - Visitors

CloudFlare - Protection

Skalieren über Hardware?

Wenn SEO rockt -> mehr Hardware

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-newstoolSEARCH ONE NEWS OPTIMIZER

Google Analytics LiveGoogle News Traffic zur EM 2016 - 3 Webseiten auf einem Cluster

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

EM-Cluster von PURE HOST

2 Load Balancer

7 Web Server

5 MySQL Galera

Microcaching mit NGINX

Kostenlose NGINX Microcaching Configfastcgi_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 PHPif ($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 verfassenif ($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 schickenlocation ~ \.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 Cachefastcgi_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

„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

The next step… AMP + PWA

AMP kommt…

– 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

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

CSS anpassen

Tracking aktivieren!

Ad-Networks

Validieren wie anno 1999

Neues Testing Tool

https://search.google.com/search-console/amp

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:

„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!

AMP und E-Commerce

https://amphtml.wordpress.com/2016/08/22/getting-started-with-amp-for-e-commerce/

AMP + PWAamp-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 HintergrundDirekter Zugriff beim nächsten Klick bzw. Besuch!

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

Mehr Progressive Web Apps

https://pwa.rocks/

There’s more to come

https://www.ampproject.org/roadmap/

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

Kai Spriestersbach Inhaber, SEARCH ONE

Online Strategy Consultant, eology GmbH

Sebastian Jankord CTO PURE HOST

Vielen Dank! Noch Fragen?

https://www.pure-host.dehttps://www.search-one.de