Sharecs.net
  • Trang chủ
  • Kho Tài Liệu – Báo Cáo
  • Thủ Thuật
    • Thủ thuật máy tính
      • Windows
      • MacOS
      • Linux
    • Thủ thuật internet
    • Thủ thuật phần mềm
  • Lỗi máy tính
    • Lỗi internet
    • Lỗi windows
    • Lỗi phần mềm
  • Lập Trình
    • Lập Trình Java
    • Lập trình Python
    • Lập Trình React Native
    • Code Hay
  • Linh Tinh
    • PhotoShop
    • Tải Video Wallpaper
    • Kho Tools
      • Cân Bằng Phương Trình Hóa Học
      • Custom Css Scrollbar – Render Code
      • Tạo Kí Tự Đặc Biệt Online
      • Tạo Deep Link
    • Tài Liệu – Luận Văn – Báo Cáo
    • Kho Theme Website WordPress
    • Phần Mềm
No Result
View All Result
  • Trang chủ
  • Kho Tài Liệu – Báo Cáo
  • Thủ Thuật
    • Thủ thuật máy tính
      • Windows
      • MacOS
      • Linux
    • Thủ thuật internet
    • Thủ thuật phần mềm
  • Lỗi máy tính
    • Lỗi internet
    • Lỗi windows
    • Lỗi phần mềm
  • Lập Trình
    • Lập Trình Java
    • Lập trình Python
    • Lập Trình React Native
    • Code Hay
  • Linh Tinh
    • PhotoShop
    • Tải Video Wallpaper
    • Kho Tools
      • Cân Bằng Phương Trình Hóa Học
      • Custom Css Scrollbar – Render Code
      • Tạo Kí Tự Đặc Biệt Online
      • Tạo Deep Link
    • Tài Liệu – Luận Văn – Báo Cáo
    • Kho Theme Website WordPress
    • Phần Mềm
No Result
View All Result
Sharecs.net
No Result
View All Result
Home Thủ Thuật Thủ thuật internet

Cách Tối Ưu Website – Tăng Tốc Độ Load Trang Web WordPress

by Nguyễn Tuấn
20/12/2021

Ở bài này mình muốn hướng dẫn các bạn cách tối ưu website của mình. Để có thể tăng tốc độ load trang web, một website chậm rất dễ mất người dùng. Nhưng trước tiên để có thể tối ưu website thì các bạn cần hiểu rõ về web của mình và nắm toàn quyền quản trị của website kể cả hosting hay vps.

Mục Lục

  • Phân Tích Website
    • PageSpeed Insights
    • Lighthouse
  • Cách Tăng Tốc Độ Load Trang Web
    • Tối Ưu Hình Ảnh
    • Giảm JavaScript Không Dùng Đến
    • Loại bỏ CSS thừa
    • Đảm bảo văn bản vẫn hiển thị trong khi tải phông chữ web
    • Giảm mức ảnh hưởng của mã bên thứ ba
    • Một số cách tối khác với WP Rocket

Phân Tích Website

Bước này sẽ giúp chúng ta biết rõ hơn về việc những cái gì làm ảnh hưởng đến tốc độ load trang web. Vậy phân tích website như thế nào? Có nhiều tool và cách khác nhau nhưng mình có 2 cách hay sử dụng chủ yếu:

PageSpeed Insights

PageSpeed Insights là đứa con của google và cũng giúp google đánh giá về chất lượng website. Để kiểm tra thì chúng ta nhập website của mình vào và chọn phân tích.

PageSpeed Insights Tối ưu tốc website
PageSpeed Insights

Sau khi phân tích xong hệ thống sẽ đưa lại cho chúng ta kết quả chi tiết về website trên điện thoại và trên máy tính.

Hiệu suất tăng tốc độ load trang web
Hiệu suất tốc độ website

Từ những kết quả google phân tích sẽ đưa chúng ta thấy điểm tối ưu website. Thì thường sẽ có 2 trường phái là người thích điểm hiệu suất cao, người thích tăng tốc độ load trang web nhanh nhưng điểm thế nào cũng được không quá thấp là được.

Phân tích tối ưu website
Phân tích website

Mình sẽ dựa vào những thông số bên trên, những gợi ý mà sẽ thực hiện fix từng cái một. Bên cạnh đó mình cũng áp dụng một cách đơn giản nữa để phân tích website.

Lighthouse

Để thực hiện các bạn vào trang web cần kiểm tra ➪ nhấn chuột phải ➪ chọn kiểm tra ➪ chọn tab Lighthouse.

Để phân tích website trên PC hay Moblie thì tại Device ➪ chọn Desktop hoặc Mobile ➪ nhấn Generate report.

Cách tăng tốc độ tải trang web
Phân tích tăng tốc độ tải trang web

Bên dưới Lighthouse cũng phân tích giúp chúng ta những thứ chưa được nên cần tối ưu cho từng mục để đạt được điểm cũng như tốc độ loading trang web cao hơn. Sau khi mình phân tích nguyên nhân xong thì mình bắt tay vào tối ưu thôi.

Cách Tăng Tốc Độ Load Trang Web

Tối Ưu Hình Ảnh

Nhưng cái đơn giản nhất thì rất nhiều bạn lại thường hay quên, hoặc không chú ý tới. Về việc tối ưu ảnh nếu các bạn có điều kiện thì dùng các plugin tối ưu ảnh trả phí thì oke hơn. Còn mình cứ chơi tay thôi.

Bước 1: Ảnh thu nhỏ cho bài viết, các bạn nên thống nhất một kích thước cho các bài viết. Các bạn xem các mạng xã hội họ dùng các kích thước thu nhỏ nào từ đó phân tích ra 1 kích thước mà mình cảm thấy ưng ý.

Bước 2: Nếu các bạn dùng PhotoShop các bạn nhấn Ctrl + Shift + Alt + W tại cửa sổ lưu file ảnh các bạn chọn Format PNG ➪ chọn Smaller File (8 bit). Ảnh png này là ảnh thu nhỏ của bài viết. Vì sao lại dùng png đơn giản là facebook và một số mxh họ chưa dùng các định dạng ảnh tối ưu như webp. Còn .jpg tối ưu quá thì làm ảnh nhòe không đẹp.

Bước 3: Các ảnh trong bài viết thì các bạn có thể làm y hệt như bước 2 + thêm vào trang này https://convertio.co chuyển đổi ảnh PNG 8 bit ➪ định dạng Webp. Ngại thì vào trang trên chuyển thẳng cũng được.

Hoặc các bạn có thể upload lên Blogger xong lấy link ảnh vào bài viết của mình, vừa tiết kiệm được dung lượng và đỡ phải tối ưu nhiều. Nhược điểm là ảnh đó SEO sẽ không có tác dụng cho web của bạn.

Giảm JavaScript Không Dùng Đến

Mình có các cách sau đây các bạn áp dụng từng cái với website của mình xem cái nào đạt hiểu quả nhất, hoặc combo kết hợp cái nào ngon thì áp dụng. Vì không phải cứ cái này mới ngon, nó còn tùy vào website bạn như thế nào nữa.

Cách 1: Dùng code tay các bạn vào hosting của mình và thêm đoạn này vào file functions.php của theme nhược điểm cách này là mỗi khi theme update thì thường bị mất và phải thêm lại. Nếu có child theme thì các bạn thêm vào nó sẽ không bị mất hay thay đổi khi update.

//* Move JavaScript to the Footer */

function remove_head_scripts() { 
  remove_action('wp_head', 'wp_print_scripts'); 
  remove_action('wp_head', 'wp_print_head_scripts', 9); 
  remove_action('wp_head', 'wp_enqueue_scripts', 1);

  add_action('wp_footer', 'wp_print_scripts', 5);
  add_action('wp_footer', 'wp_enqueue_scripts', 5);
  add_action('wp_footer', 'wp_print_head_scripts', 5); 
} 
add_action( 'wp_enqueue_scripts', 'remove_head_scripts' );

Khi các bạn chuyển hết JavaScript xuống dưới thì đồng nghĩa khi load trang đầu tiên JavaScript sẽ không được load ngay mà phải đợi tất cả loading xong điều này cũng Loại bỏ các tài nguyên chặn hiển thị mà JavaScript gây ra.

Cách 2: Là mình dùng plugin mình dùng WP Rocket đơn giản là ngon. Nhiều bạn cũng dùng nhưng không ăn thua, đơn giản là các bạn setup chưa đúng, chưa biết cách setup thôi.

Tại mục Tối ưu hóa tệp ➪ Tệp JavaScript, mình thường bật những mục này và kết hợp cả code bên trên.

Giảm JavaScript Không Dùng Đến
Giảm JavaScript Không Dùng Đến

Tại các mục Tệp JavaScript loại trừ mình để rỗng. Bình thường sẽ có mặc định các bạn nên thử xóa hết nó đi, test từng cái một xem cái nào hợp với mình. Dùng PageSpeed Insights kiểm tra lại. Và kiểm tra web có bị làm sao không?

Loại bỏ CSS thừa

Cách 1: Code tay các bạn thêm vào file functions.php của theme.

/**
 * Loại bỏ tài nguyên chặn hiển thị CSS
 */
 function add_rel_preload($html, $handle, $href, $media) {
    
    if (is_admin())
        return $html;

     $html = <<<EOT
<link rel='preload' as='style' onload="this.onload=null;this.rel='stylesheet'" id='$handle' href='$href' type='text/css' media='all' />
EOT;
    return $html;
}
add_filter( 'style_loader_tag', 'add_rel_preload', 10, 4 );

Cách 2: Mình lại dùng plugin WP Rocket. Plugin cũng có chức năng xóa CSS và tải CSS không đồng bộ nhưng mình thấy vẫn đang ở bản beta nên chưa muốn dùng. Đợi sau ổn mình test thử cho các bạn.

tối ưu website - Giảm CSS không dùng đến
Giảm CSS không dùng đến
Đảm bảo văn bản vẫn hiển thị trong khi tải phông chữ web

Mình sẽ lấy link font chữa bị ảnh hưởng sau đó thêm vào mục Reload ➪ Preload Fonts

tải trước font chữ cho website
tải trước font chữ cho website
Giảm mức ảnh hưởng của mã bên thứ ba

Cụ thể là gì? Nó là các mã javascript của youtube, facebook, messenger, tawk to… các mã js này mình thêm vào cuối footer. Tối ưu những thứ dùng cần thiết.

Một số cách tối khác với WP Rocket
  • Bật CACHE cho thiết bị di động
  • Bật Tải trước (Preload) ➪ Theo SiteMap, khi hover vào link (Preload Links)
  • Dọn dẹp tối ưu hóa cơ sở dữ liệu thường xuyên
  • Cập nhật các Plugin, theme liên tục

Bên cạnh đó chúng ta cũng phải xét đến theme và hosting, tùy vào mức độ sử dụng bạn phải chọn ra cấu hình hosting sao cho phù hợp, cao quá thì lãng phí mà thấp quá không tốt. Và các bạn phải xác định người dùng của mình đến từ đâu, nếu là trong nước thì nên dùng các nhà cung cấp trong nước và ngược lại.

Hosting bạn có thể tham khảo tại đây: Top 5 Hosting Giá Rẻ – Tốc Độ Cao – Tốt Nhất ( Có Mã Giảm Giá )

Theme thì nên chọn những cái nào code chuẩn tối ưu cho seo.

Vậy là trên đây mình đã giới thiệu các bạn những cách tối ưu website làm tăng tốc độ load trang web. Nếu bạn có những thắc mắc hay chia sẻ gì thì để lại bình luận cho mình biết nha. Và bạn nào cần plugin WP Rocket thì liên hệ tới mình.

Cảm ơn các bạn đã ghé thăm. Chúc các bạn thành công!

2.7/5 - (3 bình chọn)
Tags: tối ưu website
ShareSendTweetShare

Cùng chuyên mục

No Content Available
Load More
Subscribe
Notify of
guest

guest

0 Comments
Inline Feedbacks
View all comments

Tài nguyên

Cân bằng phương trình phản ứng hóa

Tạo deep link

Custom Css Scrollbar – Render Code

Bài Viết Nổi Bật

  • Bài Tập Code Python Đơn Giản Có Lời Giải – Phần 1

    Bài Tập Code Python Đơn Giản Có Lời Giải – Phần 1

    1 shares
    Share 0 Tweet 0
  • Download Video Wallpaper Agatsuma Zenitsu – Anime Kimetsu No Yaiba

    45 shares
    Share 0 Tweet 0
  • Hướng Dẫn React Native Build apk File

    0 shares
    Share 0 Tweet 0
  • 500 Câu Trắc Nghiệm Mạng Máy Tính Phần 1 Có Đáp Án

    0 shares
    Share 0 Tweet 0
  • 500 Câu Trắc Nghiệm Mạng Máy Tính Phần 2 Có Đáp Án

    0 shares
    Share 0 Tweet 0
  • Trending
  • Comments
  • Latest
Download Video Wallpaper Agatsuma Zenitsu – Anime Kimetsu No Yaiba

Download Video Wallpaper Agatsuma Zenitsu – Anime Kimetsu No Yaiba

19/02/2023
Bài Tập Code Python Đơn Giản Có Lời Giải – Phần 1

Bài Tập Code Python Đơn Giản Có Lời Giải – Phần 1

31/08/2020
500 Câu Trắc Nghiệm Mạng Máy Tính Phần 1 Có Đáp Án

500 Câu Trắc Nghiệm Mạng Máy Tính Phần 1 Có Đáp Án

23/08/2021
Hướng dẫn cài đặt React Native trên Windows – Phần 1

Hướng Dẫn React Native Build apk File

14/11/2020
Thư viện đồ họa trong Python – Source Code Bắn Pháo Hoa

Thư viện đồ họa trong Python – Source Code Bắn Pháo Hoa

18/03/2023
Chia sẻ quá trình để xây dựng 1 group Facebook cho newbie

Chia sẻ quá trình để xây dựng 1 group Facebook cho newbie

18/03/2023
Tính tổng – Two Sum Leetcode

Tính tổng – Two Sum Leetcode

14/03/2023
So sánh If Else và Switch Case

So sánh If Else và Switch Case

21/02/2023

Phản hồi gần đây

  • luan trong Thư viện đồ họa trong Python – Vẽ doraemon
  • tuan trong Nhận Diện Chó Mèo Python – Tensorflow – Neural Network – Deep Learning
  • Lê Thị Vân trong Fake Giấy Tờ Xác Minh Doanh Nghiệp Trên Facebook
  • Crom trong Cách Kích Hoạt Key Win 11 Bản Quyền –Active Win 11 – Win 10 Free

Donate

Mời Share’cs ly Cafe 

Liên hệ quảng cáo

Email: Sharecs.net@gmail.com

Hợp tác nội dung: Sharecs rất vinh dự được mời các bạn đóng góp những sản phẩm thiết kế, thủ thuật hay những chia sẻ hữu ích… để cùng chia sẻ rộng rãi tới mọi người!

Giới Thiệu

Sharecs.net là một website/blog cá nhân, chuyên chia sẻ những kiến thức xoay quanh công nghệ như máy tính, internet, phần mềm, lập trình,... Mình hi vọng, Sharecs sẽ mang lại những kiến thức mà bạn chưa từng được học trên ghế nhà trường!

  • Giới Thiệu & Liên Hệ
  • Chính Sách Bảo Mật

CopyRight By Sharecs.net DMCA.com Protection Status

No Result
View All Result
  • Trang chủ
  • Kho Tài Liệu – Báo Cáo
  • Thủ Thuật
    • Thủ thuật máy tính
      • Windows
      • MacOS
      • Linux
    • Thủ thuật internet
    • Thủ thuật phần mềm
  • Lỗi máy tính
    • Lỗi internet
    • Lỗi windows
    • Lỗi phần mềm
  • Lập Trình
    • Lập Trình Java
    • Lập trình Python
    • Lập Trình React Native
    • Code Hay
  • Linh Tinh
    • PhotoShop
    • Tải Video Wallpaper
    • Kho Tools
      • Cân Bằng Phương Trình Hóa Học
      • Custom Css Scrollbar – Render Code
      • Tạo Kí Tự Đặc Biệt Online
      • Tạo Deep Link
    • Tài Liệu – Luận Văn – Báo Cáo
    • Kho Theme Website WordPress
    • Phần Mềm

CopyRight By Sharecs.net DMCA.com Protection Status