Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Workflow
Webdesign

Beste Praktyke om die Prestasie van die Webwerf te Verhoog

by
Length:LongLanguages:

Afrikaans (Afrikaans) translation by Meyria (you can also view the original English article)

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.

Increase web speed performance infographic
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

Een van die belangrikste aspekte van die verbetering van 'n webblad se prestasie is minimalisering van die aantal rondritte wat die leser moet maak aan die bediener. Elke lêer wat jou webwerf bevat (soos CSS, JavaScript of beelde) moet almal afgelaai word na die blaaier. Deur hierdie versoeke te verminder, sal jou die bladsy aansienlik versnel. As jou afsonderlike CSS lêers vir verskillende dele van jou werf insluit, sal jou dit nuttig vind om al die CSS in een stylevel in te sluit, asook vir JavaScript of ander hulpbronne.

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.


Minimalisering van HTML, CSS & JavaScript

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:

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.

Jou kan HTML, CSS & JavaScript aflei. As jou dit nie doen nie, moet jou nou begin dink. Gelukkig vir ons is daar baie aanlyn gereedskap wat kan help om ons kode soos YUI kompressor te verminder en te herstel.


Optimeer prente

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.

optimize images for the web
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.

Sprites

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.

Data URIs

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.

Serve scaled images for the web

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.

dConstruct blurred images

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.


Caching

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.

Caching word dikwels die beste gebruik op bates wat selde verander, soos CSS en JavaScript lêers.  Jou kan 'n vervaldatum instel vir wanneer 'n bate moet verander, en die blaaier of bediener sal effektief aan jou 'n vars kopie van jou bates moet teken. Lees meer oor die beste praktyke om caching oor by Google Developers te gebruik.


Uitstel van Parsering van Javascript

Om te verseker dat 'n webblad ten volle aan die gebruiker gewys word, moet die blaaier al die geassosieerde lêers aflaai. JavaScript lêers moet nie in die kop van jou HTML dokument gelaai word nie, maar eerder aan die onderkant as (hoewel dit nie die totale aantal grepe verminder wat deur die leser afgelaai moet word nie), word die inhoud van die webblad voor die JavaScript vertoon. is ten volle gelaai.

As jou dit aan die kop van jou dokument wil byvoeg, sal die blaaier wag totdat die JavaScript in sy geheel gelaai is voordat die bladsy vertoon word. Jou JavaScript lêers moet ingesluit word voor die sluitingslabel.


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.

404 sadface - avoid bad requests

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.

cdn
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 Page Speed

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.


Conclusion

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.