7 padomi, kā šodien paātrināt jūsu vietni
Ikvienam patīk forša maza iekraušanas animācija, vai ne? Bet, ja šī dalīšana ilgst vairāk nekā sekundi vai divas, tas tikai pievērš uzmanību tam, ka vietne tiek ielādēta lēnām. Un tas ir vietņu slepkava.
Lietotāji sagaida, ka vietnes ielādējas ātri un efektīvi. Jūsu pienākums ir nodrošināt, lai dizains būtu ne tikai vizuāli patīkams, bet arī simtprocentīgi funkcionāls. Ja jūsu vietne nedaudz vilkās, šobrīd varat pārstāt uztraukties, jo mums ir septiņi padomi, kas palīdzēs jums paātrināt jūsu vietni ar nelieliem dizaina uzlabojumiem. (Pārliecinieties, ka apmeklējāt katru no vietnēm, kas tiek parādītas sludinājumā; tās izskatās lieliski un ātri ielādē.)
Izpētiet Envato elementus
1. Rūpēties par animācijām
Animācija tīmekļa vietnes dizainā ir viena no 2015. gada “it” tendencēm. Nepalieciet aiz sevis, izveidojot apjomīgus failus, kas vienkārši netiks ielādēti. Sāciet ar mazākiem animētiem pieskārieniem, kad sākat strādāt ar šāda veida efektiem, un pārejiet pie lielākām animācijām pēc tam, kad esat labi izjutis, kā viņi darbojas un darbojas ar jūsu vispārējo vietnes ietvaru.
Animācijas atslēga nav ielādēt savā vietnē daudz video failu. Jo mazāka animācija, jo vieglāk ir kaut ko izveidot ar nelielu nospiedumu. Tātad, kur jūs sākat?
Dariet kaut ko vienkāršu un jautru, piemēram, izveidojiet animētu kursora stāvokli. Pogas maiņa vai paplašināšana ir niecīgs efekts, kas palīdzēs apgūt CSS un labi izjust pamata animāciju, pirms pāriet uz lielākiem elementiem. Jūs varētu apsvērt arī AJAX vai parallaksa animācijas ielādi. Patīkami, ka viena no šīm opcijām dod laiku ielādēt elementus, pat ja lietotājs to pat nepamana. Tā kā elementi tiek ielādēti, lietotājiem ritinot, jūs iegūstat dažas dārgas sekundes, lai visu sagatavotu.
2. Optimizējiet attēlus
Tā kā lietotājiem ir pieejams daudz HD un tīklenes displeju, jums, iespējams, rodas kārdinājums, veidojot vietni, ielādēt visus savus attēlus pilnā izmērā ar lielu izšķirtspēju. Neiekrīti šajā slazdā. Visticamāk, ka vairums šo attēlu ir pārāk lieli, lai jūsu vietne varētu efektīvi darboties.
Ziniet savu failu tipus. Visizplatītākie attēlu attēli tīmeklī ir JPG, PNG, GIF un SVG.
- JPG: Vislabāk piemērots fotoattēliem. JPG failu lielums var būt no maza līdz milzīgam. Saglabājot JPG failus vietnes lietošanai, noteikti saglabājiet optimizētu failu. (Adobe Photoshop varat optimizēt attēlus tīmeklim, izmantojot eksporta iestatījumus sadaļā Fails> Eksportēt> Eksportēt kā.)
- PNG: izmantojiet šo faila formātu attēliem, kuros ir teksts, lai burti būtu labi attēloti. Parasti tas ir diezgan mazs fails.
- GIF: vēlamais faila formāts mazākiem animētiem elementiem, piemēram, arvien populārajam animētās mēma stila attēlam. Bet esiet piesardzīgs, ja neesat piesardzīgs, šis faila formāts var kļūt svarīgs.
- SVG: ja tīmeklim ir nepieciešams vektora attēls, tas ir labākais risinājums. To var izmantot jebkam, sākot no ikonām un beidzot ar logotipiem.
3. Izmantojiet kodu, kur iespējams
Jums varētu rasties kārdinājums savai vietnei izveidot krāšņu ikonu un attēlu kopumu un ielādēt katru kā atsevišķu elementu. Tas var izraisīt dažas problēmas. Tā vietā, lai izsauktu šos elementus, izmantojiet kodu.
Izmantojiet CSS, lai ielādētu arī fona attēlus. Tas jūsu vietni “piespiedīs” ielādēt visu pārējo pirms fona, lai lietotāji varētu uzreiz redzēt citus vietnes elementus un tekstu. W3Schools ir lieliska un vienkārša apmācība, kā to izdarīt.
Ir daudz rīku, piemēram, no Font Awesome ikonām līdz daudzām citām CSS un JavaScript bibliotēkām, kuras varat izmantot, lai izveidotu lieliskus elementus ar jautrības efektiem, kas ir viegli. (CSS Design Awards ir īpaši jauka kolekcija, kurā ir 30 pogas un formas elementi, kurus izmēģināt.)
4. Turiet videoklipus īsus
Vēl viens moderns tīmekļa dizaina elements ir pilna ekrāna video izmantošana jūsu mājas lapā. Tas var būt vēl viens slodzes laika slazds. Jūs jutīsities aizķēries starp video kvalitāti, video saturu un ātrumu, un jums būs kaut kur jāupurējas.
Labākie videoklipi ir ļoti īsi - tikai dažas sekundes - un tie ir izveidoti, lai darbība neapstātos. Jums nav jāiekļauj arī skaņa vai citi efekti.
Varat izmēģināt dažus citus trikus, lai pēc iespējas samazinātu faila lielumu.
- Padomājiet par krāsu pārklājumu vai izplūšanu virs zemākas izšķirtspējas video. Tas joprojām var izskatīties glīti, taču neprasa tik daudz joslas platuma.
- Apsveriet videoklipu, kura izmērs ir mazāks par pilnekrāna režīmu.
- Nolaidiet automātisko atskaņošanu, kas var “pievilināt” lietotājus domāt, ka jūsu vietne tiek ielādēta ātrāk nekā tā ir.
- Neuztraucieties ar gariem video. Ja vēlaties parādīt vairākus video klipus, apsveriet video slīdņa elementu vai manuāli mainiet videoklipus pēc grafika, lai lietotāji katru reizi, apmeklējot vietni, redzētu kaut ko jaunu. (Neatkarīgi no tā, cik labs ir jūsu klips, daži lietotāji to noskatīsies vairāk nekā dažas sekundes, tāpēc neupurējiet ielādes laiku ilgākiem klipiem.)
5. Padomājiet par tēmu
Ja jūs izmantojat WordPress vai citu satura pārvaldības sistēmu ar motīvu, atcerieties, ka ne visi motīvi ir veidoti vienādi. Lai gan jums, iespējams, būs vairāk veiksmes ar premium iespēju - no kurām dažas ļauj “izslēgt” neizmantotos elementus -, rūpīgi izpētiet kodu un izveidojiet, lai pārliecinātos, ka tā nav lieta, kas aizkavē jūsu vietni.
6. Skatīties savus spraudņus
Vai jūsu vietnei ir piesaistīti ļoti daudz spraudņu vai trešo pušu lietojumprogrammas? Vai jūs aktīvi tos visus izmantojat? Lai optimizētu efektivitāti, noteikti izslēdziet neizmantotos spraudņus.
WordPress lietotāji var izmantot spraudņu veiktspējas profilētāja priekšrocības, lai redzētu, kādi spraudņi ir aktīvi un kā tie darbojas. Tas var palīdzēt novērst un identificēt problēmas, kā arī noņemt vai pārkonfigurēt šos spraudņus. (Bieži sastopama problēmu joma ir sociālās koplietošanas spraudņi.)
7. Saspiest, saspiest, saspiest
Ne tikai atsevišķām jūsu vietnes sastāvdaļām jābūt saspiestām, bet arī varat saspiest vietni kopumā, lai palīdzētu tai ātri darboties. Starp saspiežamajiem elementiem var minēt CSS un JavaScript failus, attēlus un video (mainot izmērus) un vietni, vienlaikus izmantojot tādu rīku kā GZIP.
Minificēti faili ir labākais ceļš, kad runa ir par spraudņiem un mazāku failu izveidošanu. Jūs arī vēlaties pārbaudīt, kā kods ir izveidots vietnē. Lai sasniegtu maksimālu ātrumu, viss JavaScript jāiekļauj vienā failā, un visa CSS jāiekļauj vienā citā failā. (Viena otra piezīme: arī tas, kur ievietojat šo kodu, ir svarīgs. Lai palielinātu arī vietnes ātrumu, sasaistiet CSS ar lapas augšdaļu un JavaScript apakšā.)
Secinājums
Vai jūsu vietne tiek ielādēta pietiekami ātri? Ja nē, ir pienācis laiks to pielāgot, lai sasniegtu optimālo ielādes laiku. (Ja jums vispār ir jādomā par šo jautājumu, tad jūsu vietne, iespējams, tas nav pietiekami ātrs.)
Vietnēm jābūt ātrām, lai lietotāji varētu nekavējoties mijiedarboties. Jo ilgāks laiks lapas ielādēšanai neatkarīgi no ierīces, jo lielāka ir iespējamība, ka lietotāji pavisam pametīs vietni. Tāpēc veltiet dažas minūtes šodien vai šonedēļ un apmeklējiet šo sarakstu, lai pārliecinātos, ka jūsu vietne darbojas optimālā līmenī.
Attēla avots: Mohammeds Al-Sultāns .
