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ł
Hope this helps and happy coding :)
Zobacz jeszcze
transition
płynne przejście jednej wartości css do drugiej. -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; parametry...