You Should Get A Backpack

  • Onderwerp starter Onderwerp starter YSGAB
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.

YSGAB

Nieuwe gebruiker
Lid geworden
5 jan 2013
Berichten
2
Hallo allemaal,

Mijn nieuwe website is een Engelstalig reisblog. Het draait op Wordress met een zwaar gemodificeerd thema.

Mochten jullie de tijd hebben, ik zou het bijzonder waarderen als jullie mij wat advies zouden kunnen geven op de volgende vlakken:

- Laadtijd
- Layout
- Eventuele bugs / problemen

Het adres is http://youshouldgetabackpack.com

Alvast bedankt!

Jan
 
Hoi Jan,
Om maar met de deur in huis te vallen: het stoort mij geweldig dat de site met de deur in huis valt met een knallende Facebook pop-up. Nog voordat ik ook maar iets gezien heb van de site, word ik al uitgenodigd om 'm te liken op Facebook. :shocked:

bpack-screenshot.png

Maar:
  • (a) dan wil ik wel eerst iets van de site gezien hebben,
  • (b) dan moet ik inloggen op Facebook, maar
  • (c) dan moet ik me eerst registreren op Facebook (en ik ben geen klant van ze en wil dat ook niet worden).

Met bekwame spoed vliegt m'n muis dan ook naar naar het UIT-kruisje van de Fancybox, terwijl het in m'n achterhoofd kriebelt: "Zou dit een verkapte reclame-site van Facebook zijn?"
Zodra ik de pagina ga bekijken, zie ik in de linkerkolom alweer Facebook!
Advies: pop-up er uit halen.

=======
De pagina-snelheid.
Op het oog vond ik die niet overweldigend.
Eerste vereiste voor goede prestatie: foutloze html! Er blijkt (behalve 2 <meta>'s met eigenlijk verboden inhoud; maar dat valt door de vingers te zien) twee keer, vlak onder elkaar een <div id="fb-root"></div> aangemaakt te zijn. Daarvan is er 1 te veel, want op een pagina is een ID een unieke IDentifikatie van een element.

Verder vragen die twee Facebook-dingen nogal wat: in totaal wordt voor de pagina zo'n 1MB gedownload (989kB), met 75 "http-requests". Dat zijn verzoeken van de browser om de 75 nodige bestanden (!) op te halen bij de server. In tegenstelling tot het downloaden, wat op zich vrij vlug kan gaan, is zo'n http-request (het versturen van data-pakketjes van huis naar de server) eigenlijk uploaden, en dat gaat veel langzamer. De kunst is dan ook, zo min mogelijk http-requests te hebben.

Haal ik op een testpagina de twee FB-blokken er uit, dan hoeven er maar 30 http-requests gemaakt te worden: 30 op te halen bestanden, die samen 725kB zijn. Maar de 75-30=45 http-requests zetten het meeste zoden aan de dijk als je een snellere pagina wilt hebben.
  • Die veel FB-bestanden zijn vooral een hele serie thumbnails: allemaal heel kleine profiel-plaatjes (50*50px), die lang niet allemaal getoond worden op de pagina.
Wat je zou kunnen doen, is (bv. in elk geval op de homepage) het uitgebreide FB-blokje in de linkerkolom vervangen door alleen het FB-Like logo'tje, waar dan dezelfde link naar FB aan hangt. Dat wordt pure snelheidswinst.
  • Wil je er erg graag toch gezichtjes bij hebben, dan maak je even een screenshotje, en je monteert er 1 image met een blokje van bv. 6 thumbnails onder. Dat is dan 1 image/http-request meer, i.p.v. meteen 6 stuks. :)

=======
Webfont
Dan is er het met de pagina meegestuurde "eigen lettertype" Abel van de Google Webfonts. Het renderen daarvan vraagt ook extra/vertragende inspanning van de browsers. Weglaten zal ook snelheidswinst opleveren, denk ik.
Bovendien komt de Abel niet erg mooi over:

bpack-abel.png

Google Webfont "Abel" in Chrome

Dan denk ik dat je beter de Arial Narrow kunt gebruiken (met als fallback de gewone Arial, de Helvetica en de sans-serif): die zit op de meeste pc's, is vrijwel vergelijkbaar, is sneller, en komt beter uit de verf:

bpack-arial-narrow.png

"Arial Narrow" in Chrome

Zie ook dit topic over webfonts.

=======
De layout
Ik zou eens nadenken over een kleurtje of verlooptint of afbeelding (fotootjes-collage of figuurtjes) voor in elk geval de zijkanten naast de pagina, en eventueel ook een hele lichte grijstint voor de pagina zelf. Nu is er vooral bij breedbeeldschermen heel erg veel wit. Ik heb zelf de helderheid en het contrast op m'n monitor wat gedempt staan, maar op een resolutie van 1280*1024px wordt het witte tegenlicht toch al redelijk verblindend, en het leidt af van de pagina zelf en de donkerder foto's die daarop staan (t.o.v. wit kan dat ook niet anders ;) ).

Tenslotte valt het op dat de foto's onder de slider een herhaling zijn van wat in de slider al voorbij komt. Daar zou ik een paar andere foto's neerzetten.
En ook op de categorieën-vervolgpagina's "My Travel Tips", "My Story" en "My Random Thoughts" komen dezelfde 3 afbeeldingen resp. dezelfde 3 links naar dezelfde 3 artikelen weer tevoorschijn. - Zo lang er nog niet meer artikelen per categorie zijn, zou ik zo'n verzamel-pagina van artikelen per categorie weglaten.
Anders wordt het klikken van de bezoeker veelvuldig een "hier ben ik al geweest" rondreis. :)
Eerst lekker vullen, en dan rubriceren!

Succes en goede reis!
Met vriendelijke groet,
CSShunter
___________
PS: Dit is mijn rugzak; nog niet buiten Europa geweest (hier is het ook mooi), maar wie weet.
 
Laatst bewerkt:
Bedankt voor jullie advies! Vooral csshunter, je hebt er aardig wat werk van gemaakt!

Ik ga er van de week even rustig voor zitten (waarschijnlijk ergens in de bergen in Thailand, of in Laos :)). Vreemd trouwens dat de Facebook-plugin zoveel afbeeldingen laadt op de achtergrond, het is nog wel een officiële code van Facebook zelf. Verder is promotie via FB vrij belangrijk voor de site en is het reizende publiek waar ik op focus (backpackers) daar behoorlijk goed op vertegenwoordigd. Ik zal er nog even in moeten duiken om uit te zoeken hoe ik dit op een wat minder knallende manier over te brengen.

PS. Gave foto van je backpack! Als je Europa uit wilt, gewoon doen! Voor het geld hoef je het in ieder geval niet te laten, het is een stuk voordeliger om hier een maand rond te trekken dan een of twee weken Europa.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan