Thiết kế web chú ý đến 14 mẹo này để có Google Page Speed tốt nhất

1 thiết kế web hiệu quả thì tất cả mọi thứ đều dựa vào tốc độ. Không quan trọng bạn có trang web phức tạp và đẹp mắt nhất nếu nó mất thời gian mãi mới tải xong. Có nhiều lý do khiến trang web của bạn tải chậm, nhưng bất kể nguyên nhân là gì, hôm nay tôi, Gemiv, sẽ hướng dẫn bạn một số mẹo và kỹ thuật hữu ích để cải thiện hiệu suất và tốc độ trang web của bạn, đồng thời đảm bảo trải nghiệm người dùng mượt mà.

Nhưng trước hết, cần phải hiểu rõ một số điều.

Tại Sao Tốc Độ Trang Là Quan Trọng

Nghiên cứu cho thấy thời gian mà người dùng chờ đợi trước khi mất tập trung dao động từ 0.3 đến 3 giây. Nếu trang web của bạn mất thời gian hơn để hiển thị thông tin quan trọng, người dùng sẽ mất tập trung và có thể đóng cửa sổ trình duyệt.

Các trang web nhanh hơn sẽ có tỷ lệ thoát thấp, tỷ lệ chuyển đổi cao, xếp hạng cao trong tìm kiếm tự nhiên và, tất nhiên, trải nghiệm người dùng tổng thể tốt hơn.

Điều quan trọng là những trang web chậm sẽ tốn bạn tiền và ảnh hưởng đến thương hiệu của bạn. Ngược lại, làm cho trang web tải nhanh hơn sẽ tác động tích cực đến lưu lượng, giữ chân người dùng và doanh số bán hàng.

Yếu Tố Ảnh Hưởng Đến Tốc Độ Trang

Có nhiều lý do khiến thời gian tải trang của bạn chậm. Có thể là bất cứ điều gì, nhưng các yếu tố phổ biến bao gồm:

• Sử dụng CSS và JavaScript quá nặng
• Kế hoạch máy chủ/địa chỉ lưu trữ kém
• Kích thước hình ảnh lớn
• Không sử dụng bộ nhớ cache trình duyệt
• Quá nhiều tiện ích và plugin
• Liên kết hình ảnh và nguồn tài nguyên khác từ máy chủ chậm
• Lưu lượng truy cập trang web cao
• Trình duyệt cũ
• Kết nối mạng chậm (thiết bị di động)

Điều này có nghĩa là có một loạt các bước bạn có thể thực hiện để tăng cường tốc độ trang, như tôi sẽ giải thích chi tiết sau trong bài viết. Nhưng trước khi bắt đầu giải quyết để cải thiện hiệu suất trang web, bạn cần kiểm tra thời gian tải trang của mình.

Để biết thêm về tốc độ trang, bạn có thể đọc thêm trong bài viết trên blog của chúng tôi về các chỉ số quan trọng về hiệu suất trang web có thể giúp tối ưu hóa trang web và cải thiện trải nghiệm người dùng.

Tốc độ lý tưởng khi thiết kế web bao nhiêu là tốt ?

Nghiên cứu cho thấy thời gian mà người dùng chờ đợi trước khi mất tập trung dao động từ 0.3 đến 3 giây. Điều này có nghĩa là bạn nên mục tiêu hiển thị một số nội dung cho người dùng trong vòng dưới 3 giây.

Nếu chúng ta giả sử rằng bạn đã quyết định sử dụng các chỉ số Core Web Vitals như đã đề cập trước đó, thì đây là ngưỡng khuyến nghị mà bạn nên mục tiêu đến:

Bạn có thể đọc thêm về các tiêu chí mà Google đã sử dụng để đưa ra các ngưỡng này tại đây.

Lưu ý rằng khi đo thời gian tải trang, việc tốt nhất là cố gắng có được nhiều dữ liệu nhất có thể từ tất cả các loại truy cập. Ví dụ, bạn sẽ cần có dữ liệu cho cả máy tính để bàn và thiết bị di động. Thực tế là bạn có khả năng cần phải làm thêm công việc để đạt được hiệu suất tương tự trên thiết bị di động, ngay cả khi các chỉ số cho thiết bị máy tính để bàn đã dưới ngưỡng đã đề cập ở trên.

14 mẹo tăng tốc độ khi thiết kế web dành cho bạn

Như bạn đã thấy, có nhiều yếu tố ảnh hưởng đến thời gian tải trang trên trang web của bạn. Tuy nhiên, cũng có nhiều cách bạn có thể cải thiện hiệu suất của trang web. Dưới đây là một số phương pháp:

1. Giảm Số Lượng Yêu Cầu HTTP Yêu cầu HTTP được trình duyệt web sử dụng để lấy các phần khác nhau của trang, như hình ảnh, bảng điều khiển, và đoạn mã từ máy chủ web. Mỗi yêu cầu, đặc biệt là khi sử dụng HTTP/1.1, sẽ tốn thêm chi phí khi thiết lập kết nối giữa trình duyệt và máy chủ web từ xa.

Hơn nữa, trình duyệt thường có một giới hạn về số lượng yêu cầu mạng song song, vì vậy nếu bạn có nhiều yêu cầu đang chờ đợi, một số trong chúng sẽ bị chặn nếu hàng đợi quá dài.

Bước đầu tiên của bạn nên là loại bỏ các yêu cầu không cần thiết. Điều gì là thời gian hiển thị tối thiểu cần cho trang web của bạn? Tìm hiểu và chỉ tải những nguồn tài nguyên bên ngoài cần thiết.

Bạn nên loại bỏ bất kỳ hình ảnh, tệp JavaScript, bảng điều khiển, phông chữ không cần thiết nào. Nếu bạn đang sử dụng một CMS như WordPress, bạn nên loại bỏ bất kỳ plugin không cần thiết nào, vì chúng thường tải thêm các tệp trên mỗi trang.

Giờ đây, sau khi bạn đã loại bỏ tất cả mọi thứ có thể, bước tiếp theo là tối ưu hóa phần còn lại. Bạn nên xem xét việc nén các tệp CSS và JavaScript của mình. Các trang web được tối ưu hóa thường tải tất cả các tệp CSS và JavaScript cần thiết trong một yêu cầu duy nhất cho mỗi cái.

Sematext Experience có thể giúp bạn theo dõi và xác định các yêu cầu HTTP và nguồn tài nguyên nào đang tải chậm cho người dùng thực sự của bạn.

2. Chuyển Sang HTTP/2 Tôi đã đề cập trước đó về chi phí khi gửi nhiều yêu cầu qua HTTP/1.1. HTTP là giao thức mà trình duyệt sử dụng để giao tiếp với máy chủ web từ xa. HTML của trang web của bạn, cùng với tất cả các nguồn tài nguyên khác như hình ảnh, bảng điều khiển và các tệp JavaScript được chuyển giao bằng cách sử dụng giao thức này.

Một cách giải quyết vấn đề này là giảm số lượng yêu cầu. Điều này là một phương pháp tốt trong bất kỳ trường hợp nào. Ít tài nguyên cần thiết để hiển thị trang web của bạn luôn làm cho thời gian tải trang nhanh hơn, nhưng còn một cách khác để tránh chi phí này.

Bạn có thể chuyển trang web của mình sang HTTP/2. Chi tiết cách thực hiện điều này sẽ phụ thuộc vào nhà cung cấp dịch vụ lưu trữ bạn đang sử dụng.

HTTP/2 có nhiều ưu điểm hơn so với HTTP/1.1. Trong số đó là khả năng gửi nhiều tệp cùng một lúc, qua cùng một kết nối. Điều này tránh được chi phí của nhiều yêu cầu.

3. Tối Ưu Kích Thước Hình Ảnh Nhiều trang web sử dụng đồ họa một cách nặng nề. Nếu hình ảnh của bạn không được nén, hoặc nếu bạn sử dụng độ phân giải quá cao, điều này sẽ làm chậm hiệu suất của trang web.

Ví dụ, đôi khi các trang web sử dụng hình ảnh với độ phân giải 2x hoặc thậm chí 3x để hiển thị tốt trên màn hình có mật độ pixel cao như màn hình Retina. Nhưng nếu người dùng của bạn không sử dụng màn hình HiDP, thì bạn chỉ đang lãng phí băng thông và làm tăng thời gian tải trang cho khách truy cập của bạn, đặc biệt là nếu họ đang sử dụng kết nối dữ liệu di động chậm.

Bạn có thể đọc hướng dẫn của MDN để sử dụng hình ảnh đáp ứng đúng cách. Việc chỉ định nhiều kích thước hình ảnh sẽ giúp trình duyệt chọn hình ảnh phù hợp dựa trên độ phân giải màn hình.

Khi bạn chắc chắn rằng bạn đang tải đúng độ phân giải trên tất cả các loại thiết bị, thì đến lúc tối ưu kích thước của hình ảnh. Shopify có một hướng dẫn tốt về cách thực hiện điều này.

Đảm bảo rằng bạn sử dụng đúng loại tệp nữa! Sử dụng JPEG cho hình ảnh có nhiều màu sắc (ví dụ: hình ảnh), và sử dụng PNG cho đồ họa đơn giản.

4. Sử Dụng Mạng Phân Phối Nội Dung (CDN)

Việc phục vụ các tệp tĩnh có thể trở nên phức tạp. Vì đây không phải là hoạt động chính của 99% trang web, thông minh là nên gửi phần này của cơ sở hạ tầng của bạn đến một địa chỉ khác. May mắn thay, có những dịch vụ được thiết kế đặc biệt cho việc này: Mạng Phân Phối Nội Dung hoặc CDN.

CDN sẽ tối ưu hóa việc phục vụ các tệp tĩnh như CSS, hình ảnh, phông chữ và tệp JavaScript cho khách truy cập của bạn. Cài đặt chúng thường rất đơn giản.

CDN sử dụng các máy chủ được phân phối theo địa lý. Điều này có nghĩa là máy chủ gần nhất với khách truy cập của bạn sẽ phục vụ các tệp. Vì vậy, thời gian tải hình ảnh, ví dụ, sẽ giống nhau, không phụ thuộc vào nơi người dùng kết nối. Thông thường, khi phục vụ các tệp tĩnh từ máy chủ của bạn, thời gian tải tăng lên khi người dùng ở xa vật lý từ máy chủ.

5. Tối ưu Thiết Bị Di Động

Thiết bị di động đang ngày càng chiếm lĩnh thế giới, hoặc ít nhất là tôi được nói như vậy. Bạn nên kiểm tra xem người dùng của bạn đang sử dụng thiết bị gì thông qua một giải pháp giám sát thời gian thực như Sematext Experience hoặc thậm chí qua công cụ phân tích trang web mà bạn lựa chọn (ví dụ: Google Analytics), chỉ để đề phòng.

Thường, các nhà phát triển viết và kiểm thử trang web trên máy tính để bàn cá nhân của họ, và chỉ sau đó họ tối ưu hóa trang web cho thiết bị di động. Quy trình này thường khá đau đớn, phụ thuộc vào các lựa chọn được đưa ra khi viết trang web. Nhưng tưởng tượng nếu, trong quá trình kiểm thử trang web, chúng ta sử dụng thiết bị di động (hoặc bộ mô phỏng)? Như vậy, chúng ta sẽ viết trang web dành cho thiết bị di động đầu tiên. Trải nghiệm mặc định sẽ được tối ưu hóa cho thiết bị di động.

Sau đó, việc điều chỉnh trang web cho thiết bị máy tính sẽ trở thành một quy trình đơn giản hơn. Chúng ta có thể tiếp tục cải thiện trải nghiệm cho các thiết bị có sức mạnh và không gian màn hình lớn hơn. Hãy nhớ cũng giả mạo mạng và CPU để mô phỏng trải nghiệm của người dùng di động một cách tốt hơn.

6. Giảm Thiểu Thời Gian Đến Byte Đầu Tiên (TTFB) Thời gian đến byte đầu tiên, hay TTFB, là thời gian mà trình duyệt mất để nhận byte đầu tiên từ máy chủ. Điều này vì vậy là một vấn đề phía máy chủ nhưng lại đóng một vai trò quan trọng trong hiệu suất tổng thể của trang web của bạn, vì vậy bạn nên dành một khoảng thời gian để cải thiện nó.

Yếu tố chính mà bạn có thể kiểm soát khi đến TTFB là thời gian xử lý phía máy chủ. Do đó, bạn có thể thử một số mẹo được đề xuất bởi Google để cải thiện TTFB:

• Tối ưu hóa logic ứng dụng máy chủ để chuẩn bị trang nhanh chóng. Nếu bạn sử dụng một khung ứng dụng máy chủ, khung ứng dụng có thể có các khuyến nghị về cách thực hiện điều này.
• Tối ưu hóa cách máy chủ của bạn truy vấn cơ sở dữ liệu hoặc chuyển sang hệ thống cơ sở dữ liệu nhanh hơn.
• Nâng cấp phần cứng máy chủ của bạn để có thêm bộ nhớ hoặc CPU.

TTFB dưới 200ms được coi là tuyệt vời. Khoảng từ 200ms đến 500ms được coi là bình thường và ổn định. TTFB liên tục cao hơn 600ms sẽ cần được điều tra. Sematext Experience có thể giúp bạn kiểm tra điều này cùng với việc theo dõi các chỉ số Web Vitals khác.

7. Chọn Đúng Kế Hoạch Dịch Vụ Lưu Trữ Điều này liên quan đến điểm trước về việc giảm thiểu thời gian đến byte đầu tiên. Nếu bạn đang sử dụng một nhà cung cấp dịch vụ lưu trữ web chia sẻ, thì khả năng cao hiệu suất tổng thể sẽ không đạt chuẩn. Bạn nên xem xét nâng cấp kế hoạch dịch vụ lưu trữ hoặc nếu bạn đang sử dụng WordPress, xem xét sử dụng dịch vụ quản lý nổi tiếng với lưu trữ ổn định và hiệu suất cao.

Bạn có ba lựa chọn chính (cùng với một lựa chọn thêm) cho việc lưu trữ:

• Hosting Share – truyền thống là lựa chọn giá rẻ nhất, là cách để chia sẻ tài nguyên của máy chủ với khách hàng khác nhau.
• VPS – máy chủ ảo riêng tư nhanh hơn đáng kể so với máy chủ chia sẻ, nhưng thay vì sử dụng chỉ một máy, nó sử dụng nhiều máy.
• Máy chủ dành riêng rõ ràng là lựa chọn đắt nhất trong ba lựa chọn và với lựa chọn này, bạn thuê toàn bộ một máy có thể được cấu hình theo ý muốn của bạn.

Tất nhiên, như luôn, bạn nên đo lường hiệu suất của mình trước khi thay đổi.

8. Thực Hiện Nén Gzip Bạn nên kích hoạt nén gzip trên máy chủ HTTP của mình. Nén gzip giảm thiểu kích thước của các phản hồi HTTP cho một số loại tệp tin cụ thể. Thông thường, nó chỉ được sử dụng cho các phản hồi văn bản. Điều này nên giảm thời gian tải và tiết kiệm băng thông.

9. Giảm Thiểu và Kết Hợp Tệp CSS, JavaScript, và HTML Như tôi đã đề cập trước đó, bạn nên cố gắng tải cả JS và CSS trong một yêu cầu đơn cho mỗi loại. Điều này được thực hiện bằng cách giảm thiểu và kết hợp các tệp JS và CSS riêng lẻ thành các bản gói duy nhất.

Trình duyệt có một giới hạn về các yêu cầu mạng song song, vì vậy nếu trang web của bạn cần tổng cộng 3 yêu cầu để tải, nó sẽ có khả năng nhanh hơn so với việc phải tải 30 nguồn tài nguyên khác nhau. Nhà phát triển có thể sử dụng các công cụ như webpack để thuận tiện khi sử dụng nhiều tệp trong quá trình phát triển trang web và để có lợi ích về hiệu suất từ một bản gói duy nhất khi triển khai sản phẩm. Nhưng nói chung, việc kết hợp các tệp có nghĩa đúng như vậy, tất cả các tệp đều được sao chép nguyên vẹn vào một tệp duy nhất.

Quá trình giảm thiểu là quá trình tối ưu hóa kích thước của các tệp JavaScript và CSS bằng cách loại bỏ hoặc rút ngắn các ký hiệu trong mã nguồn. Kết quả là tệp xuất ra tương đương về chức năng, nhưng không hoàn toàn dễ đọc cho con người. Trình duyệt không có vấn đề đọc nó, và kích thước tệp nhỏ hơn sẽ tải nhanh hơn.

Đa số trang web được tối ưu hóa thường sẽ giảm thiểu tệp JavaScript và CSS trước, sau đó kết hợp chúng thành các bản gói duy nhất.

10. Tải JavaScript Theo Cách Bất Đồng Bộ Khi trình duyệt đến một thẻ <script> chứa JavaScript từ nguồn từ xa, nó sẽ đợi cho đến khi tệp được tải xong trước khi tiếp tục hiển thị trang web. Điều này được gọi là tải đồng bộ.

Nếu bạn đặt cờ async trên thẻ <script>, trình duyệt sẽ tải kịp thời tệp script. Nó sẽ tiếp tục phân tích trang trong khi script được tải.

Chúng tôi cũng đề xuất di chuyển các thẻ script xuống cuối trang, gần thẻ đóng </body>. Điều này giúp trình duyệt cũ hơn không hỗ trợ thuộc tính async sẽ tải script sau khi phân tích xong phần còn lại của trang.

11. Xem xét Sử Dụng Các Kỹ Thuật Prefetch, Preconnect, và Prerender Có nhiều kỹ thuật prefetching và preloading mà bạn có thể sử dụng để đưa ra gợi ý cho trình duyệt về những nguồn tài nguyên sẽ được yêu cầu để hiển thị trang trước khi trình duyệt thực sự cần những nguồn tài nguyên đó.

Cân nhắc sử dụng các kỹ thuật tối ưu hóa hiệu suất sau đây:

Prefetch DNS. Bạn có thể thông báo cho trình duyệt rằng một số tên miền cụ thể sẽ cần được giải quyết thành địa chỉ IP trước khi trình duyệt thực sự thấy tài nguyên từ tên miền đó. Điều này có thể nhìn như là một tối ưu hóa nhỏ, nhưng nó có thể tạo ra sự khác biệt khi bạn đã cố gắng mọi kỹ thuật khác.

<link rel=“dns-prefetch” href=“//sematext.com”>

TCP Preconnect. Tương tự như phương thức prefetch DNS, preconnect sẽ giải quyết DNS nhưng cũng sẽ thực hiện bắt tay TCP, và tùy chọn là bắt tay TLS.

Prefetching. Nếu chúng ta chắc chắn rằng một nguồn tài nguyên cụ thể sẽ được yêu cầu trong tương lai, chúng ta có thể yêu cầu trình duyệt yêu cầu mục đó và lưu trữ nó trong bộ nhớ đệm để tham chiếu sau này.

Prerendering. Điều này nên được dành cho trường hợp khi bạn thực sự biết rằng bước tiếp theo mà người dùng sẽ thực hiện là đi đến một trang cụ thể. Bạn có thể hướng dẫn trình duyệt để prerender toàn bộ trang, cùng với việc tải xuống tất cả các tài nguyên cần thiết bằng cách chỉ định URL như sau:

Những kỹ thuật này có thể giúp trang web của bạn tối ưu hóa hiệu suất và cảm nhận của người dùng bằng cách giảm độ trễ trong quá trình tải trang và tăng trải nghiệm người dùng tổng thể.

12. Giảm Số Lượng Plugin Plugin là các đoạn mã tái sử dụng, thường được sử dụng trong hệ thống quản lý nội dung như WordPress hoặc các nền tảng website đã được xây dựng trước. Các plugin mang lại cho chủ sở hữu trang web các chức năng bổ sung như phân tích hoặc khả năng để người đọc để lại bình luận trên bài đăng blog.

Nhưng việc sử dụng plugin cũng đi kèm với một chi phí. Mỗi plugin hầu như chắc chắn sẽ tải thêm các tệp CSS và JavaScript. Một số plugin cũng có thể làm tăng thời gian TTFB vì chúng đòi hỏi xử lý bổ sung trên máy chủ cho mỗi yêu cầu trang.

Do đó, tôi khuyên bạn nên kiểm tra danh sách plugin của mình và đảm bảo rằng bạn thực sự cần mỗi plugin. Bạn nên xóa bỏ bất kỳ plugin nào không quan trọng đối với trang web của bạn.

13. Sử Dụng Caching cho Trang Web Tôi đã đề cập ngắn gọn về cache nhưng tôi muốn giải thích nó là gì. Caching là quá trình lưu trữ một phiên bản của các tệp của bạn trong một vị trí lưu trữ tạm thời – một bộ nhớ đệm – có thể được truy cập nhanh hơn. Có nhiều lợi ích khi kích hoạt caching trình duyệt, bao gồm giảm tiêu thụ băng thông, tăng thời gian tải, giảm độ trễ và công việc của máy chủ. Nhược điểm chính là lúc nào cũng sẽ có ít nhất hai phiên bản của trang web của bạn vào bất kỳ thời điểm nào. Điều này có thể gây vấn đề nếu bạn đang chạy một dịch vụ thời gian thực phụ thuộc vào dữ liệu chính xác, nhưng thậm chí điều này cũng có thể được giải quyết một phần bằng cách buộc một phần của bộ nhớ đệm phải xóa khi dữ liệu mới được nhập khẩu.

14. Áp Dụng Giám Sát Trang Web Dựa Trên Đám Mây Bước đầu tiên để cải thiện hiệu suất của trang web của bạn là đo lường nó. Việc đo lường hiệu suất đòi hỏi các công cụ cụ thể, và giám sát liên tục là điều quan trọng nếu bạn muốn được thông báo nếu những thay đổi của bạn cải thiện hiệu suất hoặc nếu hiệu suất giảm đi theo thời gian.

Có hai phương pháp để giám sát trang web: giám sát tổng hợp và giám sát người dùng thực. Nếu bạn không chắc chắn cách chúng hoạt động và phương pháp nào phù hợp nhất với trường hợp sử dụng của bạn, hãy xem bài đăng trên blog của chúng tôi về giám sát người dùng thực so với giám sát tổng hợp, nơi chúng tôi so sánh hai loại giám sát.