Website optimalisatie

[Verwijderd]

Goedemiddag,

Ik heb de afgelopen maand een website gecreerd.
Maar zou deze willen optimaliseren om hogere snelheden te halen bij het laden?
Maar weet namelijk niet hoe ik hier aan begin?

Heb namelijk Bing en Google al afgeschuimd voor toturail's Maar echter zijn deze toturails reeds ingewikkeld voor me!
Nu is mijn vraag heeft er iemand vrij simpele toturails over het optimaliseren van Website's

Met vriendelijke groet,

[Dennahz]

Dat hangt er heel erg vanaf hoe je de site opgebouwd hebt. Is dit met PHP/MySQL? Is het een eigen CMS-systeem? Zijn het gewoon statische HTML pagina's? Enz.

Heb je een voorbeeld van de site? Het is een vrij algemene vraag namelijk Je kan alle kanten op. Van ingewikkelde frameworks als ZF tot Joomla ( ).

[ Voor 23% gewijzigd door Dennahz op 26-10-2013 14:02 ]

[Verwijderd]

voorbeeld heb ik wel maar weet niet of ik hem hier mag plaatsen. Maar het is eigenlijk alleen HTML, CSS en JS voorlopig

[Ramon]

Het optimaliseren van websites is ook gewoon een complexe klus, vandaar dat de tutorials niet zo simpel zijn.

Eerst moet je natuurlijk weten wat er precies langzaam is: heb je veel plaatjes? Zijn de plaatjes te groot? Heb je blocking JavaScript? Heb je teveel overbodige HTML? etc... Je kan bijvoorbeeld in Firefox de pagina inspecteren (rechtermuisknop -> inspect element) en dan op de "Network" tab zien welke bestanden de website binnenhaalt, hoelang dat duurt en hoe groot de bestanden zijn. Dat ziet er dan bijvoorbeeld zo uit:


Aangezien het zo te lezen alleen client-side is kan je het server-side-optimalisatie gedeelte overslaan, dat scheelt al een hele hoop.

En een voorbeeld zou ons helpen om te kijken wat er geoptimaliseerd kan worden. Dat mag gewoon.

[ Voor 32% gewijzigd door Ramon op 26-10-2013 14:09 ]

[jbdeiman]

Alleen HTML, CSS en JavaScript dus.

Gebruik je eigengeschreven JavaScript, of heb je (bijvoorbeeld) Jquery ingeladen?

Hoe groot zijn je bestanden en hoeveel bestanden laadt je in 1 keer in?

HTML en CSS kan je langslopen op overbodige opmaakregels en overbodige code, maar mijn ervaring is dat je daar niet veel mee wint.

Simpel gezegd zit er een limiet op het aantal gelijktijdige open connecties van 1 gebruiker naar je website. Moet die 100 plaatjes inladen, dan zal die steeds moeten wachten op een vrije connectie naar je domein. Versnellen is dan mogelijk door plaatjes over verschillende subdomeinen te verspreiden, waar ze vandaan gehaald kunnen worden.
Ik noem in dit voorbeeld plaatjes, maar 10 losse css bestanden zijn ook niet efficiënt, die kan je dan beter (handiger) samenvoegen.

[leuk_he]

Dus met de hand gebouwd. Dan met de hand optimaliseren als het beroerd is.

Ga eerst eens met je browser naar de devepmet opties en kijk naar de load time:

zoiets:



(web site dumpen en tips vragen is niet de goede manier... maar als je website getoond wordt in een console van firefox ofzo is er niks aan de hand)

[ Voor 20% gewijzigd door leuk_he op 26-10-2013 14:10 ]

[Miyamoto]

Wellicht een eenvoudig startpunt, Google PageSpeed Insights.

[Verwijderd]

js en css en html is bootstrap based btw!

en zou voorals een http caching willen uitvoeren en het compressen van me code

[ Voor 50% gewijzigd door Verwijderd op 26-10-2013 14:48 ]

[orf]

yslow is ook een fijne plugin om te zien waar bottlenecks zitten

[jbdeiman]

Verwijderd schreef op zaterdag 26 oktober 2013 @ 14:37:
js en css en html is bootstrap based btw!

en zou voorals een http caching willen uitvoeren en het compressen van me code

Oké, dus al die losse bootstrap bestanden, jquery en verdere jquery plugins.. Das een redelijke lijst met files die ingeladen moeten worden. Wel wordt het meeste gecached (lokaal) dus daarna vrij vlot weergegeven.

Zoals hierboven al aangegeven: Kijk eens naar dat soort plug-ins voor een idee waarom e.e.a. traag is.

[Verwijderd]

hmm ok zal ik doen en kan jij mij toevallig ook een toturail geven over http caching? Google pagespeed raad dit ten zeerste aan en zou het willen proberen

[RaZ]

Klik?

[ Voor 5% gewijzigd door RaZ op 26-10-2013 15:48 ]

[Verwijderd]

<?php
header("Expires: Mon, 26 Jul 2014 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . "GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
?>

ik heb dit geprobeerd maar nog steeds geeft google aan dat er geen http cache is

[vistu]

header("Cache-Control: no-cache, must-revalidate");

Edit: kan iets constructiever van mijn kant: je geeft hier - zoals je zou kunnen lezen - aan dat er niet aan caching gedaan moet worden..

[ Voor 49% gewijzigd door vistu op 26-10-2013 15:55 ]

[RaZ]

Tjah, dan moet je niet domweg copy'n'pasten als je niet weet wat het doet. De melding van google is nogal logisch als je zegt dat de pagina net geupdate is, dus is de cache verstreken he

[Verwijderd]

vistu schreef op zaterdag 26 oktober 2013 @ 15:54:
[...]

Die eruit halen?

[jbdeiman]

Euh? Ik dacht data je pagina HTML was, niet PHP? Of gebruik je onderwater toch PHP, zoals lijkt in de geposte code van je hierboven?

Je kan ook gewoon HTML meta tags gebruiken om de cache aan te sturen voor je browser, hoeft niet persé via PHP.

http://stackoverflow.com/...headers-for-cache-control (laatste stukje) moet je een eind mee komen denk ik.
En while you're at it: Probeer te achterhalen wat welke tag/ optie precies doet, niet gewoon kopiëren plakken maar iets meer uitzoeken, qua hoe en wat je voor welke situatie nodig hebt.

[Verwijderd]

ik heb die php daar bij gezet inderdaad omdat ik had vernomen dat http headers vooral in php worden gedaan. Daarom deze php code.

[BeefHazard]

Verwijderd schreef op zaterdag 26 oktober 2013 @ 15:50:
<?php
header("Expires: Mon, 26 Jul 2014 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . "GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
?>

ik heb dit geprobeerd maar nog steeds geeft google aan dat er geen http cache is

Gebruik ook eens code-tags.

code:

[code=taal][/]

In jouw geval dus:

code:

[code=PHP][/]

Dan krijg je:

PHP:

<?php 
header("Expires: Mon, 26 Jul 2014 05:00:00 GMT"); 
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . "GMT"); 
header("Cache-Control: no-cache, must-revalidate"); 
header("Pragma: no-cache"); 
?>

Stuk leesbaarder.

[Barryvdh]

Met htaccess kan je ook al veel cachen, zie bijvoorbeeld de regels in html5boilerplate; https://github.com/h5bp/h...ate/blob/master/.htaccess

Verder (zonder naar je site te hebben gekeken), css en js minifyen en combineren, js onderaan neerzetten. Voor php APC/opcode cache scheelt al veel en evt Varnish als het echt druk wordt.

[Ramon]

Ik ben toch wel benieuwd naar de site, want nu zitten we gewoon in het wilde weg tips te geven die misschien helemaal niet relevant zijn. Misschien heeft de TS wel 15MB aan afbeeldingen op de homepage staan, of 5MB verdeeld over 300 losse bestanden zonder CDN, ik roep maar wat. En cache is leuk, maar daarmee optimaliseer je geen eerste bezoek, alleen de daaropvolgende bezoeken dus het is afhankelijk van je bezoekers of client-side cache interessant is.

[We Are Borg]

Yslow als firefox of chrome addon. Geeft erg veel tips na een analyse. En elke tip kan je door google halen als je niet weet wat je moet doen.

[hiekikowan]

Eerst eens met de eerder genoemde tools inventariseren wat de bottleneck is idd...

Een van de dingen die vaak over het hoofd gezien wordt is productieversies van de verschillende frameworks te gebruiken. Je geeft al aan Bootstrap te gebruiken, jQuery dus ook en beide frameworks bieden een development- en een productieversie aan. Aan te raden is de productieversie te gebruiken op je server, want zoals de naam al suggereert is de development-versie voor ontwikkelomgevingen. Als je van de frameworks ook nog eens de CDN-variant gebruikt met daarbij wat slimme javascript fallbacks dan is de kans groot dat de browser-cache van een bezoeker het framework al bevat waardoor deze niet opnieuw geladen hoeft te worden. Ik weet in ieder geval dat jQuery een CDN-versie aanbiedt.

Verder is het misschien nog mogelijk, wil je echt heel ver gaan, om van jQuery over te stappen op Zepto.js, welke een lichtgewicht alternatief biedt voor jQuery. In de gevallen waarin ik het gebruikt heb was het enkel de library omwisselen en hoefde ik geen eigen code/plugins aan te gaan passen...

[Ramon]

Lijkt me niet echt slim om zepto op het www te gebruiken tenzij je 100% controle hebt over de browser die je bezoekers gebruiken. Zepto is meer voor mensen die html/js-based apps bouwen, a la PhoneGap.

[Merethil]

Verwijderd schreef op zaterdag 26 oktober 2013 @ 16:00:
ik heb die php daar bij gezet inderdaad omdat ik had vernomen dat http headers vooral in php worden gedaan. Daarom deze php code.

Staat er wel PHP op de machine waar je het op draait? Voor zover ik kan zien in je posts gebruik je tot nu toe alleen HTML, Javascript en CSS... Is dit dan het enige stukje PHP code?

Daarnaast: Als je php al hebt geinstalleerd en gebruikt, lees dan dit stukje even door voor caching:
http://php.net/manual/en/function.header.php

Daar staat alles over headers en caching komt ook aan bod. Hebben ze gewoon gedocumenteerd en kan je vast een stuk verder helpen. "Cache-control: no-cache" gaat je in ieder geval niet helpen, want zoals er staat is er dan NO CACHE.

[hiekikowan]

Ramon schreef op zondag 27 oktober 2013 @ 21:50:
Lijkt me niet echt slim om zepto op het www te gebruiken tenzij je 100% controle hebt over de browser die je bezoekers gebruiken. Zepto is meer voor mensen die html/js-based apps bouwen, a la PhoneGap.

Zie nu i.d.d. dat Zepto IE niet ondersteund... (niet mijn target-audience, ook niet met gewone websites) Andere browsers werken (als het goed is) wel maar inderdaad, misschien niet de meest handige keuze.