Hvordan vi kutter siden med 10 sekunder

Hastighet og sosialt ser bare ikke ut til å fungere sammen når det gjelder et flott nettsted. Vi migrerte nettstedet vårt til flywheel (tilknyttet lenke) og det forbedret ytelsen og stabiliteten til nettstedet vårt sterkt. Men nettstedsdesignet vårt - med en fet bunntekst som promoterte vår sosiale aktivitet på Facebook, Twitter, Youtube og på vår Podcast - bremset nettstedet vårt ned til en gjennomgang.

Det var dårlig. Mens en flott side lastes inn på 2 sekunder eller mindre, tok nettstedet vårt mer enn 10 sekunder for en side å fullføre. Problemet var ikke WordPress eller svinghjul, problemet var alle de interaktive elementene som vi lastet inn fra andre tjenester ... Facebook- og Twitter-widgets, Youtube-forhåndsvisning av bilder, vår Podcast-applikasjon, jeg klarte ganske enkelt ikke å kontrollere hvor sakte de lastet inn. Inntil nå.

Du vil legge merke til at sidene våre lastes inn på omtrent to sekunder. Hvordan gjorde vi det? Vi la til en dynamisk del i bunnteksten vår som bare lastes når brukeren blar helt til det punktet. Rull helt til bunnen av siden vår i en nettleser (ikke mobil, app eller nettbrett), og du ser et innlastingsbilde ta over:

laste

Ved å bruke jQuery laster vi faktisk ikke bunnen av siden før noen ruller dit. Koden er faktisk ganske enkel:

$ (vindu) .scroll (funksjon () {hvis (jQuery (dokument). høyde () == jQuery (vindu) .scrollTop () + jQuery (vindu). høyde ()) {hvis ($ ("# placetoload" ) .text (). lengde <200) {$ ("# supplementary"). load ('[full path of page to load]');}}});

Når brukeren ruller til bunnen av siden, trekker jQuery go ut sideinnholdet i den angitte banen og laster dem inn i diven du valgte.

Selv om nettstedet ikke lenger drar nytte av innholdet som er lastet der (fordi en søkemotor ikke gjennomsøker det), er vi ganske sikre på at hastigheten på siden vil hjelpe vår rangering, deling og engasjement mye mer enn å ha noen vent utålmodig på at siden vår skal lastes utrolig sakte. Best av alt, siden har fremdeles alle elementene vi vil engasjere med våre besøkende ... uten å ofre sidehastigheten.

Vi har fortsatt litt arbeid å gjøre ... men vi kommer dit!

Hva tror du?

Dette nettstedet bruker Akismet for å redusere spam. Lær hvordan kommentaren din behandles.