Vì sao Nam digital đổi theme?

Gần đây, tôi tập trung khá nhiều vào phần Optimize tốc độ Website theo chuẩn Google Core web vital. Lý do là bởi tôi cũng khá yêu thích những bí kíp tối ưu tốc độ, giúp website dễ dàng được truy cập nhanh chóng. Một phần vì muốn tạo ra một Website hoàn chỉnh, ít nhất là về mặt hiệu năng, để tha hồ sáng tạo nội dung.

Và sau quá trình tối ưu mệt nghỉ, tới từ việc thay đổi giao diện, Nam Digital đã đạt được kết quả tương đối ổn. Xin phép được chia sẻ tới bạn đọc

Chỉ số trên Nam Digital đạt được 100 điểm theo GT metrix tiêu chuẩn mới Core web Vital

Mình xin phép share chỉ số này trước, sau đó mới viết tiếp về bí quyết tăng tốc nhé.

Danh sách một số yếu tố xếp hạng

Theo chuẩn Web vital, website sẽ được đo lường qua một số chỉ số sau:

  • First Contentful Paint
  • Largest Contentful Paint
  • Speed Index

Hãy cùng Nam đi lướt qua từng cái một nhé

First Contentful Paint (FCP)

FCP là phần nội dung đầu tiên mà Google đọc được khi crawl websites của bạn.

Thường thì phần nội dung này sẽ bao gồm thanh menu, tiêu đề websites hoặc có thêr crawl một vài banner.

First Contentful Paint viết tắt FCP: thời gian đo lường khi người dùng nhìn thấy phản hồi bằng hình ảnh đầu tiên từ trang. Thời gian nhanh hơn có nhiều khả năng giữ người dùng tham gia.

thuthuatmkt.com

Ngoài ra, chỉ số này được đánh giá bởi Google theo 3 mức

  • Fast: Time FCP mobile< 1.6s & desktop < 1.0s
  • Average: Time FCP mobile <3.0s & desktop < 2.1s
  • Slow: Time FCP mobile > 3.0s & desktop > 2.1s

First Contentful Paint is triggered when any content is painted – i.e. something defined in the DOM (Document Object Model). This could be text, an image or canvas render.

Gtmetrix

Để tối ưu việc này, bạn cần lựa chọn những themes nhẹ nhàng, có DOM (Documents objects model) nhỏ. Cùng với đó, hãy chắc rằng load font từ máy tính để giảm request đến các trang, sử dụng các hình ảnh đầu tiên với dung lượng nhỏ.

Largest Contentful Paint (LCP)

The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport.

web.dev

Theo như định nghĩa của web.dev từ Google, chỉ số LCP cho biết thời gian render khối hình ảnh hoặc text lớn nhất trong một khung hình

Theo như những gì website này nói thì để tối ưu thành phần này, bạn chỉ cần lựa chọn các khối text, hình ảnh nhỏ, hạn chế sử dụng nền Banner nặng nề. Về mặt chuyên môn, bạn có thể xem tại đây để nắm được rõ hơn

Cách tối ưu WordPress để được điểm Pagespeed cao

Món này thì mình không muốn “múa rìu qua mắt thợ” nhưng quả thực, mình có đam mê với việc tối ưu hóa website đạt speed “siêu tốc”. Chính vì vậy, mình tìm kiếm rất nhiều tài nguyên trên mạng để giải quyết vấn đề này. Lưu ý là mình có bỏ qua vấn đề CDN hay các tips tối ưu thông thường vì các web khác đều trình bày rất tốt rồi. ^^!

Môi trường setup nguyenbahoangnam.com là vps sử dụng vultr 1GB đặt tại Singapore.

Bạn nào xem bài này mà mua qua Vultr thì có thể ủng hộ cho tinh thần Blogger của Nam nhé ^^!

1. Đừng sử dụng Page builder

Theo kinh nghiệm của Nam thì việc tối ưu Page builder đạt điểm cao là điểm rất khó. Mình cũng tìm kiếm rất nhiều case về việc tối ưu hóa 100 điểm đối với Elementor và kết quả luôn là: “Không tìm thấy”

Chính vì vậy bài học rút ra là ta không nên sử dụng Page builder. Thay vào đó, hãy sử dụng Gutenberg làm trình Page builder. Như vậy bạn vẫn đảm bảo website có nhận diện đẹp & tối ưu về mặt tốc độ.

Nếu bạn muốn có cái nhìn chính xác hơn, bạn có thể xem tại đây

2. Tự custom các trang archive, Loop post type

Đây là 1 việc không phải dễ dàng, bạn sẽ cần kiến thức về PHP, HTML cũng như thấu hiểu về các lệnh & hàm của WordPress để thực hiện xây dựng các trang custom kể trên. Ưu điểm lớn nhất của việc này là bạn có thể cải tiến tốc độ và không sử dụng Plugin tạo listing(tạo ra request thừa cho website), bạn cũng có thể dễ dàng lôi các trường trong post type ra.

Đây là 1 ví dụ về 1 vòng loop

        <div class="block-post-grid--post">
            <div class="block-post-grid--post-thumbnail" style="background-image: url('<?php the_post_thumbnail_url( 'large' ); ?>');">
            </div>
            <div class="block-post-grid--post-content">
                <h4><?php the_title(); ?></h4>  
                <p><?php the_excerpt(); ?></p>
                    <a href="<?php the_permalink() ?>" class="text-rieng" >
                        Xem thêm
                    </a>
  
            </div>

        </div>

Cùng phân tích 1 chút về ví dụ vòng loop này. phần div bao bên ngoài cho thấy phần tử html sẽ chứa toàn bộ từng khối bài viết phía trong. Tiếp đó là 1 khối có class post-thumbnail chứa hình ảnh featured image của bài viết. định dạng của hình ảnh chính là url featured image của từng bài với kích thước lớn.

Tiếp đó là khối div bao xung quanh nội dung & thông tin chi tiết

  • Thẻ h4 chỉ ra tiêu đề
  • Thẻ p chỉ ra excerpt (text preview của bài viết)
  • permalink cho thấy link liên kết tới bài viết

3. Sử dụng theme nhẹ

Một điều bạn cần lưu ý là hãy sử dụng những theme nhẹ nhàng nhất để làm web. Mình đặc biệt khuyên bạn nên sử dụng Astra, đây là theme lightweight với cấu trúc sạch sẽ & rất thông minh. Nếu bạn có chút đạn dược có thể thử Genesis framework. Cá nhân mình chưa dùng bao giờ nên không đánh giá được.

4. Thực hiện nén ảnh có chủ đích từ đầu

Phần mềm nén ảnh chỉ dành cho những người lười mà thôi. Hãy tự tay custom từng thành phần trong blog của bạn, tối ưu từng cái ảnh để đảm bảo size chuẩn nhất. Bạn cũng có thể định nghĩa từng đối tượng với width height xác định trước. Như vậy hình ảnh của bạn khi post lên cũng cần đảm bảo chính xác size số đó.

5. Hạn chế code của bên thứ 3 vào website bạn

Đây cũng là 1 quan điểm dễ gây tranh cãi, đơn giản vì nếu website của bạn không gắn các công cụ đo kiểm, xác định mục tiêu Analytics, Pixel hay Heatmap thì việc tracking hành vi khách hàng rất khó khăn.

Theo quan điểm của Nam, bạn chỉ nên gắn 2 đối tượng chính là Pixel & Gtag. Đối với họ nhà Google bạn cũng có thể dùng Plugin Sitekit để tích hợp đầy đủ các công cụ như GA, Google Optimize & vô vàn thẻ khác(Bản thân Pixel bạn cũng có thể gắn với Gtag nhé) \

6. Enqueue có chọn lọc những Script cần dùng hay không

Nếu bạn làm web WordPress với quan điểm Developer 1 chút thì bạn sẽ sử dụng các lệnh enqueue để WordPress nhận các external script hay các custom script bạn tự viết. Đối tượng cần enqueue cũng có thể là các style nữa.

Như vậy là từ khi mới làm web, bạn cần xác định rõ những script nào cần đưa vào dạng post type nào? Những script nào không cần thiết thì có thể tắt đi. Như vậy code của bạn lúc nào cũng nhẹ nhàng & cần thiết

Update ngày 6/12/2020 – Mình bị lỗi phần Largest Contentful Paint – Lý do là vì khối background màu cam hơi to & nặng.
ĐIểm pagespeed mobile mình hơi thấp 1 chút, chỉ được 78 thôi. Và chỉ số này có thể giảm xuống 65 ở 1 số trang có LCP cao(Ảnh to, hoành tráng)

About nguyenbahoangnam

Đam mê Digital Marketing, Web Development, Fitness & Healthy Diet đồng thời cũng là Fan cuồng của lối sống tối giản ^^!. Quyết tâm khai quật nghiệp "nhà văn"

Leave a Comment

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 *