Beste Praktyke om die Prestasie van die Webwerf te Verhoog
by Aaron Lumsden 24 Oct 2012
Length:LongLanguages: EnglishAfrikaansDeutschEspañolBahasa Indonesia
Dit is 'n no-brainer: goed presterende webwerwe geniet hoër besoekersbetrokkenheid, behoud en omskakeling. Gegewe hoe wispelturige gebruikers kan wees, plus die feit dat mobiele toestelle vandag baie belangrik is, het nog nooit die spoed van webwerwe so belangrik gehad nie! In hierdie artikel gaan ek wyses wys hoe jou die prestasie van jou eie webwerwe kan verbeter.
Duimnaelskets van Photodune.net
Verhoog die Prestasie van die Webwerf
Die prestasie van webwerwe en die impak wat dit het, is oor die jare goed gedokumenteer. In 2007 het Amazon berig dat vir elke 100 ms toename in laai tyd van Amazon.com hul verkope met 1% afgeneem het. Google het ook in 2006 soortgelyke resultate aangemeld met hul Google Maps-produk. Google het bevind dat deur die grootte van die bladsy van 100KB tot 80KB te verminder, hul verkeer in die eerste week met 10% gestyg en dan 25% in die volgende drie weke.
Dit is duidelik dat die monitering van die prestasie van 'n webwerf is 'n moet en moet nie geïgnoreer word as 'n integrale deel van jou web ontwerp workflow.
Bogenoemde infographic deur strangeloopnetworks.com illustreer die effek wat 'n webwerf se prestasie op gebruikers kan hê.
Jou kan dalk al van die tegnieke gebruik wat ek vandag sal bespreek, terwyl ander jou dalk nie. Jou kan dalk al van die tegnieke gebruik wat ek vandag sal bespreek, terwyl ander jou dalk nie.
Minimering van HTTP Versoeke
Die manier waarop jou lêers in jou webwerf insluit, kan ook 'n drastiese effek hê. Byvoorbeeld, as jou tans jou CSS soos volg insluit:
dan moet jou hierdie benadering heroorweeg en gebruik:
Deur dit te doen, laat jou die CSS lêer toe om parallel met ander bronne te laai, wat lei tot vinniger bladsye.
Om die kode wat ons skryf, te verstaan, formateer ons dit dikwels op 'n manier wat ons makliker kan lees, met ander woorde dit is 'n meer menslike vriendelike formaat. Kyk na die voorbeeldkode hieronder:
Ongelukkig, hoewel dit vir ons makliker kan wees om te lees, bevat die meer menslike vriendelike weergawe baie onnodige karakters. Dit is egter nie te rampspoedig in die voorbeeld hierbo nie, maar as dit 'n grootskaalse webwerf was met duisende duisende reëls kode, sou dit ons in die uitvoering van die koste kon kos.
Onnodige karakters kan wit spasie, kommentaar en nuwe reël karakters insluit. Hierdie karakters kan verwyder word sonder om die prestasie van die kode te beïnvloed en deur dit te verwyder, verminder ons die lêer grootte van ons kode, dus die hoeveelheid data wat na die blaaier afgelaai moet word.
Een van die mees prestasie honger bates wat die leser moet aflaai is beelde, wat veroorsaak dat sommige webwerwe pynlik stadig is. Waar moontlik, probeer om CSS te gebruik om grafika te genereer in plaas van beelde. Dit kan goed wees vir items soos knoppies, maar in sommige gevalle kan CSS dalk nie die ontwerp herskep soos in die geval van 'n foto of 'n gedetailleerde dekoratiewe element nie. As dit die geval is, is daar 'n paar truuks om te probeer.
Deur behoorlike opmaak en samestelling van beelde sonder om hul voorkoms of visuele kwaliteit te verloor, kan jou stoor op data wat afgelaai moet word, wat lei tot pragtige geoptimaliseerde beelde vir die web.
As jou al lankal ontwerp het, is ek seker jou sal al sprites gebruik. As jou maar net begin, dan is hier 'n vinnige oorsig van hulle.
Vroeër het ek jou vertel van die sleutel tot die versnelling van webwerwe, om die aantal http versoeke te verminder. Elke prent wat jou op jou webwerf het, vereis een http versoek aan die bediener. Gewoonlik kan blaaiers gelyktydig net 'n paar gelyktydige versoeke (na dieselfde domein) uitvoer, en daarom vorm die toue. Deur verskeie beelde in een enkele beeld te kombineer, kan ons die aantal versoeke verminder.
Die nadeel om sprites te skep, is dat hulle taamlik moeilik kan wees vir ons om te skep en kan dikwels baie fiddly wees. Weereens is daar 'n hele reeks aanlynsprite-gereedskap om sprites te skep. Die een wat ek al gebruik (wat my die afgelope ses maande lank gered het) is SpritePad. Met SpritePad kan jou eenvoudig sleep * jou beelde laat val en dit dadelik beskikbaar hê as een PNG sprite CSS & kode. Goeie dinge oa ?!
Hierbo verskyn 'n voorbeeld van sprite beelde wat op Facebook se en Google se webwerwe gebruik word.
Losslessly Komprimering van Prente
As jou byvoorbeeld 'n vorm van fotoshowe het, of baie foto's op die webwerf wat jou ontwerp, is dit dalk nie gerieflik of prakties om hulle almal as 'n sprite te dien nie. Dit is waar jou jou beelde moet komprimeer. Deur behoorlike opmaak en samestelling van beelde kan ons baie grepe data stoor.
Dikwels as jou beelde stoor met gereedskap soos Vuurwerk of Photoshop, bevat die resulterende lêers ekstra data, insluitende kleurdata wat selfs in die beeld ongebruikte is en selfs dinge soos metadata. Deur beelde saam te druk sonder om die prent se voorkoms of visuele kwaliteit te verloor, kan jou stoor op data wat afgelaai moet word. Yahoo se smush.it diens is ongelooflik goed om hierdie werk vir jou te doen. Laai eenvoudig die beelde op wat jou wil 'smash' en dit sal dit vir jou onverskillig komprimeer.
Nog 'n manier om die aantal http versoek wat beelde maak, te verminder, is om te gebruik as data uris. Data URIS kan beskryf word as
Die kodering van beide beelde en lettertipes in suiwer datastringers wat direk in jou opmaak en style sheets geïntegreer kan word
Ons het vroeg hierdie maand 'n wonderlike tutoriaal gehardloop met die The What, Why and How of Data URIs in Webontwerp. Hou aan om meer oor hierdie onderwerp te lees. Net 'n aantekening daarvan dat dit deeglik gebruik moet word en soms is dit dalk nie voordelig of prakties om hierdie metode te gebruik nie.
Bedien Skaal Prente
Beelde moet waar moontlik teen 'n oorspronklike beeldgrootte bedien word. Byvoorbeeld, jou moet nie jou beelde met behulp van CSS verander nie, tensy jou verskeie instellings van dieselfde beeld bedien en daardie prentjie ooreenstem met ten minste een wat die oorspronklike grootte is. Andersins moet jou iets soos photoshop gebruik om jou prent te verander, wat sal lei tot die stoor van grepe.
Natuurlik neem dit nie in ag nie vloeibare beelde (in responsiewe ontwerp) wat dalk groter is as wat hulle op 'n klein skerm vertoon word.
Maak seker dat jou beelde op die korrekte grootte afgeskaal word met behulp van 'n instrument soos Photoshop eerder as CSS.
Jou kan ook fisiese besonderhede verwyder.
Die voorbeeld hierbo is geneem uit die dConstruct argief webwerf. In 'n optimalisering stegniek wat op sy blog bespreek is, het Jeremy Keith die nie-noodsaaklike dele van elke foto vervaag. Daardeur het hy die vereiste beeld data verminder, en die lêer grootte word byna in twee gesny. Die verlies in detail is onbeduidend, in verhouding tot die prestasie winste wat gewen is.
40-60% van die daaglikse besoekers aan jou webwerf kom met 'n leë kas in. Die maak van jou bladsy vinnig vir hierdie eerste keer besoekers is die sleutel tot 'n beter gebruikers ervaring.
Beide webblaaiers en webbedieners maak dit moontlik om te cache. Hierdie caches stoor vorige versoeke op die blaaier of bediener; versoeke soos beelde, webblaaie, CSS / JS lêers en ander data soos koekies. Deur hierdie reaksies op te slaan, word die gebruik van bandwydte verminder, en dit help om die prestasie van 'n webwerf te verbeter.
Vermy die Maak van Slegte Versoeke
Wat is 'n slegte versoek wat jou dalk vra? Wel byvoorbeeld, 'n gebroke skakel op jou webwerf sal gelyk wees aan 'n slegte versoek. 'N Swak versoek kan geklassifiseer word as enigiets wat tot 'n 404/410 fout sou lei; enige versoek wat lei tot 'n dooie punt.
Ramiro Galan se '404 Sadface 'illustreer 'n voorbeeld van 'n slegte versoek.
Dit is onvermydelik dat jou webwerf soms verander, verskuif of opgedateer sal word. Hierdie wysigings kan lei tot ou skakels wat nie meer lei tot die korrekte bestemming nie. Alhoewel hierdie versoeke nie veroorsaak dat enige data afgelaai word nie, is dit steeds 'n verkwistende bron, aangesien die blaaier die versoek in die eerste plek moet begin. As jou vind dat jou 'n 'slegte versoeke 'op jou site dan moet jou daarop gemik is om hierdie reg te maak so gou as moontlik deur die regstelling van die foute. Google Webmaster gereedskap is 'n nuttige hulpbron uit te vind of jou webwerf het 'n gebroke skakels.
Inhoud Aflewerings Netwerke
Sodra jou al die wysigings aan jou webwerf aangebring het wat hulle die beste kans gee om 'n 'vinnige webwerf' te wees, is dit tyd om na die bediener te kyk wat dit aanbied. Tradisioneel sal 'n bediener 'n afskrif van jou werf stoor en dit dan dien na watter plek die gebruiker dit sien. Die tyd wat dit vereis van die gebruiker om die webwerf te versoek tot die tyd wat dit vereis dat die bediener moet reageer, kan wissel na gelang van waar die gebruiker in die wêreld geleë is relatief tot die bediener.
Inhoud Delivery Networks werk 'n bietjie anders. In plaas van net een kopie van jou webwerf te bedien, bied hulle verskeie afskrifte aan op verskillende bedieners wat regoor die wêreld geleë is.
Beeld met vergunning van Wikipedia
Wanneer 'n gebruiker 'n versoek aan hierdie bedieners stuur, word hulle gestuur na watter bediener die naaste aan hul ligging gevind word. Dit optimaliseer die spoed waarteen die inhoud aan die eindgebruiker gelewer word. Dit is beslis 'n bonus, maar moet net gebruik word sodra jou enige ander metode gebruik het.
Google het 'n netjiese klein instrument waarmee ons die prestasie van baie van die faktore wat ons vandag bespreek het, kan monitor. As jou nie PageSpeed ​​Insights probeer het nie, moet jou dit beslis noukeurig nagaan. Daarbenewens het hulle 'n hele hoop dokumentasie en voorbeelde wat jou sal help om jou webwerf se prestasie te monitor en te verbeter. Google beskryf dit as:
PageSpeed ​​Insights analiseer die inhoud van 'n webblad en genereer voorstelle om daardie bladsy vinniger te maak. Vermindering van laai tye kan verminder weieringskoerse en verhoog omskakelingskoerse.
Ek hoop dat jou 'n paar dinge geleer het oor die optimalisering van die spoed van webwerwe en hoe jou sommige van die metodes in jou eie projekte kan implementeer. Deur te oefen wat ons bespreek het, sal jou besoekers aanmoedig om terug te kom, op jou webwerf te bly en 'n belonende blaaierervaring te geniet terwyl daar daar is.
Die bottom line is: deur jou webwerwe te bespoedig, dra jou nie net by tot 'n beter gebruikerservaring vir jou gebruikers nie, maar 'n beter gebruikerservaring vir die web!
Die Web Prestasie Werk Groep
Web P - 'n Nuwe beeldformaat wat spesifiek ingestel is om die prestasie van beelde op die web te verbeter.