Blog

Tối ưu Pagespeed

Posted on by quocmai

Kiểm tra Tối ưu tốc độ web check qua 1 và 2 & 3

1. https://web.dev/measure/

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

READ  Keyword Research: Nghiên cứu từ khóa

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>

READ  SEO là gì

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.

quocmai

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *