
WordPress Meetup 024 van 11-03-2015 deel 2
Zoals beloofd in deel 1 van deze blogserie, zal ik in deze blog verslag doen van het 2e deel van de 4e 024 WordPress meetup die werd georganiseerd door Yoast en Savvii.
In dit 2e deel van de blogserie zal ik jullie informeren over de beginnerstrack presentatie genaamd “van browser tot WordPress”.
Er was ook de mogelijkheid om de advanced track te volgen waar men dieper inging op de PhP code van een WordPress website en hoe je de performance van je applicatie kunt meten.
Ik heb de keuze gemaakt voor de beginnerstrack ten eerste omdat het mij een interessante presentatie leek, ten tweede kon ik hier een mooie blog over schrijven die ook interessant is voor mijn doelgroep en ten derde omdat ik zelf iets minder thuis ben in de PhP code. Mocht je toch interesse hebben in de advanced track presentatie dan kun je deze via de volgende link bekijken: Advanced track Presentatie
De onderstaande tekst werd gebruikt om aan te geven waar de beginnerstrack presentatie over zou gaan:
“Wat gebeurt er nou eigenlijk als je een WordPress site bezoekt in je browser? Wat doet DNS, wat doet PHP, MySQL, wat doet je browser? Op dit soort vragen zal Victor een -voor iedereen- begrijpelijk antwoord geven. Victor van de Bosch is Developer bij Savvii WordPress Hosting en kent alle onderdelen als z’n broekzak.”
Allereerst werd Victor van den Bosch voorgesteld door Gijs Hovens en ging Victor van start met de presentatie.
Eigenlijk zou Ferdi van der Werf de presentatie geven maar heeft zich op het laatste moment ziek gemeld.
Veel plezier bij het lezen van deze blog en hopelijk kun je het een en ander opsteken over de werking van je browser.
Presentatie 2: Victor van den Bosch – Van Browser Tot WordPress
Bekijk via deze link de slideshare presentatie
Opvragen van een pagina
Je voert URL in, daarna druk je op Enter en vervolgens komt de Pagina in beeld.
Op de achtergrond van de browser worden alle bestanden ingeladen die nodig zijn om de pagina te weergeven (Slide 5)
Verloop van request: (DNS)
Je voert de URL in van de pagina die je wilt bezoeken → vervolgens gaat je browser kijken waar de website staat met de ingevoerde URL → je browser zoekt server waar de site staat → de browser vraagt aan de DNS servers waar de website staat → de DNS server stuurt het IP adres terug met de locatie van de website.
Verloop van request: (Initieel + SSL – Send Request –Waiting – Download – Toon Pagina)
Voor het benaderen van een website met een beveiligde verbinding (https://) doorloopt de browser de stappen uit van de voorgaande alinea en in plaats van dat de DNS server het IP adres terug stuurt met de locatie van de website, gaat de browser en connectie maken met de SSL verbindingspoort van de desbetreffende website. In het geval van Savvii wordt er verbinding gemakt met poort 443 (SSL) op de Savvii server → vervolgens wordt er een beveiligde verbinding gemaakt tussen de browser en de server → de browser stuurt een request om de pagina/website op te vragen → de server berekent de pagina en wat er nodig is om de pagina te laden → de server stuurt de data terug naar de browser en de website wordt ingeladen.
Timings van request
Het verzoek van de browser naar de server kost weinig tijd echter andere zaken zoals Waiting (TTFB) heeft aanzienlijk meer tijd nodig. TTFB = Time To First Byte – Het wachten van de browser totdat hij een reactie krijgt van de server.
Verwerking van de server – bestand
Bestand wordt aangevraagd → staat hij in de cache van de browser? →
Ja = direct terug sturen en inladen binnen de pagina.
Nee = kijken of het bestand op de server staat → in de cache zetten → inladen binnen de pagina
Is het bestand niet aanwezig dan wordt er een 404 Not Found pagina weergegeven.
Verwerking van de server – pagina:
Bij een pagina werkt de verwerking van de server net iets anders.
Pagina wordt aangevraagd → staat hij in de cache van de browser? →
Ja = direct terug sturen en inladen als HTML
Nee = Start WordPress → Start plugins → Haal pagina uit de database → vervolgens kijkt de server of de pagina bestaat →
Ja = Render pagina, roep plugins aan, database queries etc.. (dit kost veel tijd, hier kun je veel snelheidswinst behalen en heeft een grote impact op de TTFB) → in de cache zetten van de browser → inladen als HTML.
Nee= WordPress 404 pagina inladen → 404 Not Found laten zien als HTML in de browser.
Hoe krijg je de TTFB omlaag?
- Minder (zware) plugins gebruiken;
- Caching van de database queries (W3 Total Cache plugin gebruiken);
- Caching van objecten;
- Opschonen van je database (wp-optimize plugin gebruiken);
- Full-page caching (bijv. Varnish) dit werkt alleen niet voor dynamische content;
Caching Algemeen
1. Wat is caching en hoe werkt het?
Data opslaan in de cache en dan dezelfde bewerking direct inladen wanneer je een pagina benaderd.
2. Waarom caching?
Caching maakt alles sneller
3. Wie gebruikt FTP om bestanden op zijn website te plaatsen en eventuele code te bewerken?
- Het zorgt er niet voor dat dynamische content kan worden ingeladen;
- Sessies werken niet goed bij caching: Kijk bij de cookies of je site met sessie werkt, in de cookie staan jouw specifieke gebruikerseigenschappen, bijvoorbeeld voor shopping sites;
- Nieuwe sites zijn nog niet gecached maar bij een 2e verzoek wel;
- Invalideren van de cache (kijken of de oude cache nog wel klopt);
- Specifieke aanvragen komen niet uit de cache als het al niet eerder is gecached;
Caching verschillende lagen
- Webserver/varnish;
- Resources op bestandssysteem: Minify Java/CSS wordt opgeslagen op bestandssysteem;
- Applicatie/WordPress zelf;
- Database/Query caching;
2 tips van Vincent: Schakel caching uit wanneer je een website aan het ontwikkelen bent, zo kun je elke aanpassing controleren zonder dat de “oude” pagina wordt ingeladen.
Vergelijk plugins zoals sliders en andere zware plugins met Pagespeed insights of via de Developer tools in Google Chrome om te zien hoeveel tijd een browser nodig heeft om de desbetreffende plugin in te laden.
Wat doet de browser nog?
1. Caching van plaatjes e.d.;
2. Interpreteren van resultaten (parcing);
3. Eventuele benodigde resources ophalen;
4. Visuele opbouw;
5. Verdere resources ophalen;
6. Vanaf stap 2 een loop doorlopen, daarom is het handig om je Javascript en CSS te beperken, je browser heeft dan minder tijd nodig om de loop door te lopen;
Dit was de tweede presentatie van de 4e WordPress meetup door Yoast en Savvii. Was je ook aanwezig bij de WordPress Meetup of heb je plannen om bij de volgende meetup aanwezig te zijn?
Wat zijn de belangrijkste dingen die je hebt geleerd?
Laat je reactie horen onderaan dit bericht!
0 Comments