Optimization

PageSpeed 3: Tư duy tinh gọn để tải trang nhanh hơn

Chào bà con, sau tuần bận rộn lại "được" cộng hưởng bởi dịch Covid19 nên việc không tên ở nhà tràn tới ồ ập, nay mới rảnh xíu tranh thủ ngồi "nấu" tiếp tập 03 cho bà con đây ăn đây.

Ai chưa đọc tập 02 có thể đọc lại tại đây nhé:

Giờ bắt đầu thôi!

MỤC TIÊU BÀI VIẾT

Nhắm vào việc tư duy tinh gọn.. tinh gọn.. và tinh gọn đến mức có thể để đạt hiệu quả cao nhất – ở đây là tốc độ tải trang. Qua những ví dụ, mô tả trong thực tế các bạn có thể thu thập được ý hay để dành áp dụng lại sau này

VẬY CẦN TINH GỌN CÁI GÌ?

Mình dùng từ "tư duy" trong bài là vì khó có thể kể hết các mục trong thực tế cần tinh gọn. Vậy nên mình sẽ trình bày bắt cách kể vài câu chuyện mình hay gặp, từ đó mọi người có thể rút ra được các ý quan trọng nhé.

1. Có nhất thiết phải cài cái này vào website không?

Mình có anh bạn không chuyên công nghệ nhưng cũng chịu khó tìm tòi và vọc vạch WordPress plugin dữ lắm. Sau thời gian dài vọc vạch hàng trăm plugins thì website của anh chậm.. lê lết luôn.

Anh thấy cái pop-up của bên A có nhiều tính năng hay cho trang bài viết, nhưng pop-up của bên B lại thiết kế đẹp hơn cho trang khuyến mãi thế là anh giữ cả hai.

Kế tiếp, anh thấy bên C có tính năng bình luận hay nhưng cũng cung cấp tính năng bổ sung cho Pop-up của bên B hay quá, anh lại cài vào để cho nó ngon hơn.

Cứ thế mà cài tới ngày tầm 20 cái plugins (dù không liên quan mục đích ban đầu) được cài rồi quên gỡ luôn. Trong thực tế anh chỉ xài 1 plugin B cho trang danh sách sản phẩm & chạy campaign đúng 2 tuần.

Ý chính:

  • Nếu bạn không còn sử dụng hoặc thấy ứng dụng đó không thực sự cần thiết thì nên gỡ hết đi hoặc.. đừng cài vào website mình.
  • Thêm tính năng vào là thêm việc phải suy nghĩ và dành công sức ra đánh giá xem nó có đáng không. Bỏ hết đi, dành thời gian lo việc thật sự quan trọng thôi.

2. Chọn và sử dụng ứng dụng cho tối ưu

Tiếp nối ví dụ trên, nếu lỡ thật sự cần rồi thì làm sao? Thì phải dành thời gian ra đánh giá thôi chứ sao giờ. Đừng hời hợt để rồi lãnh trái đắng nhé.
Mình có 3 gợi ý giúp anh bạn mình (dù không rành kĩ thuật) vẫn có thể đánh giá được ứng dụng của nhà cung cấp đó có đáng xài hay không.

Đặt chỉ tiêu, mức kì vọng cụ thể:

  • Cho ra con số thời gian tải trang cụ thể mà bạn có thể chấp nhận.
  • Kiểm tra tốc độ tải trang có giảm nhiều sau khi cài không?

Ví dụ:
- Mức chấp nhận được của anh bạn mình là tải trang dưới 5s.
- Trước khi cài đặt website tải mất 3s.
- Sau khi cài đặt website tải mất 4.5s (hoặc 3.5s) thì vẫn chấp nhận được.

Có thể dùng Google PageSpeed, GTMetrix, PingDom hoặc bằng.. mắt thường cũng được (mở Laptop rồi mở SmartPhone ra xem thử).

Ý chính:
Nếu không đặt ra mục tiêu từ đầu thì có thể bạn sẽ phải mất nhiều thời gian hơn để thử nghiệm vô ích.

✅ Chọn cái mình thực sự cần:

  • So sánh tính năng của tối thiểu 2 nhà phát triển khác nhau.
  • Chọn nhà cung cấp đáp ứng đủ tính năng và kì vọng ở trên.

Dĩ nhiên, nếu nhà cung cấp đó vừa có nhiều tính năng hay mà lại vừa tối ưu tốt nữa thì chọn luôn thôi.

⚒️ Thiết lập vừa đủ dùng

  • Kiểm tra ứng dụng cho thiết lập bật/tắt chi tiết không?
  • Kiểm tra xem mình cần tính năng đó ở nơi nào?
  • Hãy thiết lập cho nó chỉ chạy ở những nơi được chỉ định thôi.

Ví dụ:
- Ứng dụng Pop-up mình chỉ cần cho xuất hiện ở trang giới thiệu sản phẩm với điều kiện người dùng định rê chuột lên định tắt tab.
- Hãy thiết lập để mã ứng dụng chỉ kích hoạt ở đúng trang sản phẩm với sự kiện chuẩn bị tắt tab thôi.
- Lúc này tất cả các trang còn lại của website không phải tải thêm mã của ứng dụng nên vẫn không ảnh hưởng gì.
- Trang sản phẩm thì bạn cũng chỉ bắt một sự kiên và nội dung duy nhất, chứ không phải bắt thêm sự kiện và các nội dung không liên quan khác.

Ý chính:
Các ứng dụng thường cung cấp cho mình các thiết lập khá chi tiết, nếu chủ động tìm hiểu thêm xíu thì bạn sẽ tối ưu website mình tốt hơn rất nhiều.

3. Có giải pháp thay thế mà vẫn đáp ứng mục đích không?

Phần này hơi khó hiểu nếu chỉ nói chay, nên mình đưa ra một ví dụ về tính năng gắn liên kết tới Facebook Page (thường gặp) trên website của anh bạn mình:

Anh kiểm tra thì thấy website phải tải thêm 2 files từ Facebook tốn khoảng 115KB để có thể "vẽ" ra được cái ô như ảnh trên.
(Này là chưa kể các mã nhúng từ Messenger Chat, AutoAds, Tracking các kiểu..v.v…)

Mình hỏi lại mục đích ban đầu của anh thì biết anh chỉ cần:

  • Gắn liên kết Facebook Page lên website cho khách thấy.
  • Khách thấy bấm vào sẽ tự động mở tab mới địa chỉ Facebook Page.
  • Khách sẽ xem thông tin và tương tác trên đó (hoặc Like khi thấy hay)

Mình gợi ý vài giải pháp có thể sử dụng cho nhu cầu trên:

  • Gắn 1 ảnh nho nhỏ giả lập Facebook Page (có kèm liên kết) tầm 30KB.
  • Gắn 1 nút CTA "Theo dõi chúng tôi trên Facebook" (có kèm liên kết) tốn chưa tới 5KB.
  • Hoặc đơn giản là gõ ra câu có gắn liên kết về Facebook Page là xong.
  • … giải pháp gì nữa bạn tự nghĩ xem…

Bạn thấy đó, rõ ràng có nhiều giải pháp tinh gọn hơn để đáp ứng mục tiêu của bạn. Nhưng thường thì bạn sẽ.. "thấy người ta làm sao làm theo vậy".

Mục này còn nhiều ví dụ hay ho để thực hành, mình sẽ bổ sung thêm các bài viết dạng "Mẹo tối ưu tốc độ website trong thực tế" sau nhé.

TÚM Ý LẠI

Để không tự ra hậu quả website lê lết rồi tự mình khắc phục quá nhiều, hãy bắt đầu bằng tư duy tinh gọn. Để tinh gọn cần nắm các ý:

  1. Thật sự cần thì mới dùng, không thì bỏ qua luôn.
  2. Chọn ứng dụng bổ sung đáp ứng đủ nhu cầu
    - Đặt mục tiêu, kì vọng rõ ràng để không phải thử không có hồi kết.
    - Chọn ứng dụng có thứ mình thật sự cần (tính năng & tốc độ).
    - Xem có thiết lập nâng cao để tinh gọn nữa hay không.
  3. Luôn nhớ mục tiêu ban đầu cho từng tính năng
    - Để biết rằng luôn có giải pháp thay thế tốt hơn.
    - Không nhất thiết phải làm giống người ta.
    - Thực hành cách nghĩ này nhiều lần cho quen

Chúc anh em biết lúc nào cần "Hải, Quay xe.." và về đích sớm nhé!

Thao Le

Share
Published by
Thao Le

Recent Posts

AWS #3 – Kinh nghiệm triển khai EC2

Trong phần trước, mình đã chia sẻ với mọi người những khó khăn khi team…

3 years ago

Microservices #4: Làm việc đa môi trường và sự chờ đợi của Frontend

Xin chào, tiếp tục loạt bài về trải nghiệm của mình trong việc xây dựng…

3 years ago

Frontend Du Ký S2E3 | Cross-platform Apps (phần 3): Có công mài sắt, có ngày release

Cắm đầu cắm cổ dọn dẹp deadline và dọn nhà trước Tết nên ngâm bài…

3 years ago

Front-end Engineer (Reactjs, Nextjs, TypeScript, Svelte, TailwindCSS..)

Nếu bạn yêu thích phát triển sản phẩm với nhiều thử thách và cơ hội…

3 years ago

AWS #2 – Vấn đề và giải pháp

Trong phần 1, mình đã giải thích lý do tại sao EGANY chọn AWS làm…

3 years ago

AWS #1 – Sự lựa chọn của EGANY

Trong giới công nghệ hiện nay, Amazon Web Service không còn là một cái gì…

3 years ago