Kuidas kujundada kiiruse jaoks loodud liides?
Kas teie veebisait on aeglane? Ole aus. Kas saaks kiiremini? Kasutajad nõuavad veebisaite, mis laaditakse kiiresti ja jätkavad sisu edastamist ilma viivituseta. Kui teie veebisait jääb selle nõudmise rahuldamisel kõige vähem maha, võivad kasutajad teie saidi hüljata (ja nad ei pruugi kunagi tagasi pöörduda).
Täna uurime võimalusi, kuidas veenduda, et teie veebisaidi liides on loodud kiiruse tagamiseks, nii et te ei pea kunagi enam lehe laadimisaegade pärast muretsema.
Uurige Envato elemente
Testige oma veebisaiti
Enne kui peatute küsimusega „Minu veebisait pole aeglane”, katsetage seda. Google'il on suurepärane tööriist, mida igaüks saab kasutada mis tahes veebisaidi testimiseks, sisestades URL-i.
Saate vahva aruande, mis ütleb teile, kui kiiresti teie sait liigub ja kus seda saaks parandada. Hea on mõte testida korrapäraselt, et veenduda, kas kõik töötab tõrgeteta. (Lisaks vähendab see jõudlust mobiili- ja lauaarvutites ning pakub parendusettepanekuid.)
Aruandes antakse järgmised kolm soovitust - tuleks parandada, kaaluda parandamist ja edastamist - järgmistes punktides:
- Brauseri vahemälu
- Kujutise optimeerimine
- Serveri vastus
- Klapi kohal olevad skriptid ja CSS
- Tihendamine
- Ümbersuunamised
- CSS, HTML ja JavaScripti minimeerimine
- Nähtava sisu prioriseerimine
Lülita välja ebavajalikud pistikprogrammid
Kas hoiate kinni pistikprogrammidest või lisate lisaseadmeid, mida te lihtsalt ei kasuta? On aeg neid maha visata.
Isegi elemendid, mida ei kasutata, tõmbavad teie saidi minema. (See kehtib eriti siis, kui töötate välja sellisest süsteemist nagu WordPress.)
Puhastusrežiimi sisenemine ja kasutamata pistikprogrammide eemaldamine. Peaksite mõtlema ka kasutatavate pistikprogrammide üle ja veenduma, et kasutate neid tegelikult või kui nad ei leia paremat varianti, aitavad need kaasa üldisele kasutajakogemusele.
Lisaks pistikprogrammide arvule on mureks ka kvaliteet. Ärge lihtsalt lisage oma veebisaidile ühtegi vana pistikprogrammi. Proovige leida elemente, mis pakuvad tegelikku väärtust ja on kõrgelt hinnatud. Vanad, aegunud elemendid võivad teie saidi ka alla tõmmata.
Jagage ainult vastavalt vajadusele
Kui mõtleme pistikprogrammidele, mitu sotsiaalmeedia jagamisnuppu teil oma veebisaidil on? Vastake nüüd ausalt: kui palju te tegelikult vajate?
Liiga paljud neist nuppudest võivad kasutajaid segadusse ajada - kui paljud tegelikult nagunii mitmel platvormil jagavad - ning kiirust ja laadimisaega rikkuda. (See kehtib eriti nende kohta, mis üritavad välja mõelda, kui palju meeldib või jagab postitust mõlemas suunas kulgevate päringutega.)
Valige üks või kaks võrku, kus olete aktiivne ja kus kasutajad saavad teie veebisaidiga regulaarselt ühendust ning sisaldavad neid nuppe. Kraavi ülejäänud. Nad on alles teel.
Ole ettevaatlik pildi ülekoormuse suhtes
Video, illustratsioonid, fotod ja animatsioonid ... oh, mu! Kõiki neid suurepäraseid visuaalseid elemente saab laadimisaegadele lisada. Vali targalt.
Enne kui lisate oma veebikujundusele visuaali, kaaluge selle väärtust teiste elementide suhtes. Kas see pakub kasutajatele midagi? Kui jah, jätkake. Kui ei, siis miks te seda kujunduselementi kasutate?
Peaksite kõik pildid veebi jaoks optimeerima. Üldreeglina peaksid pildid olema ainult nii suured kui vaja. Ärge minge üle parda ja laadige üles täissuuruses fotod. Esiplaanil on vaja vähe tööd teha, kuid teil on hea meel, et tegite seda hiljem (eriti kui teie veebisait kasvab jätkuvalt).
Kasutage ära ka muid trikke. Proovige pildipõhiste ikoonide asemel ikoonide fonte. Kui ikooni font ei tööta, teisendage elemendid SVG-ks (skaleeritud vektorvorming). Kasutage nii palju HTML-i ja CSS-i võlujõudu kui võimalik ja ärge rabelege saiti fotodena laaditavate elementidega, nagu nupud, nooled ja muud kasutajaliidese tööriistad.
Võtke koormavate tööriistadega koormus maha
Väikesed failid on tippkiiruse võti. Tasakaal seisneb selles, et kõrge eraldusvõimega kuvarid võimaldavad teil kvaliteetset sisu jagada ja esitleda. Sinna tulevad kahanevad tööriistad.
Kui te ei tunne oma suuruse ja kahanemisvõime osas enesekindlust - või kui te lihtsalt ei saavuta soovitud tulemust - proovige ühte neist võimalustest, et saada failid väikseima kasutatava suuruseni.
- WP Smush kahandab pilte WordPressi kasutajatele
- Kraken tihendab kõigi kasutajate pilte
- TinyPNG vähendab tavalise formaadi suurust veelgi
- Gzip pakib failid optimaalseks tihendamiseks
- Minimeeri oma CSS vähendab koodi üldist suurust ja sisaldab API-t
- SpriteMe muudab taustapildid CSS-spriteiks, et salvestada HTTP-päringuid
- CSS-kompressor vähendab üldist koodi suurust
Lihtsalt vahemälu
Luba oma veebisaidil vahemällu salvestamine.
Kui te seda ei tee, maksavad teie kasutajad hinda. Seal on veel mõned inimesed, kes võivad väita teisiti, kuid väärtus kasutajatele kaalub üles need argumendid. Teie veebisait peab olema kiire.
Vahemälu loob lehtedest ajutise faili, nii et brauser "mäletaks" saiti, kui kasutaja naaseb. See vähendab ribalaiuse kasutamist, serveri koormust ja viivitusaega (tegelik või tajutav). Kasutajad tänavad teid, eriti massiivsematele veebisaitidele juurdepääsu saamiseks.
Puhastage seda regulaarselt
Nii nagu peate regulaarselt kodu puhastama, peate puhastama ja hooldama oma veebisaidi andmebaasi, linke ja faile.
Need on teie veebisaidi puhastamise kontrollnimekirja üksused:
- Optimeerige oma andmebaas. Aja jooksul võib teie andmebaas muudatuste tõttu ummistuda, fotod ja salvestatud andmed olla kasutuses. Te ei pea seda kõike hoidma. Puhastage elemendid, mis ei kuulu enam teie veebisaidi plaani.
- Ärge kuumade linkidega pilte. Kujutiste kaasamine kellegi teise veebisaidilt (ja serverilt) teie omale on lihtsalt halb mõte. Ja see on aeglane. Sama kehtib peaaegu kõigi muude väliste failitaotluste korral. Kasutage neid ainult vajadusel.
- Paranda lingid. Katkised lingid ei pruugi teie saiti aeglustada, kuid see aeglustab ühenduse loomist teie saidilt muudesse kohtadesse, mis võib olla sama halb. Harjumuseks on katkiste linkide kontrollimine ja parandamine.
- Hoidke kõike värskendatud. Kui kasutate sellist platvormi nagu WordPress, võtke vastu värskendused. Kui kasutate mis tahes tüüpi teemat või kasti elemente, kehtib sama. Värskendused võivad sisaldada paiku, mis aitavad kaasa kiirusele ja hoiavad teie veebisaiti võimalike ohtude eest kaitstuna. (Ja miski pole aeglasem kui häkkinud või pahavaraga nakatunud sait.)
Järeldus
Nüüd töötage ülaltoodud loendi kaudu läbi ja minge tagasi Google'i tööriista Pagespeed Insights juurde. Käitage uuesti. Kas märkate erinevust?
Miski ei muuda kasutajat teie veebisaidile naasmiseks õnnelikumaks ja tõenäolisemalt kui suurepärane ja kiire kogemus. Visuaalse kujunduse kõigis etappides pidage meeles, et mõelge ka liidese kujundusele, et teie veebisait oleks üles ehitatud kiireks.
