Kiểm tra Tối ưu tốc độ web check qua 1 và 2 & 3
Note: Đảm bảo Cumulative Layout Shift < 0.1
2. https://developers.google.com/speed/pagespeed/insights/
3. Tạo tài khoản và chọn nước cần kiểm tra https://gtmetrix.com/
Đảm bảo chỉ số ở gtmetrix 90/90
Bài viết liên quan:
PageSpeed Score > 90
YSlow Score > 90
Các bước cài Imagick:
yum install php-pear php-devel gcc
yum install ImageMagick ImageMagick-devel
pecl install imagick
echo extension=imagick.so >> /etc/php.ini
Restart lại nginx:
service php-fpm restart
service nginx restart
Nâng cấp PHP
yum install yum-utils
Centos 6
rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
Centos 7
rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
Kích hoạt remi repository cho phiên bản php 7.4 bằng lệnh sau:
yum-config-manager –enable remi-php74
yum-config-manager –disable remi-php71
Thay 71 bằng phiên bản php hiện tại
yum repolist all
yum update
Check lại bằng lệnh php -v
Những cái không thể sửa
Remove unused Javascript/CSS và các Javascript ở ngoài
Cách sửa và tối ưu từng thông báo
Tối ưu hình ảnh
dùng tay: https://image.lar.vn/
quocmaivan.uit@gmail.com
Password: hacker10
Dùng Plugin: Imagify
Properly size images
Sử dụng Plugin Imagify hoặc Regenerate Thumbnails để resize lại ảnh đại diện
Defer offscreen images
Sử dụng Lazy Load Image từ WP Rocket hoặc Sử dụng Từ theme/WordPress 5.5
Minify CSS
Nén CSS online: https://csscompressor.net/vi/
Nén CSS bằng plugin: WP Rocket, Autoptimize, Litespeed
Xoá Block Library CSS
//* Disable Gutenberg stylesheet in front
function wps_deregister_styles() {
wp_dequeue_style( ‘wp-block-library’ );
wp_dequeue_style( ‘wp-block-library-theme’ );
}
add_action( ‘wp_print_styles’, ‘wps_deregister_styles’, 100 );
Minify JavaScript
Nén JS bằng plugin: WP Rocket, Autoptimize, Litespeed
Remove unused CSS
Sử dụng https://purifycss.online/
Note:
Backup/Copy các file CSS hiện tại trước khi làm
Khi sử dụng bật ẩn danh hoặc thoát tài khoản admin
Tắt Các plugin nén như Autoptimize/Wp Rocket
Efficiently encode images & Serve images in next-gen formats
Sử dụng định dạng ảnh .jpg, jpeg nén trước qua Image.lar.vn hoặc tinypng.com khi upload lên website.
Enable text compression
Bật nén Gzip server/ File .htcaccess hoặc dùng Plugin Wp Rocket/Litespeed
Dạng chèn vào .htaccess
Mã Server 1:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A0
<FilesMatch “\.(txt|xml|js)$”>
ExpiresDefault A31536000
</FilesMatch>
<FilesMatch “\.(css)$”>
ExpiresDefault A31536000
</FilesMatch>
<FilesMatch “\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac|eot|ttf|otf|woff|woff2|svg)$”>
ExpiresDefault A31536000
</FilesMatch>
<FilesMatch “\.(jpg|jpeg|png|gif|swf|webp)$”>
ExpiresDefault A31536000
</FilesMatch>
</IfModule>
<IfModule mod_headers.c>
<FilesMatch “\.(txt|xml|js)$”>
Header set Cache-Control “max-age=31536000”
</FilesMatch>
<FilesMatch “\.(css)$”>
Header set Cache-Control “max-age=31536000”
</FilesMatch>
<FilesMatch “\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac|eot|ttf|otf|woff|woff2|svg)$”>
Header set Cache-Control “max-age=31536000”
</FilesMatch>
<FilesMatch “\.(jpg|jpeg|png|gif|swf|webp)$”>
Header set Cache-Control “max-age=31536000”
</FilesMatch>
</IfModule>
Mã server 2:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
</IfModule>
<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>
<IfModule mod_headers.c>
<FilesMatch “.(jpg|jpeg|png|gif|swf|JPG)$”>
Header set Cache-Control “max-age=31536000, public”
</FilesMatch>
<FilesMatch “.(css|js)$”>
Header set Cache-Control “max-age=31536000, private”
</FilesMatch>
</IfModule>
Preconnect to required origins
Sử dụng DNS prefetch của Litespeed/ WP Rocket
Initial server response time was short
Tối ưu lại server hoặc nâng hosting
Avoid multiple page redirects
Chỉ sử dụng 1 phiên bản của website non www hoặc www.
Preload key requests
<link rel=”preload” href=”https://www.202hamburger.com/wp-content/themes/voice/fonts/RobotoSlab.ttf” as=”font” type=”font/ttf” crossorigin>
Thay link bị lỗi trong href=”link” chèn vào trong <head></head> của theme.
Use video formats for animated content
Hạn chế sử dụng ảnh gif. Thay bằng video sử dụng lazy iframe
Avoids enormous network payloads
Updating
Uses efficient cache policy on static assets
Sử dụng như Enable text compression
Avoids an excessive DOM size
Updating
Eliminate render-blocking resources
Cách 1
Tạo Critical Path CSS online https://pegasaas.com/critical-path-css-generator/ hoặc dùng Plugin WP Rocket.
Sau đó preload css hiện tại.
Cách 2: Chuyển bớt CSS/JS xuống dưới footer.
JavaScript execution time
Updating
Minimizes main-thread work
Updating
All text remains visible during webfont loads
Tìm đến file css chứa font chữ đó
thêm dòng: font-display: block;
Để fix lỗi này.