/ css

100/100 w Page Insights. Czy idealny wynik jest możliwy ?

Google Page Insights to darmowe narzędzie od Google które wykonuje test prędkości i jakości strony internetowej.


Page Speed

Następnie podaje listę rekomendacji i wymagań aby przejść pozytywnie przez audyt. Aby osiągnąć całe 100 punktów trzeba spełnić następujące warunki.

  1. Nadaj priorytet widocznej treści
  2. Skróć czas odpowiedzi serwera
  3. Unikaj przekierowań stron docelowych
  4. Wyeliminuj blokujący renderowanie kod JavaScript i CSS z części strony widocznej na ekranie
  5. Wykorzystaj pamięć podręczną przeglądarki
  6. Włącz kompresję
  7. Zmniejsz CSS
  8. Zmniejsz HTML
  9. Zmniejsz JavaScript
  10. Zoptymalizuj obrazy

100/100

pageinsightsmobile

Jak widac osiągniecię poziomu 100/100 jest możliwe. Powyżej wynik ze strony https://spaceout.pl. Warto zaznaczyc że jeżeli chcecie używac systemów analitycznych takich jak Goggle Tag Manager, Google Anaytics albo Facebook Pixel, osiągnięcie wyniku 100 nie będzie możliwe ze wzgęldu na zewntęrznie ustawiony cache skrytpów GA, GTM, Pixel.

Nadaj priorytet widocznej treści

Tą czynośc każdy web designer powinnien robic juz na poziomie projektowania / kodowania strony. Aby uzyskac szybki rendering strony lądowania, musimy zadbac o to aby kod który ma się wyświetlac na ekranie nie byl zaslonięty żadnymi innymi elementami (np. ukryte modale, pop-upy). Jest to częśc podejścia Critical Rendering Path, którego opisze poniżej w części renderowanie kodu JavaScript i CSS.

Skróć czas odpowiedzi serwera

Jeżeli jestście na shared hostingu, wasze szanse naprawy lub skrócenia czasu odpowiedzi serwera jest mocno ograniczona. W waszych panelach administracyjnych serwera powinna byc jakaś forma kontroli wersji oraz modulów PHP, warto zadbac aby ta konfiguracja pasowala do waszego frameworka i byla jaj najnowsza.

Unikaj przekierowań stron docelowych

Jak sama nazwa wskazuje staramy się nie przekierowywac użytkownika jeżeli jest to możliwe, każdy redirect to dodtakowe akcje przeglądarki które opoźniają rendering.

Wyeliminuj blokujący renderowanie kod JavaScript i CSS z części strony widocznej na ekranie

Crtical Path Rendring, Critical CSS oraz async Javascript jest najtrudniejszym krokiem w osiągnięciu wyniku 100/100 w google page insights.

Crtical Path Rendring w samej naturze jest bardzo proste.
crm
Musimy dostarczyc przeglądarce niezbednych informacji aby mogla wyświetlic naszą sekcje startująca (header).

Crtical CSS i JS
CSS i JS potrzebny do wyświetlenia powyższego ekranu musi zostac zamieszczony inline tuż przed naglówkiem <body>.

Sposoby na uzysaknie krytycznej ścieżki CSS:

  1. Manualna; jeżeli opieramy się na włąsnym frameworku lub poprostu wiemy z jakich elementów, klas czy selectorów się składa nasza sekcja startowa.
  2. NPM module; critical css[1]
  3. Gulp Tasker lub Grunt Tasker
  4. Wordpress critical css plugins

Po uzyskaniu krytycznej ścieżki CSS robimy minifikacje css[2] i uglify JS [3]


<html lang="pl-PL">
  <head>
  <title>SpaceOut - Projektowanie Aplikacji Mobilnych
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
 ----- Tutaj ida wszystkie rzeczy meta ----
  
  -----Crtical CSS----
  
<style>body,html{font-size:100%;font-family:'Open Sans',sans-serif;background-color:#f4f8fb;width:100%;margin:0;overflow-x:hidden}img{max-width:100%;height:auto}.container:after{content:"";display:table;clear:both}.flexrow,.flexrow_menu,........
</style>
    
    -------Crtical Js -------
<script> .....
    script>
</head>
<body>
    
    

Każdy nie potrzebny kod do renderowania strony umieszczamy na samym końcu
strony tuż przed znaczynkiem </body>


  
  --- Koniec treści strony ---

--- Pozostale skrypty ----
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
<script src="/assets/js/global.js">

---Reszta CSS ---

<link rel="stylesheet" href="/assets/css/style.min.css">
</body>
</html>

Ważne jest użycie formy ladowania skryptu css poprzez <link rel="stylesheet" ... >

Jeżeli doświadczacie bradzo widocznego FAUC (Flash of unstyled content), to znaczy że albo brakuje wam odpowieniej krytycznej ścieżki CSS inline albo wasza obecna architektura DOM nie jest kompatybilna z metodą progresywnego renderingu.

Google Fonts
Kolejna przeszkoda to sciąganie dodatkowych fontów na stronę.
Z pomocą przychodzi asychroniczny skrypt / plugin Webfont[4]

Najproszciej jest umieścic poniższy skrypt na dole strony razem z innymi skryptami.


<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js">

<script>
WebFont.load({
google: {
families: ['Droid Sans', 'Droid Serif']
}
});
</script>

Możliwa jest też implementacja skryptu poprzez CDN lub NPM.[4:1]


Wykorzystaj pamięć podręczną przeglądarki

Google wymaga od nas ustawienia wysokej wartości Expiery Date na zasobach strony.
Najprościej jest ustawic te wartości poprzez plik .htaccess o ile operujemy na środowisku Apache / Nginx


<FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css|woff)$">
ExpiresActive On
ExpiresDefault A2592000
</FilesMatch>

lub 


:Location *.(ico|flv|jpg|jpeg|png|gif|js|css|woff|ttf)
Expires A2592000
:Location


A2592000 = 1 miesiąc (60 * 60 * 24 * 30 = 2592000).

udąstepniam gotowy plik .htaccess z powyższą optymalizacją plus dodatkowymi zasadami chroniącymi instalacje wordpress na githubie dla leniwych.

warto pamiętac że te zasady nie będą działać na żadne skrypty uruchamiane z innego serwera. (typu GA, GTM, Pixel)

Włącz kompresję

Aby przejść ten test musimy właczyć kompresje gzip na naszym serwerze.
Na polskich serwerach zazwyczaj jest opcja właczenia kompresji gzip z panelu administracyjnego serwera. Jednkaże jeżeli nie znajdziecie takiej funkcji warto spróbować umieścic poniższy kod w pliku .htaccess

Serwery Apache



<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 handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

lub 

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript



Serwery NGINX


gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
#Wyłącz na IE < 6 (bugged)
gzip_disable "MSIE [1-6].(?!.*SV1)";
ped files to IE6
gzip_vary on;

Zmniejsz CSS i JS

Google Page Inisghts wymaga aby pliki css i js były "zmniejszone" poprzez minifikacje, pozbawione spacji oraz innych niepotrzebnych elementów (takich jak komentarze). Jak zwykle z pomocą przychodzą na moduły NPM jednakże jest pare miejsc gdzie możemy zrobić to manulanie online.

  1. Pierwsze co według mnie powinno się zrobić to pozbyć się nie używanych zasad / reguł CSS. Moduł NPM | Gulp-Uncss | Online.

Jeżeli używamy takich frameworków jak Bootstrap albo fundation, jest duża szansa że nie wykorzystujemy nawet 50% wszystkich regul CSS. Nie potrzebne zasady wydlużaja sciągnie samego pliku css ale także czas rekalkulacji stylow przez przegladarkę.

2.Minifikacja CSS[2:1]

3.Minifikacja JS (uglifyJS)[3:1]

Optymalizacja Obrazów

Tym razem google proponuje nam "bezstratną" konwersje / zapisów plików graficznych aby przyspieszyć ładowanie strony. W rzeczywistości jakas strata jakości jest widoczna ale często gesto rozmiar plików spada o 70%.

Dla właścieli linuxa jpegtran i jpegoptim | OptiPNG i PNGOUT.

Windows i Linux libjpeg-turbo

NPM Optimizer

Wordpress plugins np. ShortPixel

Online TinyJPG / TinyPNG (20 plików na raz)
ShortPixel (50 plików na raz)

Zdjęcia lub grafiki powinny byc dodatkow przycięte do rozsądnych rozmiarów, gdzie możemy zastępujemy obrazy lub ikony na svg. Można także sprobowac przekonwertowac pliki jpg i png na webP


Wynik Końcowy

Osiągnięcie 100/100 dla niektórych stron może się okazac nie możliwe, wszytsko zależy od architektury instalacji, ich zależności od skryptów / bibliotek javascript. Patrząc na badania google którę mowią że średnio użytkownik czeka do 3 sekund na "pojawienie" się strony w internecie warto zadbac aby nasz czas ladowania strony byl jak najkrótszy.


spaceghost-1


  1. https://www.npmjs.com/package/critical-css ↩︎

  2. https://cssminifier.com/ ↩︎ ↩︎

  3. https://skalman.github.io/UglifyJS-online/ ↩︎ ↩︎

  4. https://github.com/typekit/webfontloader ↩︎ ↩︎