Jakub Szulgan

WordPress Developer

Programowanie to moja praca i pasja. Zawsze dążę do czystego kodu i perfekcji UX. Ten blog to moja baza wiedzy...
backup mojego mózgu ...
Opus Magnum.

Pomiary do tego testu były wykonywane w różnych porach dni na przestrzeni całego tygodnia za pomocą strony: developers.google.com.

Wybierz z listy co Ciebie interesuje:

  • Znacząco wpływa na Page Speed
  • Slider w nagłówku strony

    Do wyniku: + 12~15 

    Slider jest przestarzały i wpływa negatywnie na stronę ( wpisz w Google -> slider is bad for ux ).

    Dodatkowo Google Page Speed obniża wynik strony ze względu na slider.

    Polecam usunąć slider i zastąpić ten obszar tekstem z grafiką w tle lub gradientem.

  • Zmiana wersji PHP

    Do wyniku: + 8~10

    Testy zmiany wersji PHP z 7.4.16 na 8.0.3 wyszły pozytywnie.

    Jak zmienić wersję PHP?

    1. W panelu administracyjnym hostingu.
    2. Jeśli hosting na to pozwala to za pomocą htaccess. Poniżej przykład zmiany wersji PHP dla hostingu MyDevil.net.

    AddType application/x-httpd-php80 .php
  • Zdjęcia - optymalizacja

    Do wyniku: + 10~15 

    Optymalizacja zdjęć: tinypng.com

    Konwersja na format WEBP squoosh.app

    Przykład kodu poprawnego umieszczenia zdjęcia w tagu HTML picture z dostosowaną wielkością:

    <picture>
      <source srcset="img.webp" type="image/webp">
      <source srcset="img.jpg" type="image/jpeg"> 
      <img src="img.jpg">
    </picture>

    Lub wersja rozszerzona o równe wielkości ekranu:

    
    <picture>
    <source type="image/webp" media="(min-width: 1921px)" srcset="src/images/very-large/bike.webp">
    <source type="image/png" media="(min-width: 1921px)" srcset="src/images/very-large/bike.png">
    
    <source type="image/webp" media="(min-width: 1281px) and (max-width: 1920px)" srcset="src/images/regular/bike-regular.webp">
    <source type="image/png" media="(min-width: 1281px) and (max-width: 1920px)" srcset="src/images/regular/bike-regular.png">
    
    <source type="image/webp"
    media="(min-width: 461px) and (max-width: 1280px) and (orientation: landscape)"
    srcset="src/images/tablet-landscape/bike-tablet-landscape.webp">
    
    <source type="image/png"
    media="(min-width: 461px) and (max-width: 1280px) and (orientation: landscape)"
    srcset="src/images/tablet-landscape/bike-tablet-landscape.png">
    
    <source type="image/webp"
    media="(min-width: 461px) and (max-width: 1280px) and (orientation: portrait)"
    srcset="src/images/tablet-portrait/bike-tablet-portrait.webp">
    
    <source type="image/png"
    media="(min-width: 461px) and (max-width: 1280px) and (orientation: portrait)"
    srcset="src/images/tablet-portrait/bike-tablet-portrait.png">
    
    <source type="image/webp"
    media="(max-width: 460px)"
    srcset="src/images/mobile/bike-mobile.webp">
    
    <source type="image/png"
    media="(max-width: 460px)"
    srcset="src/images/mobile/bike-mobile.png">
    
    <img src="src/images/bike-2003909.png" style="width: 100%;">
    </picture>
    
  • Kompresja GZIP

    Do wyniku: + 6~10 

    Sprawdzamy, czy jest włączona kompresja za pomocą strony: gzip-test

    Jak uruchomić GZIP?

    1. Najpopularniejsza opcja to w panelu hostingu przy ustawieniach strony www.

    2. Za pomocą htaccess

    
    <IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/opentype
    # For Olders Browsers Which Can't Handle Compression
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    </IfModule>
    

    lub

    <ifModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_include handler ^cgi-script$
    </ifModule>
  • Średnio wpływa na Page Speed
  • Fonty

    Do wyniku: + 5~8 

    Warto ograniczyć ilość czcionek Google Fonts i pobierać je z CDN.

    Aby czcionka była poprawnie dodana – wygeneruj ją ponownie na stronie Google Fonts.

    Co się zmieni?

    • preconnect
    • crossorigin
    • swap

     

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
  • Lazy load

    Do wyniku: + 5~7

    Lazy loading (inaczej opóźnione ładowanie) – ładuje elementy dopiero wtedy, gdy znajdą się one na ekranie.

    Trzeba pamietać, aby nie dodawać Lazy load do obrazków, które są na górze strony www.

    WordPress – za pomocą wtyczki np. rocket-lazy-load

    <img src="image.jpg" alt="..." loading="lazy">

    Atrybut lazy świetnie działa też z iframe.

    <iframe src="https://codebook.pl" loading="lazy" width="600" height="400"></iframe>
  • Minifikacja HTML, CSS i JavaScript

    Do wyniku: 3~7

    Do WordPress plugin: autoptimize .

    Do kompresji HTML strona: compress html

    Do kompresji CSS strona: csscompressor.com

    Do kompresji JavaScript strona: jscompress.com

  • Mało wpływa na Page Speed
  • Cache plików

    Do wyniku: + 1~3 (granica błędu)

    Sprawdzenie, czy mamy włączoną pamięć podręczną: cache-checker.com

    Aby włączyć pamięć podręczną przeglądarki wprowadź poniższe reguły do pliku htaccess.

    # Cache header
    Header set Cache-Control "max-age=31536000, public"
    Header set Cache-Control "max-age=31536000, private"
    
    <IfModule mod_expires.c>
    ExpiresActive on
    ExpiresDefault "access plus 1 month"
    
    # CSS
    ExpiresByType text/css "access plus 1 year"
    
    # Data interchange
    ExpiresByType application/json "access plus 0 seconds"
    ExpiresByType application/xml "access plus 0 seconds"
    ExpiresByType text/xml "access plus 0 seconds"
    
    # Favicon (cannot be renamed!) and cursor images
    ExpiresByType image/x-icon "access plus 1 week"
    
    # HTML components (HTCs)
    ExpiresByType text/x-component "access plus 1 month"
    
    # HTML
    ExpiresByType text/html "access plus 0 seconds"
    
    # JavaScript
    ExpiresByType application/javascript "access plus 1 year"
    
    # Manifest files
    ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"
    ExpiresByType text/cache-manifest "access plus 0 seconds"
    
    # Media
    ExpiresByType audio/ogg "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType video/mp4 "access plus 1 month"
    ExpiresByType video/ogg "access plus 1 month"
    ExpiresByType video/webm "access plus 1 month"
    
    # Web feeds
    ExpiresByType application/atom+xml "access plus 1 hour"
    ExpiresByType application/rss+xml "access plus 1 hour"
    
    # Web fonts
    ExpiresByType application/font-woff "access plus 1 month"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
    ExpiresByType application/x-font-ttf "access plus 1 month"
    ExpiresByType font/opentype "access plus 1 month"
    ExpiresByType image/svg+xml "access plus 1 month"
    </IfModule>
    
    
  • Hosting

    Do wyniku: + 1~3 (granica błędu) 

    Testy nie wykazały żadnego związku między wynikiem Page Speed a firmą hostingową.

    Testowana była ta sama strona na hostingach: dhosting, MyDevil, atthost.pl , cyber_folks i hostido.

  • CSS - preload

    Do wyniku: + 1~3 (granica błędu) 

    Atrybut rel=”preload” odwołuje się do tego, w jaki sposób przeglądarka ma pobierać zasoby (wewnętrzne i zewnętrzne) potrzebne do wyświetlenia strony www.

    Wskazujemy przeglądarce, że te zasoby są niezbędne do poprawnego wyświetlenia żądanej strony, dlatego przeglądarka musi je pobrać na wczesnym etapie ładowania strony internetowej.

     

    <link type="text/css" rel="preload stylesheet" media="all" href="/css/style.css" as="style" crossorigin="anonymous" />
  • Defer & Async

    Do wyniku: + 2~4

    Dla kodu HTML/ PHP

    Defer – skrypty są wykonywane tylko wtedy, gdy przeglądarka zakończy analizowanie kodu HTML.

    defer="defer"

    Async – analizowanie i pobieranie skryptów odbywa się równolegle.

    async="async"

    WordPress – function.php – Defer

    function add_defer_attribute($tag, $handle) {
     // add script handles to the array below
     $scripts_to_defer = array('my-js-handle', 'another-handle');
     
     foreach($scripts_to_defer as $defer_script) {
     if ($defer_script === $handle) {
     return str_replace(' src', ' defer="defer" src', $tag);
     }
     }
     return $tag;
    }
    add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);

    WordPress – function.php – Async

    function add_async_attribute($tag, $handle) {
     // add script handles to the array below
     $scripts_to_async = array('my-js-handle', 'another-handle');
     
     foreach($scripts_to_async as $async_script) {
     if ($async_script === $handle) {
     return str_replace(' src', ' async="async" src', $tag);
     }
     }
     return $tag;
    }
    add_filter('script_loader_tag', 'add_async_attribute', 10, 2);

     

     

  • CSS - DNS prefetch

    Do wyniku: + 1~2

    Dns-prefetch – przeglądarka nawiązuje wstępne połączenie z zewnętrznym serwerem celem szybszego do nich dostępu na wypadek, gdyby potrzebowała ich w przyszłości.

    Przykład użycia:

    <link rel="dns-prefetch" href="https://fonts.googleapis.com/" >
  • Nie sprawdzone
  • HTTP/2

    Do wyniku: ? (niezbadane) 

    Sprawdzanie protokołu za pomocą narzędzia http2-test.

    Jeśli wykryty jest na stronie HTTP/1.1 należy skontaktować się z hostingiem.

  • Critical CSS

    Do wyniku: ? (niezbadane) 

    Zbyt duża ingerencja w kod i zachowanie strony. Jedynym rozwiązaniem jest przy tworzeniu nowej strony wydobyć krytyczny CSS do head strony w formie zminimalizowanej.