Praktika lõputööks anti mulle alguses võimatuna näiv ülesanne – tee nii, et KoduleheKoolitused veebileht oleks Google Page Speed tulemuse järgi 100/100’st. Kas see on võimalik?

Uurisin veebilehe tehnilise optimeerimise kohta kümneid ja kümneid postitusi ning katsetamise jaoks kasutasin kloonitud lehte.

Kuna ekraanile ilmus juba pärast esimest katsetust teade  “FATAL ERROR”, sain juba varakult enda nahal tunda, kui kasulik on teha katsetusi kloonitud veebilehel, mitte originaallehel.

Kas eesmärk 100 punkti / 100st on ikka tehtav?

Eesmärgiks oli püüda saada tehnilise optimeerimise tulemusena veebilehe hindeks (performance grade) 100 punkti 100st.

SEO-d ja kasutaja kogemust (user experience) mõjutab veebilehe allalaadimiskiirus (load time), mitte veebilehe skoor (performance grade).

Kuna Google PageSpeed näitab üksnes veebilehe skoori, mitte kiirust, otsustasin kasutada pingdom‘i tööriista (tools.pingdom.com), kuna sellega on võimalik mõõta nii veebilehe skoori kui ka kiirust.

Esimesel korral mõõtes sain järgneva tulemuse.

Skoor on 76, mis on hea tulemus. Veebilehe allalaadimiskiirus on 2.02 sekundit, mis on samuti hea tulemus.

Uuringud on näidanud, et:

• 47% kasutajatest eeldavad, et veebilehe allalaadimiskiirus jääb alla kahe sekundi.
• 57% veebilehe külastajatest lahkub Sinu lehelt, kui veebilehe avanemiskiirus on üle kolme sekundi.

Seega, mida kiirem on veebileht, seda rohkem külastajaid jõuab ja jääb Sinu veebilehele.

Järgnevalt toon välja hoiatused, mida tools.pingdom soovitas lahendada selleks, et tõsta veebilehe skoori ning kiirendada selle allalaadimist.

 1. Leverage browser caching

Browser caching tähendab seda, et pärast esimest veebilehe külastamist salvestab veebilehitseja osa faile (veebilehe logo, CSS-i failid jne) oma vahemällu.

Sel moel ei pea teistkordsel veebilehe külastamisel neid faile enam alla laadima, kuna need failid on juba salvestatud veebilehitseja mällu.

Oluline on seada vahemälus salvestatud failidele aeg, mil peaks neid uuendama. Seda saab sätestada WordPressis .htaccess failis.

Kui Sul on veebilehel Yoast SEO plugin, leiad .htaccess faili kerge vaevaga. Mine Yoast SEO => Tools =>  File editor. Lisa faili järgnev kood:

Kardad ise muuta .htaccess faili?

Ära muretse, WordPressis on selle probleemi jaoks palju pluginaid. WP Rocket, mis on WordPressi tasuline optimeerimise plugin, muudab ise automaatselt pärast plugina paigaldamist ja aktiveerimist .htaccess faili.

KoduleheKoolitused veebilehele on paigaldatud plugin WP Rocket, mis peaks likvideerima “Leverage browser caching“ probleemi.

Tools.pingdom.com näitab aga  “Leverage browser caching“ hoiatust ning toob välja järgnevad failid, millel pole failide aegumist määratud:

1.  https://fonts.googleapis.com/css?family=Open+Sans%3A400&subset, GOOGLE WEBFONTS!
2.  https://static.hotjar.com/c/hotjar-247813.js?sv=5, HOTJAR PLUGIN!
3.  https://www.googletagmanager.com/gtm.js?id=xxx-xxxxxx, GOOGLE TAG MANAGER!
4.  https://connect.facebook.net/signals/config/664119540372147?v=2.7.12, FACEBOOK!
5.  https://www.google-analytics.com/analytics.js, GOOGLE ANALYTICS!
6.  https://s3.amazonaws.com/downloads.mailchimp.com/js/goal.min.js. PLUGIN MAILCHIMP FOR WORDPRESS!

Eelnevad failid on niinimetatud kolmandate osapoolte failid (3rd party assets).

Need failid ei asu Sinu serveris (external URLs), seega ei saa Sa kontrollida ka nende sätteid. Lahenduseks on nende failide salvestamine ja hoidmine oma serveris.

Järgnevalt seletan, kuidas toimida Google Analytics‘i , Google Webfonts‘i, Mailchimp‘i ja Google Tag Manager‘i JavaScripti failidega.

1.1 Google Analytics

Google Analyticsi “Leverage browser caching” hoiatuse puhul on tegemist levinud probleemiga, mille lahendamiseks on arendatud plugin Complete Analytics Optimization Suite.

Tegemist on Daan van den Berghi arendatud pluginaga. Plugin laeb alla Google Analyticsi JavaScripti faili (analytics.js), hoiab faili lokaalselt oma serveris ning uuendab seda faili automaatselt teatud intervalli tagant, kasutades WordPressi wp_cron() funktsiooni.

Toimi järgnevalt:

1. Installeeri plugin Complete Analytics Optimization Suite.
2. Mine Sätted => Optimize Analytics.
3. Sisesta Google Analytics Tracking ID.
4. Vali Position of tracking code footer.

Plugina Complete Analytics Optimization Suite kasutamine muutis failide allalaadimist 5 millisekundi võrra kiiremaks.

Enne plugina kasutamist kulus failide allalaadimiseks 54 millisekundit. Pärast plugina Complete Analytics Optimization Suite kasutamist on failide allalaadimiskiirus 49 millisekundit.

 1.2 Google Webfonts

Avada teemas on võimalik kasutada järgnevaid fonte:

1. Kohandatud (custom),
2. standardseid (standard),
3. Google’i veebifonte (Google Webfonts).

Optimeeritaval veebilehel oli kasutatud Google’i veebifonti Open Sans. Lehel kasutatakse välist (external) URLi, fail pole mitte Sinu serveris, vaid Google’i serveris, mistõttu on ainukeseks lahenduseks laadida fail oma serverisse.

Kuna Google Webfonts’ide puhul kasutatakse välist faili ning Sina ei saa mõjutada nende failide seadeid, on Sul probleemi lahendamiseks kaks valikut:

1. Kasutada standardfonte.
2. Kasutada kohandatud fonte.

Kui Sa ei soovi oma valitud fonti (meie näite puhul open sans‘i) muuta standardfondi vastu, on sul üks lihtne lahendus: kasutada ise üles laetud kohandatud fonti. Õnneks on Avadas seda väga lihtne teha.

Toimi järgnevalt:

1. Mine lehele https://google-webfonts-helper.herokuapp.com/fonts.
2. Vali sobiv font.
3. Laadi fail endale alla (luuakse WOFF, WOFF2, TTF, SVG, EOT failid, mis on vajalikud erinevate veebilehitsejate jaoks).
4. Mine Theme options => Typography => Custom Fonts.
5. Lae sobiv fail sobivasse lahtrisse.
6. Salvesta.
7. Värskenda lehte.
8. Mine järgevatesse sektsioonidesse:

• body typography,
• headers typography,
• menu

ning vali Font Family alt Custom Fonts, mille alla on ilmunud Sinu alla laaditud kohandatud font.

Avada foorumis soovitatakse lisaks lülitada välja Theme Options Panel –> Advanced –> Theme features –> Google Map Scripts ning Theme Options Panel –> Advanced –> Theme features –> Font Awesome.

Google’i veebifontide kasutamise korral oli faili allalaadimiskiirus 74 millisekundit. Kohandatud fondi kasutamise korral oli faili allalaadimiskiirus 10 millisekundit.

Seega vähenes faili allalaadimiseks kuluv aeg 64 millisekundi võrra, mis on väga hea tulemus.

1.3 Mailchimp

Mailchimp’i näol on tegemist WordPressi pluginaga. Mailchimp’i JavaScripti fail ei asu Sinu serveris, vaid kolmandate osapoolte serveris, seega tuleb Mailchimpi JavaScripti fail enda serverisse salvestada.

Kuna ma ei soovi uuendada Mailchimpi JavaScripti faili manuaalselt, kasutan JavaScripti faili automaatseks uuendamiseks cron-süsteemi.

Tänu cron-süsteemile on võimalik valitud intervalli tagant teostada mingit toimingut (käivitada koodijuppi). Meie näite puhul uuendame selle abil iga päev meie serveris asuvat Mailchimp.js faili.

Probleemi likvideerimiseks toimi järgnevalt:

1. 1. Mine https://s3.amazonaws.com/downloads.mailchimp.com/js/goal.min.js lehele.
   2. Kopeeri ja kleebi see endale ning salvesta JavaScripti failina kausta wp-content/themes/Sinu_teema_nimi/assets/js. Faili nimi vali ise. Soovitan Sul kasutada sarnast nime, nt mailchimp.js. Sel moel on vähem segadust, kuna faili nimest on aru saada, millega on tegemist.
   3. Mine Avada => Theme Options => Advanced => Code fields => Tracking Code.
   4. Otsi üles Mailchimpi koodijupp.
   5. Asenda parameetri src vana väärtus uuega (wp-content/themes/Sinu_teema_nimi/assets/js/mailchimp.js).
   6. Installi ja aktiveeri plugin WP Crontrol.
   7. Mine Töövahendid => Cron Events.
   8.  Vali Add PHP Cron Event.
   9.  Lisa PHP koodi lahtrisse allolev kood (ilma algus- ja lõpumärgendita).
   10.  Vali kuupäev ja kellaaeg, mil esimest korda uuendatakse (Next Run).
   11.  Vali Recurrance Kord päevas.
   12.  Kliki nupu Add PHP Cron Event-i peale.

<?
// script to update local version of Google analytics script

// Remote file to download
$remoteFile = 'https://s3.amazonaws.com/downloads.mailchimp.com/js/goal.min.js';
$localfile = 'SISESTA SIIA FAILI ABSOLUTE PATH';
//For Cpanel it will be /home/USERNAME/public_html/ga.js

// Connection time out
$connTimeout = 10;
$url = parse_url($remoteFile);
$host = $url['host'];
$path = isset($url['path']) ? $url['path'] : '/';

if (isset($url['query'])) {
  $path .= '?' . $url['query'];
}

$port = isset($url['port']) ? $url['port'] : '80';
$fp = @fsockopen($host, '80', $errno, $errstr, $connTimeout );
if(!$fp){
  // On connection failure return the cached file (if it exist)
  if(file_exists($localfile)){
    readfile($localfile);
  }
} else {
  // Send the header information
  $header = "GET $path HTTP/1.0\r\n";
  $header .= "Host: $host\r\n";
  $header .= "User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6\r\n";
  $header .= "Accept: */*\r\n";
  $header .= "Accept-Language: en-us,en;q=0.5\r\n";
  $header .= "Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7\r\n";
  $header .= "Keep-Alive: 300\r\n";
  $header .= "Connection: keep-alive\r\n";
  $header .= "Referer: http://$host\r\n\r\n";
  fputs($fp, $header);
  $response = '';

  // Get the response from the remote server
  while($line = fread($fp, 4096)){
    $response .= $line;
  }

  // Close the connection
  fclose( $fp );

  // Remove the headers
  $pos = strpos($response, "\r\n\r\n");
  $response = substr($response, $pos + 4);

  // Return the processed response
  echo $response;

  // Save the response to the local file
  if(!file_exists($localfile)){
    // Try to create the file, if doesn't exist
    fopen($localfile, 'w');
  }

  if(is_writable($localfile)) {
    if($fp = fopen($localfile, 'w')){
      fwrite($fp, $response);
      fclose($fp);
    }
  }
}
?>

Enne Mailchimpi JavaScripti faili enda serverisse salvestamist oli faili alla laadimise kiirus 770 millisekundit. Pärast on allalaadimiskiirus 11 millisekundit.

Faili tõstmine oma serverisse vähendas faili allalaadimiseks kuluvat aega 759 millisekundi võrra.

 1.4 Google Tag Manager

Google Tag Manager’i “Leverage browser caching” hoiatuse puhul on tegemist levinud probleemiga.

Probleemi likvideerimiseks toimi järgnevalt:

1. Mine https://www.googletagmanager.com/gtm.js?id=xxx-xxxx lehele.
2. Kopeeri ja kleebi see endale ning salvesta JavaScripti failina kausta wp-content/themes/Sinu_teema_nimi/assets/js. Faili nimi vali ise. Soovitan Sul kasutada sarnast nime, nt gtm.js. Sel moel on vähem segadust, nimest on aru saada, millega tegemist.
3. Mine Avada => Theme Options => Advanced => Code fields => Space before </head>.
4. Otsi üles Google Tag Manageri koodijupp.
5. Asenda parameetri src vana väärtus uuega.
6. Installi ja aktiveeri plugin WP Crontrol.
7. Mine Töövahendid => Cron Events.
8.  Vali Add PHP Cron Event.
9.  Lisa PHP koodi lahtrisse allolev kood (ilma algus- ja lõpumärgendita).
10.  Vali kuupäev ja kellaaeg, mil esimest korda uuendatakse (Next Run).
11. Vali Recurrance Kord päevas.
12. Kliki nupu Add PHP Cron Event‘i peale.

<?
// script to update local version of Google analytics script// Remote file to download
$remoteFile = ‘https://www.googletagmanager.com/gtm.js?id=xxx-xxxxxx’;
$localfile = ‘SISESTA SIIA FAILI ABSOLUTE PATH‘;
//For Cpanel it will be /home/USERNAME/public_html/ga.js// Connection time out
$connTimeout = 10;
$url = parse_url($remoteFile);
$host = $url[‘host’];
$path = isset($url[‘path’]) ? $url[‘path’] : ‘/’;

if (isset($url[‘query’])) {
$path .= ‘?’ . $url[‘query’];
}

$port = isset($url[‘port’]) ? $url[‘port’] : ’80’;
$fp = @fsockopen($host, ’80’, $errno, $errstr, $connTimeout );
if(!$fp){
// On connection failure return the cached file (if it exist)
if(file_exists($localfile)){
readfile($localfile);
}
} else {
// Send the header information
$header = “GET $path HTTP/1.0\r\n”;
$header .= “Host: $host\r\n”;
$header .= “User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6\r\n”;
$header .= “Accept: */*\r\n”;
$header .= “Accept-Language: en-us,en;q=0.5\r\n”;
$header .= “Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7\r\n”;
$header .= “Keep-Alive: 300\r\n”;
$header .= “Connection: keep-alive\r\n”;
$header .= “Referer: http://$host\r\n\r\n”;
fputs($fp, $header);
$response = ”;

// Get the response from the remote server
while($line = fread($fp, 4096)){
$response .= $line;
}

// Close the connection
fclose( $fp );

// Remove the headers
$pos = strpos($response, “\r\n\r\n”);
$response = substr($response, $pos + 4);

// Return the processed response
echo $response;

// Save the response to the local file
if(!file_exists($localfile)){
// Try to create the file, if doesn’t exist
fopen($localfile, ‘w’);
}

if(is_writable($localfile)) {
if($fp = fopen($localfile, ‘w’)){
fwrite($fp, $response);
fclose($fp);
}
}
}
?>

Enne Google Tag Manageri JavaScripti faili enda serverisse salvestamist oli faili alla laadimise kiirus 142 millisekundit. Pärast on faili allalaadimiskiirus 14 millisekundit.

Faili tõstmine oma serverisse vähendas faili allalaadimiseks kuluvat aega 128 millisekundi võrra.

2. Specify a cache validator

Kui veebilehitseja (Google Chrome, Mozilla jne) teeb päringu (request) serverile, saadetakse serverisse ka päringu päised (request headers).

Server saadab veebilehitsejale vastuse (response) failide (HTML, CSS jne) ja vastuse päiste (response headers) näol.

Last-Modified ja ETag on päised (headers), mis annavad infot selle kohta, kas laadida fail alla serverist või kasutada veeilehitseja vahemälus olevat faili.

Külastasin esimest korda https://www.wallpapersafari.com/collection/island/ veebilehte. Vaatlesin lähemalt ühe pildifaili päringu ja vastuse päiseid (request and response headers).

Vastuse päistes (response headers) on “Last-Modified” ja “ETag” päised.

Laadisin uuesti sama veebilehe. Seekord on Status Code 304, mis tähendab, et pildifail laaditakse alla veebilehitseja vahemälust, mitte serverist.

“If-modified-since” päis (header) küsib serverilt, kas faili on uuendatud pärast viimast päringut. Kui pole, laaditakse pildifail alla veebilehitseja vahemälust. Kui faili on uuendatud, laaditakse pildifail alla serverist.

Tools.pingdom tõi välja, et osa failidel puudub “Last-Modified” ja “Etag” päis, mis aitavad otsustada, kas laadida alla vahemälus olev fail või hoopis serveris asuv fail.

Optimeeritava veebilehe puhul olid probleemiks kolmanda osapoolte failid. Probleemi lahenduseks on jällegi nende failide hoidmine oma serveris. Ainult oma serveris hoitud failide sätteid saab muuta.

Kuna eelnevalt juba salvestasime kolmandate osapoole failid oma serverisse “Leverage browser caching” probleemi lahendamiseks, siis tools.pingdom.com “Specify a cache validator” hoiatust enam esile ei too.

3. Specify a Vary: Accept-Encoding header

“Specify a Vary: Accept-Encoding Header” hoiatus on tools.pingdom.com‘is samuti väga sage.

Kui kasutaja teeb veebilehele päringu, saadab veebilehitseja HTTP-päringu serverile, kuhu on lisatud HTTP päringu päised (request headers).

Üheks oluliseks päiseks on “Accept-Encoding” päis, kus sisaldub info selle kohta, millist kodeeritud infot vastu võetakse.

Juhul kui oled saanud tools.pingdomiga “Specify a Vary: Accept-Encoding Header” hoiatuse, toimi Apache serveri puhul järgnevalt:

1. Kui Sul on veebilehe Yoast SEO plugin, mine Yoast SEO => Tools =>  File editor.  Kui pluginat pole, kasuta mõnda FTP programmi (nt FileZilla).
2. Lisa allolev koodijupp oma .htaccess faili.

<IfModule mod_headers.c>
  <FilesMatch "\.(js|css|xml|gz)$">
    Header append Vary: Accept-Encoding
  </FilesMatch>
</IfModule>

Antud veebilehe puhul olid probleemiks kolmanda osapoolte failid, mida ülalolev koodijupp ei muuda, kuna failid ei asu meie serveris, vaid kolmandate osapoole (nt Google) serveris.

Probleemi lahenduseks on jällegi nende failide hoidmine oma serveris. Ainult oma serveris hoitud failide sätteid saab muuta.

Kuna eelnevalt salvestasime kolmandate osapoolte failid oma serverisse “Leverage browser caching” probleemi lahendamiseks, siis tools.pingdom.com “Specify a Vary: Accept-Encoding Header” hoiatust enam esile ei too.

4. Remove query strings from static resources

“Remove query strings from static resources” hoiatus on järjekordne levinud probleem.

Kui Sinu veebilehel on plugin WP Rocket, on lahendus üsna lihtne. Toimi järgnevalt:

1. Mine WP Rocket => Settings =>Advanced Options.
2. Tee linnuke kasti “Remove query strings from static resources”.

Kui Sa ei kasuta WP Rocketi pluginat, võid kasutada pluginat Remove Query Strings From Static Resources (Speed Up My Website, Your WP Expert).

Nende tulemusena muutub failinimi stiil.css?ver=1.0 hoopis stiil-1.0.css‘iks.

Mis tulemuse andis veebilehe tehniline optimeerimine?

Tänu eelnevale tehnilise optimeerimisele oleme saavutanud skoori 98 punkti. Skoor on tõusnud algselt 76 punktilt 98 punktini.

Laadimiskiirus on kiirenenud 2.02 sekundilt 1.27 sekundini.

Probleeme tekitavad veel Facebooki ja Hotjari JavaScripti failid. Jätsin need failid oma serverisse tõstmata.

Skoor 100 punkti 100st

WP Rocketi blogis on välja toodud, et Google näeb üksnes veebilehe kiirust, st veebilehe allalaadimiseks kulunud aega, mitte veebilehe skoori. Kuigi skoor ja veebilehe kiirus on omavahel seotud, võib liigne püüe saavutada 100 punkti 100st muuta veebilehte hoopis aeglasemaks.

Kasutatud allikad

1. https://kinsta.com/knowledgebase/specify-a-cache-validator/
2. https://www.maxcdn.com/one/tutorial/specify-cache-validators/
3. https://kinsta.com/knowledgebase/specify-vary-accept-encoding-header/
4. https://blog.stackpath.com/accept-encoding-vary-important
5. https://www.keycdn.com/support/remove-query-strings-from-static-resources/
6. https://www.aykira.com.au/2014/04/importance-website-loading-speed-top-3-factors-limit-website-speed/
7. http://docs.wp-rocket.me/article/56-remove-query-string-on-static-resources
8. https://wp-rocket.me/blog/the-truth-about-google-pagespeed-insights/