Stručnjaci iz Cinnamon-a nude analizu trenutnih mogućnosti Flutter-a za SEO optimizaciju i uticaj koji može imati na performanse sajtova.
Flutter verzija 2 izašla je u martu 2021. godine, i tada je veb podrška konačno prešla iz bete u stabilnu fazu. Kako ima sve više veb sajtova pravljenih pomoću Futter-a, hteli bismo da odgovorimo na pitanje — koliko dobro Flutter radi sa SEO?
U Cinnamon-u koristimo Flutter od početka 2019. godine, i iz prve ruke smo svedočili povećanoj potražnji za Flutter aplikacijama. Sa kancelarijama u Zagrebu, Njujorku i Beogradu, trenutno imamo preko 70 zaposlenih i više od 300 projekata iza sebe, a deo te ekspanzije podržava i kontinualni razvoj i Flutter-a, kao i tržište koje sve više zahteva znanje ovakvih alata.
Kroz 18 meseci, naš tim je narastao od samo jednog Flutter programera do jednog od najvećih i najboljih Flutter timova u regionu! Napravili smo više od 12 lepih
Flutter aplikacija, i naši programeri i klijenti zadovoljni su proizvodima koje smo kreirali pomoću njega. Ovakva ekspanzija zahteva stručnost i posvećenost kao i razvijanje i razumevanje tehnologija koje se koriste, kako bi kreirali proizvode koji u potpunosti odgovaraju potrebama klijenata.
Flutter je dev kit otvorenog koda koji razvija Google, i radi na Androidu, iOS-u, vebu i desktopu, sve pomoću jedne baze koda. Aplikacije izrađene u Flutter-u nude munjevitu brzinu, lep korisnički interfejs, i kvalitet korisničkog iskustva koji može da se meri sa nativnim aplikacijama. Podrška za različite platforme i funkcije poput Hot Reload/Restart značajno smanjuju vreme potrebno za razvoj, kao i troškove koje podrazumeva izrada i održavanje aplikacija.
Prednosti razvoja za više platformi su očigledne, ali ostaje pitanje zašto odabrati baš Flutter? Najbolji argument za to svakako je reakcija IT zajednice. Od prve stabilne verzije koja je objavljena 2018. godine, Flutter se neprestano penje na rang-listama najpopularnijih multiplatformskih rešenja, i nedavno je prevazišao React Native kao najčešće korišćeni frejmvork.
Rast popularnosti Flutter-a (
Statista)
SEO ili Search Engine Optimization predstavlja praksu poboljšavanja kvaliteta i kvantiteta saobraćaja na veb sajtu, povećanja vidljivosti veb sajta, korišćenjem neplaćenih (odnosno organskih) rezultata pretrage. U suštini, u pitanju je način da se omogući bolje rangiranje stranica u rezultatima pretrage. Iako postoje drugi načini da se korisnici privuku na veb sajt (npr. plaćene reklame na društvenim mrežama), SEO je i dalje jako važna komponenta, jer većina onlajn saobraćaja potiče od internet pretraživača.
Organski vs. plaćeni linkovi: iako organski klikovi opadaju, neplaćeni rezultati su i dalje dominantni.
U ovom tekstu ćemo se pozabaviti pitanjem koliko je Flutter dobar za SEO iz perspektive programera. Usredsredićemo se na Google pretragu jer je ona najzastupljenija na tržištu.
Najpre, kako Google svojim korisnicima pruža željene rezultate pretrage?
Rezultati pretrage se generišu u tri koraka:
1. Crawling je faza otkrivanja. Pošto ne postoji centralna baza veb stranica, Google koristi botove koji konstantno otkrivaju nov i ažuriran sadržaj. Botovi počinju tako što gledaju spisak veb sajtova, preko linkova skaču sa stranice na stranicu i Google-u vraćaju podatke o stranicama na koje su naišli. Generički naziv bota koji koristi Google je — Googlebot.
2. Indeksiranje je proces razumevanja sakupljenih informacija (sadržaja na stranici) i skladištenje obrađenih podataka u ogromnoj bazi.
3. Rangiranje i prikazivanje rezultata je proces odabira najrelevantnijih informacija iz indeksa u odgovor na upit korisnika.
Želim odmah da se ogradim i napomenem da je generisanje rezultata pretrage izuzetno kompleksan i promenljiv proces, i da Google rangira indeksirane stranice na osnovu nekoliko stotina kriterijuma. Stoga ima mnogo načina na koje neko može da poboljša SEO svog veb sajta. Ovde ćemo se fokusirati na Flutter iz ugla programera i na probleme sa kojima se oni mogu susresti u pokušaju da optimizuju sajt.
Kako bi se ubrzalo indeksiranje, Google preporučuje da se dodaju kratki i relevantni naslovi stranica uz dodavanje podnaslova adekvatne sadržine.
Problem je u tome što se Flutter oslanja na HTML canvas tag, koji Google botovima pruža jako malo informacija o samoj stranici. Relevantni SEO meta tagovi mogu da se dodaju kako bi se poboljšala situacija, međutim, pošto je Flutter single-page aplikacija, tagovi su relevantni za čitav sajt. SEO na nivou pojedinačnih stranica i dalje nije moguć.
Važniji faktor za SEO su performanse veb sajta. Dok prolazi kroz sajt, Googlebot pažljivo prati čitav niz faktora koji znatno mogu uticati na njegovo rangiranje. Dva faktora koja ovde treba istaći su vreme preuzimanja i vreme do prikazivanja prvog značajnog sadržaja (FCP ili first contentful paint).
Vreme preuzimanja je naprosto vreme koje je potrebno da bot preuzme sve datoteke koje su neophodne za prikazivanje sajta. Što je veći obim, duže je i vreme potrebno da bi se sadržaj prikazao na ekranu. U poređenju sa drugim JS frejmvorcima, Flutter može da doda nekoliko megabajta težine koja će negativno uticati na rangiranje sajta.
FCP meri koliko je vremena pregledaču potrebno da renderuje bilo koji deo sadržine stranice nakon što korisnik dođe na nju.
Moguće je proveriti performanse sajta uz pomoć Google Lighthouse alata koji pruža korisne informacije o tome koja su uska grla na sajtu, kao i savete o tome šta programeri mogu da urade da bi poboljšali performanse. Najjednostavniji način da se testira sajt jeste tako što se na stranici Page Speed insights kopira željeni URL. Kao primer ćemo iskoristiti Flutter-ovu Gallery aplikaciju kako bismo proverili njene performanse.
Loš rezultat Flutter-ove Gallery aplikacije
Performanse su prilično loše i sigurno će negativno uticati na rangiranje stranice. Šta programer može da učini kako bi poboljšao performanse? Nažalost, trenutno jako malo, barem dok ključne Flutter funkcije koje mogu da reše ove probleme ne postanu dostupne.
Spomenuti problemi nisu jedinstveni za Flutter i ranije su bili prisutni i u drugim Javascript frejmvorcima poput React, Vue i Angular. Googlebot može da obradi Javascript kod, ali to traži mnogo više vremena i resursa of prolaska kroz jednostavnu HTML stranicu. Shodno tome, to loše utiče na veb sajt i moguće je da u potpunosti zaustavi indeksiranje. Servisi koji nude usluge poput prerenderinga i mogućnosti poput SSR-a (Server-Side Rendering) su nastali da bi Javascript SEO uopšte bio moguć. Ovi servisi mogu da vide kada bot prolazi sajt i serviraju statičku HTML verziju stranice specijalno za njega, što pomaže performansama i ujedno pruža informacije koje je lakše proći.
Da li se u budućnosti možemo nadati sličnim rešenjima i za Flutter? Pregledom trenutno otvorenih tredova na GitHub stranici, možemo videti da se dosta razgovara o načinima na koje Flutter može postati SEO friendly i o dodavanju SSR za Flutter web. Od skoro 10.000 otvorenih pitanja, obe stavke se nalaze u top 10 najtraženijih funkcija. Nažalost, Flutter tim im je dodelio nizak prioritet, te je verovatno da će proći još vremena pre nego što postanu dostupne. Flutter-ov Direktor inženjeringa je to i potvrdio u tvitu ubrzo nakon izlaska verzije 2, a odgovor Flutter-ovog product menadžera na ovo pitanje to potvrđuje.
Iako ove stavke upućuju na loš rasplet događaja, svi spomenuti faktori čine manji deo SEO optimizacije. Posredi je kompleksan proces i mnoge stvari mogu da poboljšaju rangiranje. Uprkos svemu, ukoliko je SEO prioritet, Flutter u trenutnoj verziji verovatno nije najbolje rešenje za izradu veb stranica. Sa druge strane, ukoliko je SEO od manje važnosti, a zanima vas da izradite lep i funkcionalan veb sajt uz iOS i Android podršku putem pravih mobilnih aplikacija koje se nalaze na App Store-u ili Play Store-u, i to za delić cene održavanja i razvoja spram tradicionalnih rešenja, onda Flutter može biti pravi izbor!
