Powrót do Dev Notes

Optymalizacja Page Speed

widoczność tekstu podczas ładowania czcionek internetowych, w pliku .css dodajemy do definicji @font-face parametr font-display: swap

@font-face {
  font-display: swap;
}

usuniecie Block library style.min.css w pliku function.php

function remove_wp_block_library_css(){
  wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', 'remove_wp_block_library_css' );

 

Wykorzystanie pamięci podręcznej przeglądarki poprzez reguły w .htaccess, czas przechowywania zasobów statycznych w pamięci podręcznej powinien wynosić co najmniej tydzień:


<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresDefault A0
  ExpiresByType image/gif A29030400
  ExpiresByType image/jpeg A29030400
  ExpiresByType image/png A29030400
  ExpiresByType text/css A29030400
  ExpiresByType text/javascript A29030400
  ExpiresByType application/x-javascript A29030400
</IfModule>


<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/svg+xml "access 1 year"
ExpiresByType image/webp "access 1 year"
AddType image/x-icon .ico
ExpiresByType image/ico "access plus 1 year"
ExpiresByType image/icon "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType text/html "access plus 1 year"
ExpiresByType application/xhtml+xml "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType audio/ogg "access 1 year"
ExpiresByType video/mp4 "access 1 year"
ExpiresByType video/ogg "access 1 year"
ExpiresByType video/webm "access 1 year" 
 </IfModule>

Sprawdzenie czy kompresja jest możliwa: checkgzipcompression.com

Sprawdzenie kompresji strony: websiteplanet.com
Kompresja gzip poprzez .htaccess:


<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>


nagłówki Cache-Control

<FilesMatch "\.(jpg|jpeg|png|gif|js|css)$"> 
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>


lub kompresja skryptów php poprzez:

php_value output_handler ob_gzhandler

kiedy serwer nie obsługuje kompresji gzip tworzymy plik casche_gzip.php z kodem:

<?php

$file=$_GET['file'];

  if (!is_file($file.'.gz') or filemtime($file.'.gz') < filemtime($file)) {
    copy($file, 'compress.zlib://'.$file.'.gz');
  }
  if (!empty($_SERVER['HTTP_ACCEPT_ENCODING']) and strpos($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip') !== false) {
    header("cache-control: must-revalidate");
    if (strrchr($file, '.') == '.css') {
     header('Content-type:text/css');
    } elseif (strrchr($file, '.') == '.js') {
     header('Content-type:text/javascript');
    }
    header('Content-Encoding: gzip');
    header('Vary: Accept-Encoding');
    header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
    $expire = "expires: " . gmdate("D, d M Y H:i:s", time() + 2592000) . " GMT";
    header($expire);
    readfile($file.'.gz');
  } else {
    readfile($file);
  }
?>

i stosujemy w .htaccessie kod:

<IfModule mod_headers.c>
  <FilesMatch "(\.js\.gz|\.css\.gz)$">
    Header append Vary Accept-Encoding
  </FilesMatch>
  RewriteRule (.*).(js|css)$ cache_gzip.php?file=$1.$2 [L]
</IfModule>

 

 

kompresja plików różnych rodzajów:

<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>

ciekawy artykuł