Optimalizácia webu vedie na dôležité informácie ktoré treba vedieť, že nemusíte postupovať podľa návodu a môžete urobiť mnohé akcie podľa seba. Samozrejme za predpokladu, že viete ako to urobiť. Ak to neviete, tu je krátky prehľad toho najdôležitejšieho, ako vyriešiť problémy na optimalizáciu webu. Čiže, optimalizáciu wordpress šablóny. Ak ste zručný v obore, tak toto môžete použiť na ktoromkoľvek webe či šablóne.
Všetko sa začína v procese koľko javascriptov a css súborov potrebujeme k tomu aby nám wordpress fungoval podľa našich potrieb a predstáv. Čím viac pluginov tým viac js a css súborov k načítaniu. Samozrejme to patrí aj na obrázky typu swg načítavané zo scriptov. Chceme teda, aby sa návštevník cítil komfortne a nemusel čakať na vstup na web a zároveň robiť príliš veľa úkonov aby sa niekam doklikal. V hlbokej podstate toto je optimalizácia wordpressu a každého webu. Na Druhej strane my chceme, aby na webe bol dostatočný počet preklikov a bol tak hodnotený ako zaujímavý prehliadačmi. Ponúknime teda návštevníkovi malý kompromis o ktorom on ani netuší. Poskytneme mu dostatok viacerých zaujímavých samostatných sekcii. Začiatok sekcii začína na hlavnej stránke alebo v menu. Čo je v podstate to isté riešenie.
Optimalizácia obrázkov na indexe webu
Optimalizácia obrázkov je jav s ktorým ak ste sa nestretli, tak sa určite stretnete pri prvých testoch. WordPress vám ponúka thumbnail, medium, large a full veľkosť. Na hlavnej stránke, ale aj tak potrebujete kúsok vynaliezavosti a toto si musíte urobiť sami a nenechať to na šablóne. Aby ste si nemysleli, že čím menší bude obrázok vizuálne tým bude mať aj menej bajtov. Toto aj tak urobí za vás šablóna (posielajte do databázy len nevyhnutné veľkosti obrázkov) wordpressu. Pre vás je podstatné aby nedochádzalo k prekresleniu v oblasti zobrazenia. Prekreslenie znamená napríklad: V skutočnosti je obrázok umiestnený v rozlíšení 600x400px ale šablóna poskytuje rozmer 1024x678px. Tým dochádza pri vykreslení stránky k posunom zobrazovanej časti. Teda obrázok poskakuje rôznymi smermi kým sa web plne nenačíta. Toto ale návštevník nevidí, ten vidí výslednú časť ako celok.
Posun vykreslenia je tá časť, ktorá znižuje čas vstupu LCP. Ide o milisekundy, ale tie milisekundy sú dôležité na trase ku klientovi návštevníkovi webu. K tomu patrí samozrejme a neodmysliteľne zakešovanie obsahu pre prehliadače, čo je opäť zásadné šetrenie milisekundami. Sumár ale môže byť spočítaný na niekoľko sekúnd vo váš neprospech ak nekešujete súbory v prehliadačoch.
WP-optimize ako samostatné riešenie
Ak sa rozhodnete, že nepoužijete predvolené hodnoty podľa pluginu, môžete tieto nastavenia urobiť tak, aby to hlavne vyhovovalo vašim riešeniam na webe. Postupne niekoľko obrázkov v postupe po inštalácii.
Potiahnutie obrázka a zadanie rozmeru manuálne do šírka a výška „Width a Height“ vám zaručí že nebude dochádzať k posunu vykreslenia, ale rozmer by mal byť rovnaký v knižnici obrázkov, ako ten rozmer čo zadávate na web. Menší by bol rozmazaný, na to pozor.
Zápis Javascriptov a snáď aj najväčšieho css ako preconnect. Taktiež, nezabudnite že niečo nevyplnené v profile sa rovná prázdnej („“ />) informácii a prázdne úvodzovky znamenajú milisekundy naviac. Robte ten zápis len vtedy ak vám niektorý tester odmieta načítanie súboru a chcete teda jeho uprednostnené načítanie.
Samostatnou jednotkou je htaccess súbor v ktorom zadáme také hodnoty ktoré sú pre naše potreby dôležité.
V prednastavenej hodnote totiž všetky súbory nie sú a tie ktoré tam zadal autor pluginu sú vždy nastavené pre všetky typy súborov rovnaké. Napríklad: Ak zvolíte 365 dní tak všetko v htaccess bude mať hodnotu 365 dní a je jedno či to je js alebo css či obrázky. Píšem o kešovacích pluginoch LiteSpeed Cache, W3 Total cache, WP-Faster cache, WP-Optimize.
Všetko alebo nič
Takže si prepíšeme htaccess manuálne. Keď máme všetko prepísané vrátime sa do priečinku cache a stlačíme „purge cache“ a necháme kešovať všetky nastavenia odnova.
Veď máme všetko otestované a zadané, tak nech tam nezostane niečo čo sa tam mohlo niekde zatúlať. Vlastne aby som nezabudol. Pokým vykonávame testy máme keš vypnutý, no môžete to robiť aj spôsobom: Nové hodnoty vyprázdniť cache počkať kým zakešuje zmeny a pokračovať v teste. Nový úkon a nové nastavenie opäť vyprázdniť cache a čakať do načítania a testovať.
Účinnosť testerov a optimalizácia webu
Môžem s najväčšou zodpovednosťou prehlásiť že najúčinnejší je chrome device tools a následne v ňom sektor Lighthouse.
Môžete si ho stiahnuť a nainštalovať ako bežný chrome prehliadač. Otvoríte si svoj web a pravou myškou zvolíte „preskúmať“. Odporúčam spracovávať chybové hlásenia postupne od zdola až na vrch. Nie naraz, ale krok za krokom, teda riadok od riadku. Vyriešte najprv jeden problém a až po ďalšom teste nasledujúci problém. Ak budete chcieť robiť všetky chyby v testeri naraz, bude vám vždy vyhadzovať nasledujúce nové chyby. Online Pagespeed web dev nie je zlý, no problém má. Občas nevie načítať script alebo css a tak potom vyhadzuje chybové hlásenia z ktorých to je potom na „hlavu“ kde ste zase spravili chybu. Preto optimalizácia webu trvá dlho.
Optimalizácia webu
Ten istý problém má aj dev measure. Pri každom teste môže ukázať niečo iné aj keď nerobíte žiadne úpravy. Je totiž náchylný na rýchlosť vášho pripojenia. Dobrý tester sa zdal byť aj tools key cdn, pokým vám nezablokovali testy. Takže tu treba byť veľmi trpezlivý, no určite kvôli pár testom sa tu registrovať nebudem. Veľmi dobrý je aj test gtmetrix. Tým že sa test vykonáva na druhej strane sveta celkovo dobre zodpovedá tomu, ako vhodne máme vyladené LCP, CLS, TBT a FCP. Tu však tiež treba myslieť na tú vzdialenosť a nebyť prekvapený, keď výsledný čas bude 1,6s. Predsa len ide o rýchlosť celou sieťou internetu a tá nie je vždy konštantná. Čím je teda číslo menšie tým je to skvelejšie pre návštevníka.
Taká drobnosť na záver, ale dôležitá ako je optimalizácia webu. Vyhýbajte sa pluginom (ak je to len možné) ktoré merajú výkonnosti, rýchlosti webu, najrôznejšie metriky dodatkového merania návštevnosti, meranie trafikov a všetkému kde sú použité spätné linky (v html kóde) na iný web ako je ten váš. Toto trvale zníži šancu na rýchly web. Čím menej linkov tým lepšie.
Pavol Knut Navrátil