Các tối ưu khác part 1

Định để mỗi một mục tối ưu là một bài viết, cơ mà thấy mấy cái lặt vặt này có tí tẹo nên gộp nó thành một cho nhanh gọn.

Nén HTML

Xóa bỏ các khoảng trống thừa và các thẻ html, css, js không sử dụng. Giảm một chút kích thước tệp html chính.

Điểm Pagespeed

Trên thiết bị di động: 43/100 – Tăng 6 điểm

Trên máy tính để bàn: 82/100 – tăng 1 điểm

Nén và nối các tệp tin css js lại với nhau

Hành động này sẽ giúp giảm số http request và kích thước của trang xuống.

Sử dụng plugin WP Rocket Cache sẽ có tùy chọn như sau

Check qua Pagespeed một chút nào

Trên thiết bị di động: 46/100 – Tăng 3 điểm

Trên máy tính để bàn: 91/100 – tăng 9 điểm

Trì hoãn tải css, js + tạo css quan trọng

Ai cũng muốn giữ lại một chút riêng cho bản thân mình. Mình cũng vậy, xin phép chỉ hướng dẫn các bạn bật nó trong Rocket thôi, nếu thấy lỗi giao diện hãy tắt nó đi.

Check qua PageSpeed

Trên thiết bị di động: 58/100 – Tăng 12 điểm

Trên máy tính để bàn: 95/100 – tăng 4 điểm

Tận dụng bộ nhớ đệm trình duyệt

Trình duyệt lưu giữ các file tài nguyên của trang web trong bộ nhớ cục bộ của máy tính khi người dùng truy cập trang web. Phần này chúng ta sẽ tác động tói thời gian lưu lại của các file này trên máy tính người dùng.

Đối với trang web sử dụng server Apache, LiteSpeed

Tìm đến file .htaccess ở thư mục public_html thêm những thông tin sau

# START EXPIRES CACHING #
ExpiresActive On
ExpiresByType text/css "access 1 year"
ExpiresByType text/html "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/pdf "access 1 year"
ExpiresByType application/javascript "access 1 year"
ExpiresByType text/x-javascript "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 year"
ExpiresDefault "access 1 year"
# END EXPIRES CACHING #

Đối với trang web sử dụng server Nginx

Tìm đến tập tin vhost config thêm thông tin sau

location ~*  \.(jpg|jpeg|gif|png|svg|pdf|css|html|js|swf)$ {
    expires 365d;
}

Kiểm tra điểm Pagespeed

Phần này bỏ qua đi. Có tăng cũng chả thấm đâu, trình duyệt giờ khác xưa rồi. Tự động lưu lại rồi chả cần phải dạy lưu bao lâu nữa đâu.

Xử lý font chữ

Cũng chả làm gì được ngoài việc gom các font chữ thành một file (chỉ áp dụng khi bạn dùng Google Font thôi nhá)

Nếu bạn gặp trường hợp bị Pagespeed chuẩn đoán như này

Bạn có thể thử đến Web Font Loader . Ví dụ như để load font Droid Sans

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
  });
</script>

Kiểm tra điểm Pagespeed

Trên thiết bị di động: 59/100 – Tăng 1 điểm

Trên máy tính để bàn: 95/100 – như cũ

Gỡ WP Emoji, Embeds, Query string

Tìm trong đống tùy chọn của Rocket bạn sẽ thấy thôi.

Nếu bạn có bật tùy chọn này lên thì điểm trên pagespeed cũng tăng không đáng kể, mình mình phép bỏ qua phần này.

Hôm nay viết vậy thôi! Để ngày mai viết nốt phần tối ưu khác (part2).

Bài viết tiếp theo: Các tối ưu khác part 2