Kako dizajnirati sučelje koje je izgrađeno za brzinu
Je li vaša web stranica spora? Budi iskren. Može li brže? Korisnici zahtijevaju web stranice koje se brzo učitavaju i nastavljaju isporučivati sadržaj bez zastoja. Ako vaša web stranica najmanje zaostaje u ispunjavanju ovog zahtjeva, korisnici bi mogli napustiti vašu web lokaciju (i možda se nikad neće vratiti).
Danas ćemo razmotriti načine kako osigurati da vaše sučelje bude izgrađeno za brzinu, tako da se više nikada ne morate brinuti o učitavanju stranica.
Istražite elemente Envatoa
Testirajte svoju web stranicu
Prije nego što se zaustavite na "nema šanse da je moja web stranica spora", testirajte je. Google ima sjajan alat koji svatko može koristiti za testiranje bilo koje web stranice unošenjem URL-a.
Dobivate sjajan izvještaj koji vam govori kako se brzo vaša web stranica kreće i gdje bi se mogla poboljšati. Dobra je ideja povremeno pokrenuti test kako biste osigurali da sve funkcionira bez problema. (Osim toga, smanjuje performanse na mobilnim i stolnim uređajima i nudi prijedloge za poboljšanje.)
Izvještaj sadrži tri preporuke - treba popraviti, razmotriti ispravku i usvojene - za sljedeće stavke:
- Keširanje preglednika
- Optimizacija slike
- Odgovor poslužitelja
- Skripte i CSS iznad preklopa
- Kompresija
- preusmjeravanja
- Minifikacija CSS-a, HTML-a i JavaScript-a
- Prednost prioriteta vidljivom sadržaju
Izbacite nepotrebne dodatke
Držite li dodatke ili dodajete dodate koje jednostavno ne upotrebljavate? Vrijeme je da ih ispraznite.
Čak se i elementi koji se ne koriste povlače na brzinu sa vaše web lokacije. (To se osobito odnosi na rad u sustavu kao što je WordPress.)
Uđite u način čišćenja i uklonite sve neiskorištene dodatke. Također biste trebali razmotriti razmišljanja o dodacima koji su u upotrebi i pobrinite se da ih zaista upotrebljavate ili da doprinose ukupnom korisničkom iskustvu, ako ne pronađete bolju opciju.
Uz broj dodataka, kvaliteta je također bitna. Nemojte samo dodati bilo koji stari dodatak na vaše web mjesto. Pokušajte pronaći elemente koji pružaju stvarnu vrijednost i koji su visoko ocjenjeni. Stari, zastarjeli elementi također mogu povući vaše web mjesto prema dolje.
Dijelite samo prema potrebi
Dok razmišljamo o dodacima, koliko gumba za dijeljenje društvenih medija imate na svojoj web stranici? Sada odgovorite iskreno: koliko vam zapravo treba?
Previše tih tipki može zbuniti korisnike - koliko ih zapravo ionako dijeli na više platformi - i smanjuje brzinu i vrijeme učitavanja. (To se posebno odnosi na one koji pokušavaju otkriti koliko lajkova ili dijeli post koji već imaju upite koji se pokreću u oba smjera.)
Odaberite jednu ili dvije mreže u kojima ste aktivni i gdje se korisnici redovito povezuju s vašom web stranicom i uključuje te gumbe. Ostatak otkačite. Oni se samo sprečavaju.
Budite oprezni od preopterećenja slike
Video, ilustracije, fotografije i animacije ... oh, moj! Svi ti sjajni vizualni elementi mogu povećati vrijeme učitavanja. Biraj mudro.
Prije nego što dodate bilo koji vizualni izgled u dizajn vaše web stranice, odmjerite njegovu vrijednost s ostalim elementima. Da li korisnicima nešto pruža? Ako je tako, nastavite. Ako ne, zašto koristite taj dizajnerski element?
Trebali biste optimizirati sve slike na webu. U pravilu bi slike trebale biti toliko velike koliko je potrebno. Ne prelazite preko mjesta i prenosite fotografije pune veličine. Potrebno je malo rada na prednjem kraju, ali bit će vam drago da ste to učinili kasnije (posebno ako vaša web stranica nastavi rasti).
Iskoristite i druge trikove. Isprobajte fontove ikona, a ne slike. Pretvorite elemente u SVG (uvećani format vektora) ako font ikone ne radi. Koristite što više "čarobnih" HTML-ova i CSS-ova, a web stranicu ne zasipajte elementima koji se učitavaju kao fotografije poput gumba, strelica i drugih alata za korisničko sučelje.
Uklonite opterećenje pomoću alata za skupljanje
Male datoteke ključ su najveće brzine. Ravnoteža je u ideji da zasloni visoke razlučivosti omogućuju dijeljenje i prikazivanje sadržaja vrhunske kvalitete. Tu se ubacuju alati za skupljanje.
Ako se ne osjećate sigurni u svoju sposobnost veličine i smanjivanja - ili jednostavno ne postižete željeni rezultat - pokušajte s jednom od ovih opcija da biste dobili datoteke na najmanju moguću upotrebu.
- WP Smush smanjuje slike za WordPress korisnike
- Kraken komprimira slike za sve korisnike
- TinyPNG još više smanjuje veličinu uobičajenog formata
- Gzip pakira datoteke za optimalnu kompresiju
- Umanjite CSS smanjuje ukupnu veličinu koda i uključuje API
- SpriteMe pretvara pozadinske slike u CSS sprite za spremanje HTTP zahtjeva
- CSS Compressor smanjuje ukupnu veličinu koda
Samo je predmemoriraj
Omogućite keširanje na svojoj web lokaciji.
Ako to ne radite, korisnici plaćaju cijenu. Još je nekoliko ljudi koji bi se mogli suprotstaviti drugačije, ali korisna vrijednost nadmašuje te argumente. Vaša web stranica mora biti brza.
Iz predmemorije se stvara privremena datoteka sa stranica tako da preglednik "pamti" web mjesto kad se korisnik vrati. Umanjuje upotrebu propusne širine, učitavanja poslužitelja i vremena kašnjenja (stvarnog ili uočenog). Korisnici će vam zahvaliti, posebno kada je riječ o pristupu masivnijim web lokacijama.
Redovito ga čistite
Baš kao što morate redovito čistiti svoj dom, tako morate i očistiti i održavati bazu podataka, poveznice i datoteke vašeg web mjesta.
Ovo su stavke na popisu za čišćenje web mjesta:
- Optimizirajte svoju bazu podataka. S vremenom se vaša baza podataka može začepiti revizijama, izvan upotrebe fotografija i spremljenih podataka. Ne morate sve zadržavati. Očistite elemente koji više nisu dio vašeg web plana.
- Nemojte slike vruće veze Povlačenje slika s tuđe web stranice (i poslužitelja) na vašu je samo loša ideja. I sporo je. Isto vrijedi i za gotovo bilo koji drugi zahtjev za vanjsku datoteku. Koristite ih samo kad je to potrebno.
- Popravite veze. Prekinute veze možda neće usporiti vašu web lokaciju, ali usporavaju vezu koju korisnici uspostavljaju s vaše web lokacije na druga mjesta, što može biti jednako loše. Uviknite se na provjeru neispravnih veza i njihovo ispravljanje.
- Sve ažurirajte. Ako trčite na platformi kao što je WordPress, poduzmite ažuriranja. Ako koristite tematske ili okvirne elemente bilo koje vrste, vrijedi isto. Ažuriranja mogu sadržavati zakrpe koje doprinose brzini i čuvaju vašu web lokaciju od potencijalnih prijetnji. (I ništa nije sporije od web mjesta koja je hakirana ili zaražena zlonamjernim softverom.)
Zaključak
Sada prođite kroz gornji popis i vratite se na Googleov alat Pagespeed Insights. Pokrenite ga opet. Primjećujete li razliku?
Ništa neće učiniti korisnika sretnijim i vjerojatnijim da će se vratiti na vašu web stranicu od sjajnog i brzog iskustva. Tijekom svih faza vizualnog dizajna, zapamtite da razmišljate i o dizajnu sučelja, tako da je vaša web stranica izgrađena za brzinu.
