Napsal jsem snad už všechny možné návody a řešení pro WordPress, které obsáhnou většinou běžných chyb. Vzhledem k tomu, že už mi tak trochu dochází nápady a témata, rozhodl jsem se přejít od teorie k praxi. Tedy budeme řešit problémy konkrétních webů a ukážeme si na nich i řešení. Začneme tímto, tedy flyer.cz. Našim úkolem bude zrychlit titulní stránku a dosáhnout, co možná nejvyššího hodnocení v Google PageSpeed Insights.

Jak si stojíme?

Tento WordPress jede na webhostingu Ebola, který drží několik výkonnostních rekordů ve své cenové kategorii. Má samozřejmě i několik nedostatků, které však pro osobní blog určený pro čtenáře z ČR nemá cenu nijak řešit. O tom si ale třeba povíme příště. Důležité je, že TTFB dosahuje se vším všudy běžně 84 ms. Doba generování stránky nám z toho dělá jen 40 ms. Prostě backend máme v pohodě. To co potřebujeme odladit je celkový doba načítání … eh 404 ms 🙂

Pokusíme se tento blog trochu zrychlit. 404 ms na titulní stránku je ... no dejme tomu moc :)
Pokusíme se tento blog trochu zrychlit. 404 ms na titulní stránku je … no dejme tomu moc 🙂

 

Ok konec chlubení. Od Google PageSpeed Insights máme mizerných 64/100 pro mobilní zařízení a 75/100 pro desktopy. Zkusíme z toho dneska udělat maximum co jde.

64/100 pro mobilní zařízení a 75/100 pro šablony? Rozhodně se není čím chlubit.
64/100 pro mobilní zařízení a 75/100 pro šablony? Rozhodně se není čím chlubit.

 

Nová šablona

V současné době používám šablonu zdarma FAQ. Vzhledem k tomu, že některé úpravy budou muset být na úrovni šablony, tak je třeba vytvořit si child theme, kterou si upravíme.

Vytvoříme tedy adresář faq a v něm soubor style.css (samozřejmě obrazně, vše děláme na localhostu). Do něj pak následující kód.

/*
 Theme Name: faq fast
 Theme URI: https://wordpress.org/themes/
 Description: faq fast - upravená pro rychlost
 Author: Ginoza
 Author URI: http://www.flyer.cz
 Template: faq
 Version: 1.0.0
 */
@import url("../faq/style.css");

No a můžeme se pustit do práce.

Aktivujte kompresi

Google PageSpeed Insights nám v prvním bodě vyčítá, že nemáme aktivovanou kompresi zdrojů pomocí Gzip anebo Deflate. Což není problém, stačí totiž jen vložit následující kód do .htaccess. Soubor .htaccess se nachází v adresáři, kde máte nainstalovaný WordPress (většinou něco/www/).

# DEFLATE KOMPRESE začátek
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE "application/atom+xml" \
"application/javascript" \
"application/json" \
"application/ld+json" \
"application/manifest+json" \
"application/rdf+xml" \
"application/rss+xml" \
"application/schema+json" \
"application/vnd.geo+json" \
"application/vnd.ms-fontobject" \
"application/x-font-ttf" \
"application/x-javascript" \
"application/x-web-app-manifest+json" \
"application/xhtml+xml" \
"application/xml" \
"font/eot" \
"font/opentype" \
"image/bmp" \
"image/svg+xml" \
"image/vnd.microsoft.icon" \
"image/x-icon" \
"text/cache-manifest" \
"text/css" \
"text/html" \
"text/javascript" \
"text/plain" \
"text/vcard" \
"text/vnd.rim.location.xloc" \
"text/vtt" \
"text/x-component" \
"text/x-cross-domain-policy" \
"text/xml"
</IfModule>
# DEFLATE KOMPRESE konec

Výsledek

Google PageSpeed Insights hlásí +15 bodů do rychlosti pro mobily a +16 bodů pro dekstop.

Pingdom Website Speed Test ukazuje u stránky Load time 372 ms. Tedy o 32 ms lepší.

Odstraňte JavaScript a CSS blokující vykreslování

PageSpeed Insights nám ukázal seznam souborů (JavaScript a CSS), které blokují vykreslování. V podstatě po nás Google chce, abychom obsah souborů na které se odkazuje vložili přímo do šablony. Tedy nestahovali je. Anebo je načetli asynchronně. Vzhledem k tomu, že se mi nechce sahat přímo do šablony, tak použijeme plugin Speed Booster Pack.

Po instalaci jej nastavíme následovně:

  • General options: ✔️ Defer parsing of javascript files
  • Still need more speed?: ✔️ Load CSS asynchronously

Provedeme kontrolní test Google PageSpeed Insights a jsme na 91/100 na mobilních zařízeních a 95/100 u stolních počítačů. To už jsou hodně dobré výsledky 🙂

Bohužel nám tam zůstal ještě jeden javascript pluginu wp-spamshield. Nejjednodušším řešením je asi nahradit jej, popřípadě funkci, která obsahuje kód přepsat. Což zrovna není ideální. Osobně jsem zvolil přepsání, takže po nejbližší aktualizaci to budu muset dělat znovu. Dnes nám ale jde o skóre a díky této úpravě jsme na 98/100 mobilní zařízení a 97/100 stolní počítače.

Zvolte vhodnou velikost prvků pro klepnutí

Test Uživatelského testu zjistil, že mám pro mobilní telefony moc blízko jednotlivé odkazy v pravém sloupci, které vedou na článek, což vadí uživatelům mobilních zařízení. Vzhledem k tomu, že v tomto testu mám 99/100, tak proč to nedotáhnout na 100 🙂

Pomocí Vývojářských nástrojů v prohlížeči (F12) zjistím jak se styl, který to má na starosti jmenuje a upravím odsazení. V tomto případě je to klasický li (list style). Stačí tedy přidat do souboru style.css u nové šablony:

li {
 padding-bottom: 5px;
}

Tak a uživatelský dojem je 100/100 🙂

Finišujeme

V Speed Booster Pack ještě nastavíme v Still need more speed?Minify all CSS styles a Insert all CSS styles inline to the footer. Provedl jsem ještě pár menších úprav, které však nejsou tak významné. Například přes cssminifier.com zmenšil jedno CSS. Popravdě toho už moc nezůstávalo. A celkový výsledek?

zvysovani-rychlosti-sablony-wordpress-01-PageSpeed-02

 

Celkem se nám podařilo stáhnout rychlost na 99/100 pro mobilní zařízení i pro počítač. Navíc uživatelský dojem pro uživatele mobilních zařízení 100/100. Uvidíme jestli se to odrazí i na návštěvnosti z Google.

Co se týká rychlosti, tak nám měření ukazuje 360 ms, ale mění se to podle nálady serveru. Pár vylepšení bych ještě viděl, ale to není tématem dnešní ukázky. Zde šlo o to získat co nejlepší skóre na Google PageSpeed Insights.

zvysovani-rychlosti-sablony-wordpress-02

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInBuffer this page