Proč se vyplácí řešit rychlost webu

srp 14 2019
S kolegy prosazujeme názor, že součástí předání webu na klíč by měla být výstupní kontrola kvality i perfektní odladění webu směrem k jeho výkonovým parametrům. Překvapuje mne, že se najde čím dál tím více firem s velmi šikovnými grafiky, UX-káky a odborníky na moderní frontend, ve kterých už nikdo nepohlídá:
 
  • Formáty obrázků, pořadí a velikost načítaných zdrojů, test Google Page Speed
  • Umístění na server s dostatečným (a pokud možno nesdíleným) výkonem, test PingDom
  • Kompresi přenášených dat, test GZip
To, co by se na první pohled zdálo, že bylo již před pěti lety samozřejmé, dnes zdaleka není standardem. K čemu je nádherná grafika a vychytané UX, když rychlost načítání potenciálnáho klienta odradí? A to za předpokladu, že klient stránku ve vyhledávači vůbec najde, protože Google nemá rád pomalé a nepřizpůsobené weby. Proč? Za každým Googlím "pro uživatelským" pravidlem je trochu logické sobeckosti. Přestože Google disponuje ohromnou datovou a výpočetní kapacitou, tak jeho potřeba vědět o všem, co se celosvětově na internetu děje, je konfrontována s raketovým růstem online obsahu. Čím rychleji dokáží Googlí roboti obsah zaindexovat (projít, vyhodnotit, zařadit do šuplíčku), tím více strojového času Google ušetří. Rychlé weby tak snižují náklady Googlu, zvyšují pravděpodobnost nákupů provozovateli a zlehčují život návštěvníkovi.   
 
Z výše popsané situace bych mohl mít radost, protože v jejím důsledku po nás stále více klientů poptává službu kontroly on page SEO a rychlosti zakázkových webů dodaných třetími stranami. Pokud by však klient měl od dodavatele rovnou k dispozici optimalizovaný web, můžeme rychleji spouštět kampaně a řešit s ním obchodně zajímavější analýzy. V neposlední řadě naše WebMedea prochází a indexuje český mluvící weby. Máme tedy podobný zájem jako Google. Čím více webů je optimalizovaných, tím více času naši slave roboti ušetří. 
 
Zajímavé je, že rychlostní přizpůsobení českých webů se různí v závislosti na oboru. Zatímco v oblasti spotřební elektroniky trvá crawlovacím robotům WebMedei projít a zaindexovat desítky webů z výsledků hledání v Googlu řádově jednotky sekund, tak u jiných oborů dosahujeme vyšších jednotek minut. Vysoká konkurence v oboru tlačí provozovatele k plošné optimalizaci webů. Tam, kde si provozovatelé dosud neuvědomili závažnost situace, těží jejich online publikum perfektně optimalizované agregátory - měřiče / srovnávače / porovnávače / doporučovače. Tak schválně podívejme se na page speed výsledek přestižního multibrand fashion obchodu (Delmas) a srovnávače (Glami).
 
Porovnání Delmas a Glami v Google PageSpeed
Obr. 1: Výsledky Google Page Speed pro mobilní zařízení z 14. 8. 2019
 
Zhruba v polovině případů, kdy nás klient osloví s poptávkou kontroly on-page SEO / rychlosti webu narážíme na argumenty / možnosti dodavatele. Situace se komplikuje v momentě, kdy dodavatel používá šablonové řešení, ať už pro e-shop či redakční systém. A paradoxně nejvíce problémů s optimalizací mají firmy, které staví web na vlastním systému. Proč? U běžně rozšířených e-shopových a redakčních systémů už zpravidla podobnou situaci někdo řešil a existuje tedy plugin či návod, jak daný problém vyřešit. Firmy s vlastním webovým produktem nemají jinou možnost, než optimalizaci vyřešit "systémově" přepsáním či vylepšením vlastního produktu. A to pro ně představuje vysoké náklady. Úpravám se buď brání, nebo zmíněná vylepšení vlastních systémů promítají klientovy do ceny v plné výši. Potom nezbývá, než společně hledat kompromisy.
 
Samozřejmě cílem není mít za každou cenu 100% hodnocení pro mobily a PC v Page Speed, ale nezdržovat uživatele a být pokud možno rychlejší než konkurence. Příkladem může být web s akordy na kytaru mého kamaráda Jirky Kynčla. Jirku baví hudba, kytary a je jeden z největších machrů na vývoj webových aplikací, jaké znám. Je velmi úspěšný v postupném hromadění online publika spojeného s kytarami. Ve WebMedea si analyzuje příležitosti a ty potom pokrývá ultra rychlými obsahovými weby. Tyto weby řeší to, co uživatel hledal, ideálně ještě dávají přidanou hodnotou v podobě souvisejícího obsahu. Výsledek je perfektní. Mikroweby akordíky či s písničkou se vyšplhaly na přední místa ve vyhledávačích a každý dosahují vyšších stovek ogranických návštěv denně, bez nutnosti platby za proklik tak přivádějí zajímavé publikum pro Jirkův projekt: online kurz hraní na kytaru.

Poolování linků ve WebMedea

led 27 2019
WebMedea je založena na microservices architektuře, rozprostřené přes vlastní síť dedikovaných a virtuálních serverů. Jak si ji nejlépe představit? Viděli jste film Na hraně zítřka s Tomem Cruisem na motivy knihy All You Need Is Kill? Tak mimozemská entita, proti které hlavní hrdina bojoval, odpovídá architektuře WebMedei. Omegy jsou dedikované servery s aplikacemi nazvanými registry, ty všechno ví - jsou napojeny přímo na Cassandru a opečovávány ve špičkových datových centrech. Alphy odpovídají uzlům s aplikací nazvanou master, která dokáže nezávisle pracovat na složitějších výpočtech a řídit armádu slavů. Chobotnaté vetřelčí Bety z filmu představují aplikace typu slave, nasazené na velkém množství virtuálních serverů po celé republice. Každý slave vidí jen svého mastera, dotazuje se ho pro úkoly a odvádí rutinní práci. Slave je úplně odstíněn od registrů, může být okamžitě nahrazen a znásoben. Nutno podotknout, že slave se na internetu chová slušně.
 
Jedním z nejvíce zatížených míst v systému jsou registry, které musí neustále poskytovat data pro byznysové analýzy master uzlů. Přičemž největší tok dat způsobuje více než miliarda hypertextových odkazů napříč všemi weby v ČR, které jsou neustále sbírány, ukládány a analyzovány. Původní implementace registrů byla založena na javovském Cassandra driveru od Datastax a knihovně Spring Boot a umožňovala následující workflow:
  1. Master se dotázal REST rozhraní registrové aplikace
  2. Registry aplikace sestavila požadovaný dotaz a poslala jej Cassandře
  3. Pomocí CassandraConverterRowCallback se z výsledkové sady vytvořily požadované objekty
  4. Objekty se zpracovaly (druhotné vyfiltrování, seřazení, či jiné předzpracování)
  5. REST rozhraní registrů vrátilo Masterovi serializované pole požadových objektů
  6. Master deserializoval objekty a provedl s nimi potřebné operace
Uvedené řešení fungovalo spolehlivě zhruba do začátku léta 2018. Mezitím přerostl počet evidovaných hyperlinků miliardu. Narostla také hustota linků v okolí jednotlivých webů. Při zpracování začalo docházet k enormnímu paměťovému zatížení a to zejména u registry aplikací.
 
Situaci jsme se rozhodli vyřešit poolováním objektů v registry a master aplikacích. Protože jsme neměli kontrolu nad instancováním tříd v CassandraConverterRowCallback a při deserializaci Sprint Boot, byli jsme nuceni tuto funkci přenechat poolu. Implementace poolu byla jednoduchá, bylo jen potřeba pamatovat na to, že si do něj souběžně chce šahat více vláken...
 
@Component
public class LinkPool {

  Deque<Link> links = new ConcurrentLinkedDeque<>();

  public void recycle(Collection<Link> links) {
    synchronized (this.links) {
      this.links.addAll(links);
    }
  }

  public void recycle(Link link) {
    synchronized (links) {
      this.links.add(link);
    }
  }

  public Link getLink(Row row) {
    Link link = null;
    synchronized(links) {
      while (link == null) {
        if (links.isEmpty()) {
          return new Link(row);
        }
        link = links.poll();
      }
    }
    return link.fromResultSetRow(row);
  }
}
Další optimalizací bylo snížení trafficu mezi registry a masterem. Byznys vrstvy pracují s linky na úrovni logických celků. Naše výpočetní algoritmy jsou založeny na principu procházení grafu do šířky. Tím pádem se systematicky přesouvají od jedné domény na druhou a zpracovávají jejich okolí. No a projít okolí domácích gigantů jakými jsou iDnes, nebo Firmy.cz vyžaduje přechroustat velké množství linků, ve kterých se zdrojové a cílové domény často opakují. Indexací duplicit při serializaci v registrech a opětovným zrekonstruováním linků při deserializaci v master aplikacích se nám v ideálním případě podařilo zmenšit traffic až o 50%.
 
Souběžně s optimalizací aplikace Marek vyčlenil master server Ares pouze k účelu analýz nad linky. Řešení se ukázalo být stabilní a neustále rostoucí databázi zvládáme bez velké zátěže vyhodnocovat.

Jak jsme pracovali v roce 2018

led 20 2019

K lednu patří bilancování nad předchozím rokem. Již na předvánoční besídce jsme si promítali finanční výsledky WebMedea services za rok 2018.

TRITON IT je firma, kde se veškerá práce podřizuje klientským zakázkám. Redukované tržby (po odečtení provozních nákladů, provizí a kreditů pro Google, Seznam, AdForm, magazíny) padnou z většiny na pokrytí práce na klientských zakázkách. Jedinou interní zakázkou je v současnosti příprava nové webové prezentace, kterou potřebujeme jako sůl.

Naopak WebMedea services (WMS) je pro nás vyloženě investiční záležitostí. Základem je odložená spotřeba. Tím, že si jako společníci od založení WMS nevyplácíme plat, můžeme vydělané prostředky alokovat do investic, které tvoří 40% veškeré práce odpracované v rámci WMS za rok 2018.

Rozložení práce ve WebMedea services v roce 2018

Obr. 1: Rozložení práce ve WebMedea services v roce 2018

V oněch 40% hodin odpracovaných na investicích se skrývají naše investiční projekty. Největší položku představuje vývoj a provoz analytického softwaru WebMedea. Dále projekt Markeťáci.online, který přiblížím v budoucnu. Dále projekt s krycím názvem Tlampač, na který plánujeme získat investici a založit pro něj samostatnou společnost. Následuje projekt Rakousko.cz, který připravujeme společně s Bizmarkem a v roce 2019 bude představovat jednu z nějvětších investic WMS. V neposlední řadě se jedná o projekt Net Forest.

Rozložení investiční práce WebMedea services v roce 2018

Obr. 2: Rozložení investiční práce WebMedea services v roce 2018

Něco málo přes 32% času jsme strávili čistou prací na zakázkách WebMedea services. Konkrétně se jednalo o realizace marketingových studií a strategií na základě dat z WebMedea. Dále pak o návrh architektury a distribuované NoSQL databáze pro projekt Politinn a dodej dat z WebMedea pro tento projekt. Zde jsme zužitkovali zkušenosti z tří let vývoje vlastního řešení.

Téměř 14% práce připadlo na režii. Ta byla tvořena schůzkami s klienty, projektovým řízením, firemními poradami, personálními záležitostmi, účetnictvím a další byrokracií.

Posledních téměř 14% práce padlo na presale. Tedy proces od navázání kontaktu po uzavření první zakázky. V prvním pololetí 2018 se presale podařilo redukovat díky spolupráci s Movisio. V druhém pololetí 2018 se nám perfektně rozjela spolupráce s Bizmarkem. Dlouhodobou investici pro redukci presalu představuje Net Forest. V neposlední řadě jsme v rámci presale rozjeli slibnou spolupráci se startupem LiveSweaters.

Do roku 2019 jsme vstoupili s novými zakázkami a možnostmi spolupráce a již jsme v plném proudu prací na dalším rozvoji :)

Workshop v Liberci

bře 19 2018

Dnes jsme si s Markem a Pepou udělali příjemný výlet do Liberce, krásného města, kam jsem před pár lety jezdil i několikrát týdně kvůli vývoji termocykléru na TUL. Dnes jsme Liberec navštívili v rámci pilotování naší analytické platformy WebMedea. Zavítali jsme do hotelu Arena, kde jsme nad daty z WebMedei udělali společný workshop Sport Park LiberecMovisio + WebMedea Services. Akce se vydařila a my se už těšíme na další spolupráci.

Workshop Sport Park Liberec + Movisio + WebMedea services v hotelu Aréna

Obr. 1: Workshop v hotelu Aréna Liberec

WebMedea dokončila pilot u Deloitte

lis 06 2017

Dnes jsme absolvovali prezentaci v Deloitte ohledně dokončení našeho půlročního pilotního provozu pro náš analytický nástroj WebMedea, který byl použit pro monitorování online situace kolem témat PSD2 a GDPR. V rámci pilotu jsme také navrhli kroky vedoucí k posílení pozice Deloitte pro sledovaná témata. Navržené kroky byly ve spolupráci s marketingovým oddělením Deloitte provedeny. WebMedea tyto kroky zaznamenala a změřila jejich přínos pro Deloitte. Mám ohromnou radost ze zájmu, který WebMedea vzbudila, nápadů na její další využití i z nabídky spolupráce pro nová témata. Více informací zveřejníme v připravované případové studii.

Dlouhodobě mne také velmi těší rozhodnutí, které jsme udělali letos v lednu. Rozhodovali jsme se mezi tím, zda WebMedeu vypustíme do světa a dotáhneme ji za plného provozu (strategie all-out), nebo zda zvolíme cestu pilotů pro významné klienty, které pro WebMedeu získáme (selektivní expanze). Vybrali jsme si druhou možnost a teď už nemáme pochyb o tom, že jsme se rozhodli správně. Vývoj nových funkcí máme plně pod kontrolou, dokážeme pružně reagovat na potřeby zkušených manažerů a WebMedeu lépe dopilovávat. Počáteční obava, že nedokážeme pro pilot získat dostatek zajímavých značek vzala za své už v létě. Získali jsme apoštoly, díky nimž do spolupráce zapojujeme nové podniky. Ty berou pilotní provoz jako konkurenční výhodu a sami aktivně přicházejí s nápady na další využití WebMedea. Fascinující je pro nás i možnost tvořit příběhy společně s našimi klienty.

Situace nebyla takto růžová od začátku, o tom ještě podrobněji napíši v některém ze svých příštích zápisků :)

Spadli jsme z Marsu

srp 22 2017

Zakládám si osobní blog. Proč? Důvodů mám několik. Pominu-li fakt, že rád píšu, tak spouštěcí impuls nastal v jeden sychravý letní večer v hospodě, kde jsme společně s Pepou a Lukášem debatovali o naší aplikaci WebMedea. Lukáš nám tehdy řekl:

"Kluci neberte to osobně, ale kdybyste za mnou přišli z ulice, nebavil bych se s Vámi, protože bych si myslel, že jste podvodníci. WebMedea má naprosto šílený web, na kterém nic není. Nikdo neví, že pod tím je celá Vaše aplikace se zajímavými pilotními klienty. U Tritonu je vidět, že něco děláte, nějaká historie, zákazníci, ale prezentace je styl devadesátky, neoslovuje mě to a nevidím za tím ty lidi."

S těmi devadesátkami tedy nesouhlasíme, to nám Lukáši pár let přidej ;)) ...ale museli jsme s Pepou uznat, že má Lukáš pravdu. V Tritonu děláme digitální marketing - designujeme weby, vymýšlíme příběhy, plánujeme kampaně - no a sami jsme tedy pořádná kovářova kobyla. Pro samou práci pro klienty a vývoj WebMedea jsme zanedbali svou vlastní propagaci. A to zní jako hodně špatná výmluva, že? ;)

Na týmové poradě jsme si položili otázku, jak sami na sebe působíme. Na odpovědích jsme se shodli:

  • Triton je neosobní - pracujeme s lidmi, ale na webu žádní lidé vidět nejsou,
  • Triton je povrchní - chybí příběhy za zajímavými referencemi,
  • Triton je neaktuální - v součásné době realizujeme širší spektrum služeb,
  • Triton je nesrozumitelný - mícháme malé a velké klienty,
  • Triton je uzavřený - řešíme pro klienty linkbuilding, ale sami nelinkujeme,
  • WebMedea je de facto neexistující produkt,
  • obchodně realizační tým WebMedea spadl z Marsu - je bez identity.

Najednou jsme si uvědomili, že tato situace nám ztěžuje každodenní práci:

  • pro Tommyho je složitější získávat nové klienty,
  • Triton oslovují především firmy, které chtějí ušetřit za reklamku,
  • SEO si u Tritonu klienti objednávají, až si vyzkouší spolupráci na kampaních,
  • WebMedea získává pilotní klienty převážně na bázi osobních vazeb a obchodních vztahů Tritonu.

Dali jsme tedy dohromady východiska:

  • Triton je 3 roky na trhu, získal zajímavé reference,
  • tým WebMedea připravuje propagační strategie pro klienty zvučných jmen,
  • produkt WebMedea potřebuje čas na dopilování pro koncového uživatele,
  • profesionální služby nad produktem WebMedea je možné prodávat rovnou,
  • tým WebMedea potřebuje aktivní propagaci co nejdříve,
  • Triton musí změnit způsob propagace.

A naplánovali, jak budeme dále postupovat:

  • aby se oddělil produkt WebMedea a nadstavbové služby, bude vytvořena prezentace WebMedea services,
  • aby se obě firmy přiblížily lidem, vzniknou nové prezentace, založené na lidech, fotkách a případovkách,
  • aby se odkryli lidé za oběma firmami, založí si zatím alespoň Michal a Marek osobní blogy,
  • aby se Triton více provázal se svými klienty, postupně vznikne skupinka mini projektů propagující společné zájmy.

Důvodem vzniku tohoto blogu samozřejmě není jen odškrtnutí si jednoho bodu v akčním plánu. Budu zde pravidelně psát o tom, jak se nám po vytyčené cestě daří kráčet. O tom, jaké nás potkali úspěchy i překážky. Občas odhalím něco ze zákulisí vývoje WebMedea, nebo se také vrátím do minulosti k tomu, jak naše společné podnikání začalo.