By Cao Chi Dung — 8 Th05 2023

9 sai lầm về tốc độ trang web có thể giết chết doanh số bán hàng của bạn

Khi bạn đang học cách tạo một trang web , một nửa trận chiến là học cách đảm bảo trang web hoạt động tốt như giao diện của nó. Xét cho cùng, không có gì gây tiếng vang lớn hơn việc khởi chạy trang web của bạn—chỉ để biết rằng hầu hết mọi người đang rời bỏ trang web đó vì trang của bạn không tải được.

Trong thế giới kỹ thuật số phát triển nhanh ngày nay, thời gian là một thứ hàng hóa và không ai muốn lãng phí nó để chờ trang web của bạn tải. Đó là lý do tại sao bạn sẽ muốn biết cách kiểm tra tốc độ trang web của mình và biết cách cải thiện nó để tránh mất khách hàng vào một trang web tải chậm.

Nhiều yếu tố ảnh hưởng đến tốc độ trang web của bạn, bao gồm (nhưng không giới hạn ở) nhà cung cấp dịch vụ lưu trữ web , chất lượng mã phụ trợ, plugin của bạn, v.v. Thật dễ dàng để mất dấu mọi thứ—nhưng trước khi đi sâu vào các sai lầm, chúng ta hãy tìm hiểu cách các trang web hoạt động đằng sau hậu trường.

Hãy nghĩ về internet giống như một nhà hàng: Một trang web hoạt động như một thực đơn, hiển thị tất cả các món ăn có sẵn trong nhà bếp. Khi bạn gọi một thứ gì đó ngoài thực đơn, người phục vụ của bạn sẽ được yêu cầu lấy nó từ nhà bếp và gửi lại cho bàn của bạn. Đơn đặt hàng của bạn càng phức tạp, nhà bếp sẽ càng mất nhiều thời gian để phục vụ bữa ăn của bạn và càng mất nhiều thời gian để người phục vụ quay lại bàn của bạn. Hãy ghi nhớ phép ẩn dụ này khi chúng ta đi sâu hơn vào các lỗi phổ biến về tốc độ trang web.

Tìm cách tạo một trang web trên một nền tảng đáng tin cậy? Tạo một trang web trên Tempi ngay hôm nay.

01. Sử dụng quá nhiều phông chữ tùy chỉnh

Khi làm việc trên thiết kế trang web của bạn, thật dễ dàng để bạn hăng hái thử nghiệm các yếu tố như phông chữ. Mặc dù có toàn bộ giải thích về thiết kế cho lý do tại sao bạn nên tuân thủ các nguyên tắc về kiểu chữ—chẳng hạn như độ tương phản, phân cấp và cân bằng—bạn thực sự chỉ cần biết tại sao có quá nhiều phông chữ có thể ảnh hưởng đến hiệu suất trang của bạn.

Các trình duyệt có thể dễ dàng hiểu các phông chữ hệ thống vì hầu hết các máy tính đều đã tải xuống các phông chữ đó (nghĩ rằng các phông chữ bạn thấy thường xuyên nhất, như Times New Roman và Arial). Tuy nhiên, những người sử dụng “phông chữ tùy chỉnh” hoặc phông chữ phong cách đặc biệt bên ngoài những phông chữ phổ biến này, yêu cầu tệp phải được tải xuống để hiển thị văn bản. Mặc dù điều này sẽ luôn mất nhiều thời gian hơn phông chữ hệ thống, nhưng bạn càng sử dụng nhiều phông chữ trên một trang thì càng mất nhiều thời gian để tải.

Ví dụ: yêu cầu người phục vụ của bạn thực hiện một yêu cầu đặc biệt tại một nhà hàng thường sẽ diễn ra nhanh hơn so với việc mọi khách hàng quen đều yêu cầu các bữa ăn cần được chế biến đặc biệt.

Để có trải nghiệm người dùng nhanh nhất cho khách truy cập của bạn, hãy cố gắng không có nhiều hơn ba đến bốn phông chữ tùy chỉnh hoặc chọn phông chữ hệ thống thay thế.

02. Sử dụng định dạng ảnh không tối ưu

Các định dạng tệp có vẻ như là một vấn đề khó giải quyết khi tạo trang web của bạn và phần lớn là như vậy. Ví dụ: khi bạn tạo trang web bằng Wix, Tempi sẽ tự động đảm bảo rằng ảnh bạn thêm vào trang web của mình trông đẹp và tải nhanh nhất có thể. Nó thực hiện điều này bằng cách chuyển đổi hình ảnh thành tệp “WebP”, tệp này duy trì chất lượng hình ảnh nhưng yêu cầu kích thước tệp nhỏ hơn. Nhưng để điều này hoạt động theo cách tốt nhất cho trang web của bạn, bạn cần đảm bảo rằng tệp gốc mà bạn đang tải lên không chỉ có chất lượng cao nhất có thể mà tệp chất lượng cao đó không tạo ra quá nhiều vấn đề khi tải lên hoặc tải về nó.

Bạn có thể bắt đầu bằng cách chọn các định dạng hình ảnh phù hợp. Bám sát các định dạng hình ảnh phổ biến như JPG , PNG hoặc SVG —bạn có thể coi những định dạng này tương đương với việc gọi đồ uống phổ biến nhất tại nhà hàng. Nếu bạn đặt một lon Coke ở bất cứ đâu trên thế giới, có khả năng họ sẽ có nó trên vòi và có thể phục vụ bạn sau vài phút.

Ngoài ra, hãy sử dụng JPG thay vì PNG khi có thể. Hình ảnh JPG có thể nhỏ hơn tới 10 lần so với PNG và do đó, có thể tải nhanh hơn nhiều. Mặc dù PNG và JPG hoạt động tốt đối với ảnh, nhưng SVG thường hoạt động tốt hơn đối với hình dạng và các thành phần kiểu minh họa như biểu trưng. Các tệp SVG thường nhỏ hơn nhiều so với PNG và JPG và chúng tải trên trang nhanh hơn vì hình ảnh được nhúng trực tiếp vào mã trang web. Vì trang web không phải đi tìm hình ảnh ở một nơi khác trên internet, nó giúp hình ảnh tải nhanh hơn.

03. Làm quá với hộp đèn

Nếu bạn đang xây dựng trang web và muốn đảm bảo khách truy cập của mình nhìn thấy thông báo hoặc thông báo quan trọng, bạn có thể chọn thêm hộp đèn hoặc cửa sổ bật lên xuất hiện ở đầu nội dung của trang chính.

Mặc dù có thể có một cửa sổ bật lên quảng cáo giảm giá một vài phút sau khi khách truy cập vào trang web, nhưng cứ vài giây lại có thứ gì đó bật lên không chỉ gây khó chịu cho khách truy cập mà còn làm chậm trang web của bạn.

Hãy coi nó giống như cách một máy chủ tương tác với một bảng. Mặc dù họ có thể ghé qua và thông báo các món đặc biệt sau khi bạn đã ngồi và nhìn vào thực đơn, nhưng sẽ rất khó chịu nếu cứ vài phút họ lại xuất hiện—đồng thời sẽ khiến họ không thể quay lại bếp và phục vụ bạn bữa ăn bạn đến cho.

04. Phát cuồng với các tính năng của bên thứ ba

Một điều thú vị về các trang web ngày nay là bạn không phải sử dụng tất cả nội dung của riêng mình—bạn thường có thể nhúng nội dung của bên thứ ba vào một trang web, về cơ bản là mượn nội dung của một trang web khác để xuất hiện trên trang của bạn. Mặc dù điều này có thể tăng số lượng những thứ mà khách truy cập có thể thực hiện trên trang web của bạn, nhưng nó có thể làm chậm trang web của bạn. Về cơ bản, bạn đang yêu cầu một người phục vụ chạy đến một nhà hàng khác để lấy một phần đặc biệt của bữa ăn và mang nó trở lại nhà hàng đó.

Phương pháp hay nhất là đặt trước các ứng dụng và iframe của bên thứ ba (cửa sổ nhỏ dành cho các trang web khác) trên các phần của trang web không phải là trang chủ—và để hạn chế số lượng tập lệnh của bên thứ ba trên trang web của bạn. Chỉ giữ lại những ứng dụng mà bạn đang tích cực sử dụng.

Ngoài ra, hãy thêm bất kỳ ứng dụng thiết yếu nào của bên thứ ba theo cách không chặn. Bạn có thể thực hiện việc này bằng cách thao tác với phần thân của mã HTML bằng một tập lệnh đặc biệt có tên là “defer” hoặc “async”, cũng như đặt mã ở cuối nội dung chính. Cả hai tùy chọn sẽ yêu cầu trang web chỉ tải các tài nguyên này sau khi tất cả nội dung chính đã được tải. Về cơ bản, điều này giống như nói với người phục vụ của bạn đừng đợi một món ăn đặc biệt trước khi mang tất cả các món ăn khác đến bàn của bạn.

Tốt hơn hết, hãy tránh sử dụng bất kỳ mã tùy chỉnh nào bằng cách sử dụng các công cụ tiếp thị tích hợp của Wix thay vì các ứng dụng của bên thứ ba khi có thể.

05. Top-loading thiết kế trang chủ của bạn

Thủ phạm phổ biến làm chậm tốc độ trang web là tải trang chủ có nội dung trực quan nặng, như thư viện ảnh, video và phông chữ tùy chỉnh. Để tránh điều này, hãy tập trung vào việc đơn giản hóa phần trên màn hình đầu tiên của trang chủ của bạn. Cố gắng giới hạn nội dung này thành văn bản ở phông chữ hệ thống và hình ảnh tĩnh vì chúng tải nhanh hơn.

Tempi cũng tự động tải chậm hình ảnh trong hầu hết các tình huống, nghĩa là hình ảnh nằm dưới màn hình đầu tiên được tải xuống đầu tiên dưới dạng hình ảnh giữ chỗ rất nhỏ, độ phân giải thấp. Khi người dùng cuộn trang, những hình ảnh độc lập này sẽ được thay thế bằng hình ảnh có độ phân giải cao ban đầu.

06. Sử dụng ảnh GIF

GIF đã thay đổi hoàn toàn giao tiếp hiện đại. Mặc dù có thể hấp dẫn nhưng GIF thực sự là một mức nâng cao hơn cho máy tính để xử lý so với video. Lý do là bạn không thể kiểm soát quá trình phát lại của chúng và chúng sẽ chỉ bắt đầu phát sau khi tất cả các khung nội dung của nó được tải. Vì đây là nhiều điểm giảm tốc độ khi tải trang nên bạn sẽ muốn xem xét sử dụng video thay vì GIF để hiển thị nội dung động. (Thêm vào đó, các định dạng mã hóa video hiện đại có cả chất lượng tốt hơn và kích thước tệp nhỏ hơn.)

Nếu bạn đang tìm kiếm một hiệu ứng giống như GIF, bạn có thể sử dụng Tempi VideoBoxes để giới thiệu các video của riêng bạn. Bạn có thể tùy chỉnh chúng để hiển thị đường viền xung quanh hộp của bạn hoặc để thêm lớp phủ hoặc mặt nạ video (trong số các tùy chỉnh khác). Tempi cũng có tính năng Video trong suốt, cho phép bạn thêm hoặc tải lên video của riêng mình và đặt chúng ở bất kỳ đâu trên trang web của bạn với nền trong suốt.

07. Không chú ý đến thứ tự DOM của trang web của bạn

Mặc dù Trình chỉnh sửa Tempi là một giao diện kéo và thả đơn giản, thực hiện hầu hết công việc cho bạn, vẫn có chỗ cho lỗi người dùng. Trên thực tế, một lỗi phổ biến trong các trang web đầu tiên là không khớp thứ tự của các phần tử—như hình ảnh, văn bản và video—trên trang web của bạn (còn được gọi là DOM) với thứ tự trong bảng điều khiển Lớp của Trình chỉnh sửa.

DOM là viết tắt của mô hình đối tượng tài liệu và là cách máy tính đọc tầm quan trọng và thứ tự của các thành phần trang web của bạn. Với Wix, DOM xác định trình tự tải các phần tử trên trang web của bạn. Thứ tự DOM tự động được kích hoạt thông qua Trình chỉnh sửa, nhưng nó được liên lạc qua bảng điều khiển Lớp nơi bạn kiểm soát từng lớp của thành phần trang web của mình.

Vì vậy, nếu Lớp của bạn không phản ánh tầm quan trọng của các yếu tố trên trang web của bạn, thì trang web của bạn sẽ tải không theo thứ tự. Hãy nghĩ về nó giống như gọi một bữa ăn với một người phục vụ kém cỏi: nếu bạn không nói rõ rằng bạn muốn món ăn của mình được bày ra theo thứ tự đồ uống, món khai vị, món khai vị rồi đến món tráng miệng, đừng ngạc nhiên nếu điều đầu tiên là đi ra khỏi bếp là một bát kem.

08. Tự động lưu vào bộ nhớ đệm

Đây không phải là một sai lầm quá lớn vì nó là một cú lật chỉ cần được chuyển đổi. Tempi sử dụng Mạng phân phối nội dung (còn gọi là CDN) để lưu vào bộ đệm (hoặc lưu trữ) và phục vụ phản hồi nhanh nhất có thể cho hầu hết khách truy cập.

Trong phép ẩn dụ về nhà hàng của chúng tôi, bạn có thể coi chúng như đồ gia vị và bình đựng nước. Vì những người phục vụ biết đây là những thứ mà khách muốn thường xuyên nhất, nên họ có chiến lược lưu trữ chúng khắp nhà hàng để họ không phải lúc nào cũng phải quay lại bếp.

Tuy nhiên, nếu bạn là nhà phát triển web có kinh nghiệm sử dụng Tempi và Velo và bạn nhận thấy rằng trang web của mình vẫn mất quá nhiều thời gian để tải, thì bạn có thể cần bật bộ nhớ đệm cho trang web của mình theo cách thủ công để đảm bảo rằng trang web lưu trữ nội dung bạn sử dụng nhiều nhất trên các máy chủ CDN (nếu bạn mang nước sốt của mình đến nhà hàng, bạn chỉ cần nói với người phục vụ để giữ nước sốt đó cho bạn).

09. Không thiết kế cho di động

Cuối cùng, để cung cấp trải nghiệm phù hợp cho người dùng di động, tất cả các trang web Tempi đều có khả năng thích ứng, nghĩa là nền tảng sẽ tự động tối ưu hóa chúng cho từng thiết bị phổ biến nhất. Tuy nhiên, một lỗi phổ biến mà chủ sở hữu trang web mắc phải là không kiểm tra xem phiên bản dành cho thiết bị di động có giao diện và hoạt động chính xác như cách họ muốn hay không.

Một số yếu tố có thể trông không đẹp mắt trên thiết bị di động như trên máy tính để bàn và những yếu tố khác có thể không cần thiết. Bằng cách tối ưu hóa bố cục trang web dành cho thiết bị di động của bạn và ẩn các phần tử không cần thiết, bạn có thể giảm trang web dành cho thiết bị di động của mình xuống mức cơ bản và cung cấp cho máy chủ ít nội dung hơn để phục vụ. Hãy nghĩ về nó như một cửa sổ mang đi chỉ phục vụ nội dung tốt nhất trên trang web của bạn để tiêu thụ khi đang di chuyển.