Tag: wordpress

Station Zuidhorn - trein Arriva

Gratis snelheid van een website verbeteren

Websites met veel foto’s zijn vaak erg traag. Zelfs als je gehost wordt bij snelle webhosting binnen Nederland. Dat kun je in WordPress eenvoudig verbeteren met caching en plugins. Zodat de website een stuk sneller wordt. Bijvoorbeeld met WP Optimize (met de reSmush-functie). Een andere, gratis, verbetering is Cloudflare gebruiken.

De oorzaak van het ‘traag’ zijn van fotografie websites is gelegen in de omvang van foto’s. Als fotograaf wil je je werk graag in hoge kwaliteit tonen aan je bezoekers. Dat betekent al snel dat de bestanden erg groot zijn. Dat is zeker niet nodig overigens. Door te kiezen voor afmetingen (in pixels) die overeenkomen met het gemiddelde computer- of laptopscherm (lange zijde maximaal 2400px) kun je al heel veel data besparen (ook niet onbelangrijk!) en zorgen dat de afbeeldingen sneller inladen.

Zelf kies ik voor foto’s met maximaal 1400px tot 1600px op de lange zijde. Dat is groot genoeg voor een mooie weergave op een scherm. Zeker omdat de meeste mensen toch via mobiel of tablet op internet surfen. Maar zelfs op een groot scherm ziet dat er prima uit.

Website verkeer per land

Omdat bezoekers voor mijn website van over de hele wereld komen wil ik graag dat de website een goede performance heeft.

Cloudflare gebruiken voor snellere website

Op deze website gebruikte ik tot voor kort een caching plugin maar door het grote aantal foto’s haperde die dusdanig bij het aanmaken van de cache dat ik besloten heb daar van af te stappen. Daarmee wordt de website wel trager. Dat vind ik persoonlijk niet zo erg, maar vooral voor mensen met een minder snelle internetverbinding is dat natuurlijk erg vervelend.

Daarnaast wordt een ‘trage’ website slechter geïndexeerd door Google. En aangezien mijn website van over de hele wereld bezoekers aantrekt en lang niet iedereen een goede internetverbinding heeft wil ik dus toch graag ook deze bezoekers goed ‘bedienen’.

Omdat ik voor mijn bedrijfswebsite hele goede ervaringen heb met Cloudflare heb ik besloten deze ook te gaan gebruiken voor deze fotografie-website.

Wat is Cloudflare?

Cloudflare versnelt het laden van je website en zorgt voor een beveiligde SSL-verbinding zonder dat je een SSL-certificaat hoeft te installeren of te kopen. Ook zorgt Cloudflare er voor dat hackers en spammers minder makkelijk bij je website kunnen komen. Dus caching en beveiliging van je website in één.

Voor het sneller maken van je website maken ze gebruik van caching en compressie. Ze slaan daarvoor een kopie van je data op hun eigen servers op. Bijvoorbeeld je (grote) foto’s! Dat maakt niet alleen je website sneller, het bespaart je ook data-transfer en dus, potentieel, geld!

Hoe installeer je Cloudflare?

Hoe kun je cloudflare gaan gebruiken? Als eerste: het is geen plugin maar een aparte dienst. Meldt je aan bij https://www.cloudflare.com/ en vervolgens kies je “Add Site” in het menu.

Website toevoegen aan cloudflare

Vul het adres van je website in en klik op [Add site]. Daarna leest cloudflare alle technische instellingen van je website uit en zet automatisch alles klaar voor je.

Je krijgt vervolgens twee nieuwe “DNS-servers”, de Cloudflare nameservers, van Cloudflare. Deze kun je vervolgens doorgeven aan je webhostingprovider. Vaak via een ‘beheerpanel’ in te voeren en/of zij voeren de aanpassing voor je uit. Het mooiste is als de hostingprovider het direct bij de uitgever van de domeinnaam (bijvoorbeeld de SIDN) voor je aanpast zodat je niet meer afhankelijk bent van hun diensten qua nameservers. Dat zorgt er voor dat het én  sneller is én wanneer er uitval of storing is in de DNS-server van je hostingprovider er geen storing in je website is!

Test verbetering performance met Cloudflare

Na een aantal uren, tot maximaal 48 uur, zal je website “via Cloudflare” gaan werken. Je kunt dit via het Cloudflare panel controleren of door een ping-opdracht te sturen naar je domeinnaam.

Onderstaand de resultaten voor deze website.

De belofte van Cloudflare

wat cloudflare belooft

Volgens Cloudflare kon deze website ruim één seconde sneller gaan laden. Dat lijkt niet zo veel te zijn, maar voor Google (en de gemiddelde bezoeker) is één seconde wachten “een eeuwigheid”. Elke seconde telt, zeker voor gebruikers van langzamere internetverbindingen of mobiele gebruikers.

Performance website voor Cloudflare

Via Google Pagespeed kun je meten hoe snel je website nu is. In mijn geval een score van 77.

pagespeed voor cloudflare

Voor mobiel gebruik:

Performance mobiel voor cloudflare

Performance website met Cloudflare

Na ingebruikname van Cloudflare zijn dit de resultaten.

Performance desktop pagespeed na cloudflare

Een enorme verbetering ten opzichte van hier voor! Voor mobiel gebruik is er ook een flinke verbetering gerealiseerd:

Website performance mobiel na cloudflare

 

De website loopt nu (weer) als een trein. Naast de bovenstaande testen heb ik ook nog wat andere testen uitgevoerd met ondermeer pingdom en GTMetrix. Aangezien die vanuit andere landen meten geven die iets minder optimistische resultaten maar wel verbeteringen.

Tot slot nog de ‘ping’ resultaten. Hier zie je dat de snelheid van de DNS-servers van mijn bedrijf niet slechter of beter is; die resultaten blijven nagenoeg hetzelfde.

Voor cloudflare

[email protected] ~ $ ping erbeefoto.nl
PING erbeefoto.nl (46.182.217.xxx) 56(84) bytes of data.
64 bytes from xxxx: icmp_seq=1 ttl=59 time=18.9 ms
64 bytes from xxxx: icmp_seq=2 ttl=59 time=20.6 ms

Na cloudflare

[email protected] ~ $ ping erbeefoto.nl
PING erbeefoto.nl (172.67.188.68) 56(84) bytes of data.
64 bytes from 172.67.188.68: icmp_seq=1 ttl=60 time=19.6 ms
64 bytes from 172.67.188.68: icmp_seq=2 ttl=60 time=17.3 ms

Dat is uiteraard, voor mij en mijn klanten, goed nieuws. De grote verbetering is simpelweg de caching van Cloudflare in mijn geval. En natuurlijk het feit dat de website vanaf nu nog beter bestand is tegen aanvallen van hackers!

 

 

Classic Cars Citroën DS

Optimaliseer je website: reSmush je foto’s!

Website optimalisatie is voor beheerders van websites, webwinkels en, in het bijzonder, fotografen een lastig verhaal. Foto’s op je website in een hoge kwaliteit zonder kwaliteitsverlies is geen makkelijke klus. Met WordPress, Joomla, Drupal, Magento en PrestaShop is dat echter een fluitje van een cent.

Bij optimalisatie van je website denken veel mensen in eerste instantie aan de lay-out, vindbaarheid in Google (SEO) en andere zaken. Maar er speelt ook een ‘technisch’ verhaal een rol in de optimalisatie. En door hier goed op te letten kun je (in principe) ook geld besparen!

Website optimaliseren

Waarom zou je je website moeten of willen optimaliseren?

  1. een website die geoptimaliseerd is sneller op het scherm bij de bezoeker. Vooral de ‘startpagina’ moet dus relatief snel laden. Een trage website is een afknapper. Mensen gaan geen 5-10 seconden wachten tot de pagina geladen is.
  2. Veel fotografie-websites en webwinkels zijn vaak erg traag omdat de (product)afbeeldingen in een hoge resolutie zijn of onvoldoende geoptimaliseerd voor internet. Dat is niet alleen jammer wegens de snelheid, het kost ook veel bandbreedte (het aantal mb’s dat mensen “downloaden” van je site) en opslagruimte. Eén foto in hoge resolutie is al snel 7 tot 10 mb groot;

performance verbetering optimalisatieHierdoor heb je dus én een trage website én potentiële hoge kosten én mensen die je website voortijdig verlaten én.. het leidt tot een lage google-ranking.

Voor deze casus ga ik uit van de website erbeefoto.nl die geoptimaliseerd is en een pagina-omvang van +/- 1Mb voor de startpagina heeft. De laadtijd is minder dan 2 seconden (gemeten door Pingdom, vanuit de EU en de VS is slechts een fractie hoger).

Ik heb dit vergeleken met een aantal websites (uiteraard ga ik geen namen noemen!) van fotografen uit de regio en sommige scoren vergelijkbaar, maar er zijn er ook diverse die met een laadtijd van >5 seconden erg slecht scoren.

Hoger in Google

Nu is ‘google ranking’ wel een buzz-word. Het “bovenaan in Google” is heel relatief. Veel mensen willen “bovenaan in Google”, vooral webwinkels natuurlijk, maar beseffen zich niet dat het “bovenaan staan” afhangt van de trefwoorden die mensen intikken (of zelfs volledige zinnen) in Google. Je kunt je eigen site en trefwoorden controleren via bijvoorbeeld deze website.

Daarnaast is er nog een andere weg om ‘hoog in Google’ te eindigen. Afbeeldingen worden veel gezocht door mensen, vooral foto’s. En één van mijn foto’s staat al tijden stijf bovenaan in de Google Image Search. Dit soort resultaten kun je ook beïnvloeden.

Besparen op kosten

Hoe meer ruimte en data je nodig hebt, hoe hoger de kosten voor je hosting. Door te besparen op data en opslag, kun je met een goedkoper hostingpakket toe. Dat is al de eerste winst. Wil je je werk verkopen via je website, dan is een trage website dus ook nog eens een hindernis op dat gebied. Veel mensen zullen niet wachten tot de site geladen is en vertrekken naar een ander. Dat heet de ‘bounce-rate’ (na één pagina, al dan niet helemaal geladen, vertrekken van een bezoeker). Een hoge bounce-rate is eveneens slecht voor je Google-ranking.

Er zijn dus meer dan genoeg redenen om je website ook ‘technisch’ te optimaliseren!

Hoe optimaliseer je je website?

Heel veel websites gebruiken een “Content Management Systeem” zoals WordPress. En daar ga ik in dit artikel ook van uit. Ook andere CMS-systemen zoals Joomla en Drupal en webwinkel-systemen zoals Magento en Prestashop kunnen profiteren van de oplossing die hier beschreven wordt.

Gaat het ten koste van de kwaliteit?

Voor fotografen een hele belangrijke vraag: “Gaat dat optimaliseren niet ten koste van de kwaliteit van mijn foto’s?!”. Je kunt daar in principe volmondig “Ja!” op zeggen want: het aantal pixels in de foto wordt minder. Echter, het antwoord is: “Nee!”.

Hoe kan dat? Dat heeft te maken met de beeldschermen. Digitale foto’s en afbeeldingen zijn in een enorm hoge resolutie. Omdat ze geschikt moeten zijn voor afdrukken in, uiteraard, hoge kwaliteit. Maar de PPI van een beeldscherm haalt bij lange na dat getal niet. Een beeldscherm kan simpelweg dat niet weergeven en dus gaat die ‘informatie’ al verloren voordat je het ziet omdat er een scherm ‘tussen’ je ogen en de afbeelding zit!

Bij een één megapixel-camera(..) hebben we het over 1 miljoen pixels. Een 5 megapixel digitale fotocamera kan foto’s maken met een resolutie van 2560 x 1920 pixels, bijna 5 miljoen pixels. Dat kun je simpelweg dus niet weergeven op een scherm. Er valt heel wat meer over te vertellen maar de conclusie zal duidelijk zijn. Afbeeldingen bedoeld voor op een scherm kun je behoorlijk optimaliseren. Aan het eind van dit artikel heb ik ook nog een voorbeeld hiervan uit de praktijk.

Voor je begint

Ik neem aan dat het overbodig is te melden, maar toch. Maak altijd een backup van je website voor je begint. Altijd! vertrouw er niet op dat “de hostingfirma” dat wel gedaan heeft of dat de risico’s wel mee vallen. De vraag is namelijk niet óf het fout gaat maar wannéér het fout gaat. Ik heb het in de praktijk helaas toch wel een paar keer gezien bij klanten en als je hele website ‘weg’ is door een plugin of service die faalt is dat vreselijk zuur!

WordPress

De beste en populairste oplossing voor het optimaliseren van afbeeldingen is reSmush. Er zijn diverse plugins beschikbaar waaronder de eigen plugin van reSmush via de WordPress website. Maar je kunt een stap verder zetten en het kost weinig moeite. De bovenstaande afbeelding, een screenshot, is (origineel) 829,5 kB. Nadat reSmush zijn werk doet..?

“The file was compressed from 810.02 KB to 268.36 KB saving 66.87”

Met de plugin WP Optimize kun je niet alleen je afbeeldingen optimaliseren (door slimme compressie via reSmush) maar ook allerlei andere zaken optimaliseren in je wordpress website zoals: tabellen optimaliseren, revisies van documenten verwijderen én: caching gebruiken. Door “caching” wordt je website vele malen sneller dan de standaard WordPress website.

De reden is dat pagina’s worden opgeslagen in een tijdelijk bestand en niet elke keer het hele WordPress-systeem een pagina interactief moet genereren. Daarmee wordt je website tevens minder afhankelijk van de kracht van de server (en de drukte op dat moment op de server). Een handige ‘alles in één’ tool dus!

In een andere WordPress website welke ik beheer (zie afbeelding hiernaast) bespaarde ik minder ruimte op de foto’s omdat die door een eerdere plugin al waren geoptimaliseerd. Toch was er nog ruimte voor verbetering.

Overige systemen

Voor Joomla, Prestashop, Magento en andere CMS-system en webwinkels heeft de reSmush website diverse plugins beschikbaar.

Voorbeeld foto

De “proof is in the pudding” zeggen ze altijd, dus neem ik onderstaand de proef op de som. Deze foto was oorspronkelijk 4,58Mb/20mp/350×350 dpi. Ik heb ‘m iets uigesneden en verkleind naar 1600px op de lange zijde en daardoor is de afbeelding nu 468Kb. Dat is al een aanzienlijk verschil.

klassieke auto zuidhorn

(originele foto 1600px lange zijde)

Met reSmush heb ik de foto als “gecomprimeerd” gemarkeerd, waardoor hij niet daadwerkelijk gecomprimeerd wordt maar in de originele resolutie blijft. Daarna heb ik de foto nog een keer naar de website geupload, en nu wel met reSmush laten comprimeren.

(afbeelding bewerkt door reSmush)

Zie je ook maar énig verschil? Voor het menselijk oog is dit, door het computerscherm, niet waarneembaar!

De afbeelding is nu 410Kb. Dat is niet wereldschokkend, maar bedenk dat wanneer je een site hebt met een paar honderd of zelfs duizenden foto’s de winst enorm is. En als op een pagina 10 foto’s geladen moeten worden is een verschil van 50kb/foto toch al weer een halve Mb. In de praktijk is de winst vaak groter zelfs. Dat zorgt dus voor alle eerder genoemde voordelen zoals: minder schijfbeslag, minder datatransfer en bovenal een sneller ladende pagina!

Tot slot

Niet tevreden over het resultaat? In WP Optimze heeft reSmush heeft een ‘undo’ functie. Waarmee je het origineel kunt herstellen. Heel veel succes met het optimaliseren maar nogmaals: vergeet niet vóór je iets dergelijks gaat doen: backup maken!

 

Wat is populair op deze site (en waarom)?

Een website waar je (hobby)foto’s plaatst en verslagen van ‘fotofietstochten‘, wat moet je daar van verwachten qua bezoekers-aantallen?

Voor mij was het niet heel belangrijk of er veel bezoekers op mijn site zouden komen maar de site is vooral gestart zodat ik een plek heb waar ik mijn foto’s kan plaatsen zonder afhankelijk te zijn van een (gratis) dienst die zomaar weer kan verdwijnen.

Nadat me dat namelijk een aantal keren was overkomen, ben ik mede om die reden deze site gestart.

Ook gaan sites soms over in de handen van een andere partij waardoor de functionaliteit opeens minder goed wordt, zoals bij 500px gebeurde, en toen er opeens foto’s van mij verschenen  op sites waarvan je dacht “hoe komen die daar aan? Die stond “exclusief” op 500px?!” was voor mij de maat helemaal vol. Ik gebruik deze diensten nauwelijks nog Instagram en YouPic uitgezonderd.

Het doet mij goed te zien dat er veel mensen zijn, dat hoor ik ook terug via onder andere email en berichten op Sociale Media, die het leuk vinden dat ik mijn verhalen en foto’s hier deel. Soms worden mijn foto’s zelfs gebruikt (helaas ook illegaal!) door anderen. Dat de site in een behoefte voorziet, vind ik heel erg leuk.

De laatste paar jaar ben ik mij steeds meer gaan toeleggen op het maken van fietstochten en het publiceren van de route’s en de foto’s, van vooral dieren en in het bijzonder vogels, die ik onderweg gemaakt heb. Dat ging eigenlijk niet bewust. Ik hou wel van fietsen en in combinatie met foto’s maken word dat helemaal leuk.

Vijftigduizend?

Tot mijn grote verrassing is het aantal bezoekers van deze site de 50.000 inmiddels ruim gepasseerd. Tijd om dus weer eens te kijken wat mensen zoals interessant vinden?

ID Title Link Bezoeken
1 Home Page / 14.161
2 Kasteel Olt Stoutenburght, Blesdijke (De Blesse) /kasteel-olt-stoutenburght-blesdijke-de-blesse/ 2.840
3 Gratis Foto’s en Video bewerken met Linux, OSX én Windows! /gratis-fotos-en-video-bewerken-met-linux-osx-en-windows/ 1.042
4 De AVG en (amateur)fotografie /de-avg-en-amateurfotografie/ 1.021
5 Tulpenvelden Uithuizermeeden /bollenvelden-uithuizermeeden-e-o/ 863
6 YouPIC – revolutionair platform voor Hobbyfotografie en Professionele fotografen /youpic-revolutionair-platform-voor-hobbyfotografie-en-professionele-fotografen/ 550
7 Nieuws & Updates /nieuws-updates/ 520
8 Contact /contact/ 328
9 Bunkers bij Trimunt (Marum) – Duitse Radarstelling /bunkers-bij-trimunt-marum-duitse-radarstelling/ 289
10 Mensen /fotografie/mensen/ 288

De meeste bezoekers komen binnen direct op de homepage. Via Google en Bing vooral. En nog steeds is het bericht over Kasteel Olt Stoutenburght het méést populaire artikel op de blog.

De reden daarvoor is eenvoudig overigens, als je namelijk zoekt op dat kasteel kom je bij de ‘afbeeldingen’ in Google als éérste een foto van mij tegen. En mensen klikken kennelijk direct door naar die foto. Wat voor mij dan natuurlijk wel weer heel leuk is!

Opvallende stijger in de statistieken was het (oude) bericht over de tulpenvelden bij Uithuizermeeden. Dat viel samen met de  berichten over de tulpenvelden in het westen waar mensen massaal naar toe trokken, ondanks de corona-perikelen, met als gevolg dat de bollenkwekers in het westen de tulpen vervroegd gingen ‘kopppen’. En uiteraard het eveneens niet doorgaan van de tulpenroute bij Uithuizermeeden.

Overigens was dat niet het enige bericht over de tulpenvelden die ik hier heb geplaatst; in 2018 was ik met mijn jongste dochter Lisa naar de tulpenvelden in de Noord-Oostpolder geweest. Absoluut de moeite waard dat eens te doen, kan het aanraden.

Door de beveiliging verder op te schroeven, onder andere blokkades van bepaalde landen in te voeren en software te installeren waardoor foto’s minder makkelijk ‘embedded’ kunnen worden gebruikt door derden, is het aantal bezoekers in één jaar tijd wel flink gedaald. Maar daardoor weet ik nu vrijwel zeker dat het ook échte, menselijke, bezoekers zijn.

De komende tijd, want deze site is natuurlijk ook een testcase in bepaalde opzichten, ga ik mij verder toeleggen op betere indexering in de zoekmachines (SEO). Al is bezoekersaantallen genereren voor deze site niet een hoofddoel. Ook wil ik een aantal van de foto’s die ik hier heb geplaatst te koop aanbieden; op dit moment orienteer ik mij hier nog wat op.

Oftewel: ik blijf nog wel even doorgaan met het maken van foto’s én ze beschikbaar stellen via deze website! Want het feit alleen al dat ik mensen, naast familie en mijzelf, hier een plezier mee kan doen vind ik enorm leuk.

Verschil in statistieken: 300.000?

Overigens is er een heel opmerkelijk verschil in de statistieken te zien. Ik maakte altijd gebruik van een bepaald statistiek-programma in WordPress dat recent kuren begon te vertonen. En van diverse kanten hoorde ik dat dit programma niet goed meer werkte.

Daarnaast had ik ook de sitestatistieken van WordPress Jetpack meelopen. Maar die leken sowieso onbetrouwbare resultaten te geven. Mogelijk doordat ik bepaalde zaken afgeschermd en beveiligd heb.

Wie schetst dan ook mijn verbazing als ik de statistieken van de diverse plugins vergelijk met de gelogde, serverside, bezoeken? Dit zijn namelijk de meest betrouwbare gegevens die je kunt hebben want: niet afhankelijk van plugins en connecties met sites elders om de statistieken bij te houden.

Ik had dit natuurlijk wel vaker gezien bij veel websites die we met ons bedrijf hosten. Eén van de redenen die het verschil veroorzaken is dat deze bezoekersaantallen (ruim 300.000/jaar) niet de unieke bezoekers zijn. Mensen die méérdere bezoeken op één dag doen worden ook gewoon meerdere keren meegeteld. Maar dan nog is een factor zes verschil wel héél erg groot. Wel klopt de statistiek hiernaast met de datatransfer (het aantal mb’s dat gebruikt wordt).

Zeven dag in Zwart-Wit #Facebook #Challenge

“Seven black and white photos of your life. No people. No explanation. Challenge someone new each day.” – En ja hoor, daar werd ik dus ook middels een ‘tag’ uitgedaagd. Nog zo geprobeerd te voorkomen door vooral dat soort foto’s géén “like” te geven. Maar onder de radar blijven werkt niet altijd, .. 

Royaltyjournaliste en blogger Netty kon het natuurlijk niet laten om mij uit te dagen zeven dagen lang een zwart-wit foto te plaatsen op Facebook. Wij kennen elkaar al jaren en hebben beide dezelfde liefhebberij: fotografie. Maar goed, Zwart-wit foto’s van je dagelijkse leven, zonder mensen, zonder toelichting. Dat was de opdracht.

Hier mag ik natuurlijk wel wat toelichten. De eerste foto, hierboven, is de laatste in de challenge. Koffie. Het is bij mij altijd tijd voor koffie. En er gaat dus heel wat koffie doorheen op een werkdag. Dus dat leek mij een goede afsluiter.

Ik heb de uitdaging uiteraard geaccepteerd, maar anderen ‘taggen’ heb ik beperkt gedaan. Ik hou er niet van anderen op te zadelen met een ‘plicht’. Ik was vroeger ook altijd de persoon die bij een kettingbrief de ketting doorbrak. Maar dit was een uitdaging die gewoon té leuk was.

Het is nu ik dit schrijf de 6e dag, de foto voor de 7e dag staat inmiddels klaar.  Dit artikel verschijnt ook pas de 7e dag (inplannen is erg eenvoudig in WordPress immers).

Onderstaand de foto’s van dag 1 tot 6. Klik op de foto’s voor vergroting.

De foto’s zijn gemaakt met m’n smartphone, een Motorola Moto G4.