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