Pentru obținerea unui scor foarte bun Google Pagespeed printre altele trebuie să livrezi către browser cât mai puține fișiere statice, cât mai mici și cât mai repede.
Site-urile WordPress fiind sisteme construite din module adăugate temei și infrastructurii platformei de bază (WordPress) în mod obișnuit încarcă multe fișiere CSS și JavaScript care de regulă sunt inserate în partea de început a corpului răspunsului primit de la serverș mai exact în zona delimitată de eticheta <head></head>.
Există abordări care prin tehnici specifice unifică fișierele .css respectiv .js și le comprimă rezultând în final mai puține cereri și trafic client (browser) – server.
În plus, pentru afișarea cât mai rapidă a primului ecran, funcție de dispozitivul de afișare, se separă fișierul unic .css în două secțiuni
- critical css care se afișează inline în pagină pentru ca directivele CSS pentru primul ecran să a fie disponibile imediat (fără cerere separată căte server dacă ar fi fost păstrate într-un fișier .css)
- fișierul CSS combinat pentru restul ecranelor care este sub forma unui fișier .css (pentru a nu încărca prea mult fișierul .HTML al paginii) și care este apelat la finalul încărcării tuturor elementelor din pagină (nu vom avea nevoie de el în primul ecran, iar până când utilizatorul derulează spre al doilea ecran, elementele din ecranele următoare și fișierul .css care le stilizează se vor fi încărcat deja)
De observat că directivele critical css nu se vor regăsi în directivele fișierului css combinat pentru a nu încărca de două ori aceleași directive.
Pluginul WP SUPER CACHE, critical css și fișierul css combinat
Dacă pluginul de cache WP Supe Cache este utilizat în modul expert, vom avea pentru dezvoltatori disponibil hook-ul de filtrare wpsupercache_buffer care ne va permite manipularea conținutului paginii imediat înainte de salvarea pe server a cache-ului creat de cu ajutorul plugin-ului dedicat.
Cache-ul pe care îl menționăm este un fișier .html pregenerat păstrat pe server și livrat către client la apelul unei pagini. În acest mod, pagina nu mai este construită de fiecare dată încărcând infrastructura WordPress, preluând din baza de date conținuturile paginii, procesându-le și în final construind pagina HTML.
Așadar, imediat înainte de salvarea pe server a cache-ului pregenerat putem manipula conținutul acestuia în vederea inserării critical css în zona <head> a paginii, comentarea sau eliminarea tuturor referințelor la fișiere .css existente și inserarea link-ului către fișierul css combinat care ghidează browserul să îl încarce la finalul descărcării întregii pagini, cu toate elementele necesare (imagini, fișiere .js, etc).
Exemplu de optimizare a unui site pentru Google PageSpeed. Critical css
Am aplicat această tehnică pentru site-ul auraunirii.ro, un site de prezentare pentru Hotelul Aura Unirii din alba Iulia.
Obiectivul SEO a fost de obținere a unui scor Google PageSpeed pentru mobil de peste 95.
Am aplicat această abordare, utilizând în plus pluginul Autoptimize pentru unificarea și comprimarea fișierelor .css și .js. precum și pentru direcitva de încărcare întârziată (lb. en. lazy load) a imaginilor (începând cu a doua imagine din pagină).
Directivele critical css și fișierul css combinat le-am obținut pentru fiecare pagină din generatorul online gratuit SiteLocity.
Codul PHP utilizat a fost următorul
//functioneaza doar pentru nivel expert in configurarea pluginului wp super cache
add_filter('wpsupercache_buffer', 'wp_kama_wpsupercache_buffer_filter');
/**
* Manipulare conținut cache pagina inainte de salvare pe server
*
* @param [string] $buffer
* @return string
*/
function wp_kama_wpsupercache_buffer_filter($buffer)
{
//filtrez paginile pentru care am critical css
if (strpos($buffer, 'page-id-68') > 0) {
$critical_page_id = '68';
}
if (strpos($buffer, 'page-id-215') > 0) {
$critical_page_id = '215';
}
if (strpos($buffer, 'page-id-245') > 0) {
$critical_page_id = '245';
}
if (strpos($buffer, 'page-id-249') > 0) {
$critical_page_id = '249';
}
if (strpos($buffer, 'page-id-260') > 0) {
$critical_page_id = '260';
}
if (strpos($buffer, 'page-id-265') > 0) {
$critical_page_id = '265';
}
if (strpos($buffer, 'page-id-273') > 0) {
$critical_page_id = '273';
}
if (strpos($buffer, 'page-id-275') > 0) {
$critical_page_id = '275';
}
if (strpos($buffer, 'page-id-526') > 0) {
$critical_page_id = '526';
}
if (strpos($buffer, 'page-id-719') > 0) {
$critical_page_id = '719';
}
if (!isset($critical_page_id)) return $buffer;
/* comentariu html pentru toate linkurile care refera fisiere .css, - fisiere generate de autoptimize
*/
$pattern = [];
$pattern[] = '|<link([^>]*)rel="stylesheet"([^>]*)/?>|i';
$pattern[] = '|<link([^>]*)rel=\'stylesheet\'([^>]*)/?>|i';
$replacement = '<!--<link$1rel="stylesheet"$2>-->';
$buffer = preg_replace($pattern, $replacement, $buffer);
$more_optimisation = false;
// adaugare fisier combinat css
if (!$more_optimisation) {
$pattern = '/<body([^>]*)>/i';
$replacement = '<body$1><link rel=\'stylesheet\' id=\'css-2-hp\'
href=\'https://auraunirii.ro/wp-content/themes/neve-child-master/css/' . $critical_page_id .
'/auraunirii.ro_app_min.css?ver=2.1.5\' type=\'text/css\' media="all" />';
} else {
$pattern = '/<\/head>/i';
$replacement = '<link rel="preload" id=\'css-2-hp\'
href=\'https://auraunirii.ro/wp-content/themes/neve-child-master/css/' . $critical_page_id .
'/auraunirii.ro_app_min.css?ver=2.1.5\' as="style" onload="this.onload=null;this.rel=\'stylesheet\'" />
<noscript><link rel="stylesheet"
href="https://auraunirii.ro/wp-content/themes/neve-child-master/css/' . $critical_page_id .
'/auraunirii.ro_app_min.css?ver=2.1.5"></noscript></head>';
}
return preg_replace($pattern, $replacement, $buffer);
}Pentru obținerea unui fișier combinat în care nu se regăsesc directivele din critical css, trebuie utilizat un instrument automat cum este modulul npm Critical. În acest mod se reduce și mai mult încărcarea paginii.
Se poate urmări și o optimizare ulterioară în care critical css este încărcat specific pentru diferite lațimi de ecran (adică se folosește critical css diferit pentru fiecare lațime de ecranș de asemenea și css combinat ). Această optimizare aduce iarăși un aport semnificativ descărcării paginii și un scor Google PageSpeed foarte aproape de 100 mobil când se efectuează și celelate optimizări legate de imagini, layout-shift, etc
Dacă aveți proiecte similare pentru care poziționarea în rezultatele Google determină succesul afacerii voastre, vă așteptăm.
La Sector web țintim Google TOP 5!
Află detalii privind realizarea site-urilor pe WordPress
Creare site WordPress
Sau ia legatura cu noi aici
