Làm thế nào để kiểm tra trang web trước khi phát hành?

Ảnh đại diện

Bạn muốn phát hành một trang web nhưng còn nghi ngờ liệu mọi thứ đã sẵn sàng chưa? Bạn có chắc mình nhớ thêm bất kỳ chi tiết nhỏ nhưng cần thiết nào không? Chúng tôi đã kiểm soát và tìm cách khắc phục những lỗi như vậy - danh sách kiểm tra trước khi phát hành của Devjoy. Chúng tôi hy vọng giúp ích được cho bạn.

Bạn có chắc chắn rằng trang web của bạn có thể đối phó với nó?

Bạn có thể tìm ra những gì trang web của bạn có thể đối phó chỉ với thử nghiệm. Việc kiểm tra là bắt buộc để biết sản phẩm hoạt động bình thường như thế nào và nó có dễ hiểu cho người dùng hay không. Các kỹ sư QA chịu trách nhiệm phát triển các kịch bản thử nghiệm và chuẩn bị cũng như đánh giá kết quả thử nghiệm, nhưng họ không phải là những người duy nhất thực hiện việc này.

Kiᝃm tra thiết kế

Kiểm tra thiết kế là kiểm tra bố cục để tuân thủ thiết kế. Một nhà thiết kế sản phẩm chịu trách nhiệm về điều này. Sau khi một nhà phát triển hoàn thành công việc của họ, một nhà thiết kế sẽ kiểm tra xem mọi thứ có xuất hiện phù hợp và thể hiện hành vi phù hợp hay không. Nếu có bất kỳ câu hỏi nào, nhà thiết kế sẽ báo cáo lỗi hoặc quyết định với nhà phát triển về sự cần thiết phải làm lại điều gì đó.

Các vấn đề điển hình có thể được tìm thấy trong quá trình kiểm tra thiết kế:

  • khoảng cĂĄch khĂ´ng chĂ­nh xĂĄc;
  • cĂĄc trấng thĂĄi khĂ´ng hoất động qua sáťą tĆ°ĆĄng tĂĄc người dĂšng;
  • cĂĄc hiệu ᝊng bị hỏng hoạc lĂ m kĂŠo dĂ i thời gian phản hồi.

Thử nghiệm chức năng

Điều này nhằm xác nhận rằng sản phẩm, phần mềm đang được phát triển có toàn bộ phạm vi chức năng của khách hàng được chứng minh là đáp ứng mọi mong đợi. Ý tưởng chính ở đây là đảm bảo rằng bản thân trang web hoạt động bình thường.

Ví d᝼ vᝁ nhᝯng gÏ có thᝃ xảy ra sai:

  • MĂ n hĂŹnh đăng nháş­p khĂ´ng cho phĂŠp người dĂšng đăng nháş­p báşąng email;
  • KhĂ´ng thᝃ mở trang thanh toĂĄn mạc dĂš sản phẊm đã được thĂŞm vĂ o giỏ hĂ ng;
  • Theo nghÄŠa đen lĂ  tẼt cả cĂĄc chᝊc năng hoạc logic nĂ o khĂĄc cĂł vẼn đề.

Khả năng tương thích của các trình duyệt

Mặc dù Google Chrome là trình duyệt phổ biến nhất hiện nay, không có sự độc quyền trên thị trường trình duyệt và điều này là tốt. Vì vậy, nhiệm vụ quan trọng là đảm bảo rằng ứng dụng đó trông và hoạt động bình thường trong một số trình duyệt chính, thông thường nó có thể là phiên bản mới nhất của Apple Safari, Google Chrome, Mozilla Firefox và Microsoft Edge.

Kiểm tra trang web trong các trình duyệt khác nhau là điều bắt buộc vì các trình duyệt khác nhau có thể diễn giải cùng một mã theo một cách hơi khác. Ngay cả khi mã của bạn tuân thủ tuyệt đối với các tiêu chuẩn phát triển, một số vấn đề có thể phát sinh trên trang web của bạn, chỉ do một lỗi trong trình duyệt.

Khả năng tương thích với thiết bị di động

Số lượng thiết bị mà mọi người sử dụng để lướt web ngày càng tăng. Để đảm bảo rằng trang web của bạn hiển thị chính xác trên thiết bị di động, bạn nên kiểm tra nó. Nhóm thiết bị di động để thử nghiệm của bạn càng lớn thì ứng dụng của bạn càng ổn định. Tuy nhiên, đừng quên rằng số lượng thiết bị thử nghiệm càng lớn thì quá trình thử nghiệm càng kéo dài và tốn kém. Nếu bạn có một ứng dụng nhỏ, thì hai điện thoại di động (iO và Android) và một máy tính bảng có lẽ là đủ.

image optimization imCsR8n 95 640 Tốt hơn, nhanh hơn, mạnh mẽ hơn.

Tăng tốc, tăng tốc

Tối ưu hóa trong quá trình phát triển là điều cần thiết để tải nhanh sản phẩm trên tất cả các thiết bị, ảnh hưởng trực tiếp đến thứ hạng của sản phẩm trong công cụ tìm kiếm. Theo đó, tiêu chí này ảnh hưởng đến việc kiếm tiền cuối cùng theo cách này hay cách khác.

Tối ưu hóa hình ảnh

Tối ưu hóa hình ảnh đề cập đến tính vệ sinh của một ứng dụng web hiện đại. Mặc dù Internet ngày nay đã đủ nhanh, nhưng bạn nên lưu ý mạng 3G chậm và những nơi mọi người phải lướt các trang web có kết nối Internet hạn chế, chẳng hạn như dưới lòng đất. Nếu bạn có thể tiết kiệm một trăm hoặc hai kb cho người dùng của mình, bạn phải làm điều đó.

Dưới đây là một số công cụ có thể giúp bạn tối ưu hóa hình ảnh của mình:

Kiᝃm tra båo cåo cᝧa Google Lighthouse

Google có thể cải thiện chất lượng trang web của bạn. Nó có kiểm tra hiệu suất, khả năng truy cập, ứng dụng web tiến bộ, SEO. Ngoài việc tự kiểm tra, nó còn cung cấp cho các nhà phát triển lời khuyên về cách khắc phục sự cố rất hữu ích.

Bạn có thể sử dụng nó theo một số cách:

  • https://developers.google.com/speed/pagespeed/insights - để cĂł bĂĄo cĂĄo chi tiáşżt vᝁ hiệu suẼt cᝧa bấn;
  • https://web.dev/measure - để kiᝃm tra 4 danh m᝼c chĂ­nh: SEO, Khả năng truy cáş­p, Tháťąc tiễn tốt nhẼt, Hiệu suẼt (bĂĄo cĂĄo hiệu suẼt Ă­t chi tiáşżt hĆĄn trong Tốc độ trang);
  • VĂ  theo một số cĂĄch khĂĄc, cháşłng hấn nhĆ° trong cĂĄc cĂ´ng c᝼ dĂ nh cho nhĂ  phĂĄt triᝃn Chrome, dưới dấng mĂ´-đun NodeJS, v.v. HĂŁy xem bĂ i viáşżt nĂ y để biáşżt thĂŞm chi tiáşżt https://developers.google.com/web/tools/lighthouse#devtools.

Hãy thu thập tất cả và đừng quên bất cứ thứ gì

Một vài điều phổ biến có mức độ ưu tiên thấp có thể bị bỏ qua trong quá trình thiết kế và phát triển. Cách duy nhất để không kiểm soát chúng trong toàn bộ dự án là kiểm tra sự tồn tại của chúng một vài tuần trước khi phát hành. Nó vẫn hoạt động tốt.

Trang 404 đã được tạo

Trang 404 thường xuất hiện khi bạn mở không thành công nội dung nào đó trên web mà không tồn tại. Điều này là cần thiết vì bạn không thể cho phép người dùng lạc vào trang web của mình. Thiết kế 404 trang phù hợp giúp người dùng hiểu rõ rằng họ đã sử dụng một tuyến đường không tồn tại và giúp họ tìm đường quay lại trang web của bạn. Đây cũng là một nơi tuyệt vời để thêm một quả trứng Phục sinh vào trang web của bạn - hãy xem danh sách các giải pháp thiết kế nổi bật trong việc tạo 404 trang này.

imortance of favicons NAQGPeiKPh 640 Đảm bảo với mọi người rằng biểu tượng yêu thích của bạn dẫn đến mạng.

Favicon đã được thêm vào

Favicon là một phần tử UX / UX nhỏ, nhưng thật tệ nếu một trang web không có phần tử này. Biểu tượng yêu thích giúp chúng tôi xác định trang web của bạn từ nhiều người khác một cách nhanh chóng: trong thanh tab, danh sách các trang web yêu thích, ...

Các biểu tượng mạng xã hội dẫn đến các tài khoản mạng xã hội thực

Việc tích hợp trang web với mạng xã hội ngày nay là điều bắt buộc hơn là mong muốn. Rốt cuộc, không cần phải nhập tên trên một nền tảng xã hội cụ thể, thay vào đó bạn có thể nhấp vào một nút và chuyển đến một trang cụ thể. Vì vậy, chúng ta nên kiểm tra xem nó có dẫn đến các mạng mong muốn hay không.

perfect development without surprise errors bnDSV7cEny 640 Sửa lỗi, trước khi chúng được tìm thấy.

Bạn có chắc mình giỏi việc này không?

Chắc chắn, một đoạn mã đã viết phải có thể bảo trì và ổn định, và một số công cụ có thể giúp bạn xác định các vấn đề nếu chúng, vì một lý do nào đó, được để lại trong một đoạn mã.

Không có lỗi bảng điều khiển nào trong trình duyệt

Mã dễ bị lỗi. Tuy nhiên, theo mặc định, các lỗi không hiển thị trong trình duyệt. Tuy nhiên, chúng được nhìn thấy đúng cách khi bạn đang sử dụng các công cụ dành cho nhà phát triển trình duyệt được tích hợp sẵn. Đảm bảo kiểm tra bảng điều khiển phát triển trình duyệt để đảm bảo không để lại lỗi khi bạn phân phối ứng dụng sản xuất.

Không có lỗi xơ vải trong thiết bị đầu cuối

Eslint là một mã và công cụ phân tích thực tế là một tiêu chuẩn cho các ứng dụng JavaScript ngày nay. Nó phân tích cơ sở mã của bạn và có thể đề xuất hoặc buộc bạn làm theo các phương pháp hay nhất và đôi khi làm nổi bật các lỗi trong cơ sở mã. Số lượng cách bạn có thể tùy chỉnh nó rất ấn tượng, tuy nhiên, bạn luôn có thể sử dụng các cấu hình phổ biến nhất.

  • CẼu hĂŹnh eslint.
  • Mạc dĂš cẼu hĂŹnh eslint khĂĄ tốt, chĂşng tĂ´i quyáşżt định xây dáťąng cẼu hĂŹnh cᝧa mĂŹnh trĂŞn đó, nĆĄi chĂşng tĂ´i ghi đè một số quy tắc bẼt tiện. Bấn cĹŠng cĂł thᝃ sáť­ d᝼ng nĂł.

Tệp Readme tồn tại và có tất cả thông tin liên quan

Cần có một tệp readme minh bạch với mô tả về cách cài đặt, chạy và làm việc với dự án. Mọi lúc, một nhà phát triển mới cảm thấy thoải mái hơn khi bắt đầu làm việc trên một dự án mà không cần tìm cách chạy nó trên Google.

Ngoài thông tin cài đặt / chạy, tệp readme có thể chứa thông tin khác, chẳng hạn như tiêu chuẩn mã, hướng dẫn triển khai, v.v.

Gói khôi ph᝼c

Bạn không bao giờ có thể chắc chắn 100% rằng mã mới sẽ hoạt động bình thường trong môi trường sản xuất. Tất nhiên, nó nên được thử nghiệm cục bộ và trong môi trường dàn dựng, nhưng không nên loại trừ xác suất có thể xảy ra sai sót trong quá trình sản xuất.

Do đó, bạn phải luôn có một kế hoạch thoát ra sẽ giúp bạn khôi phục ứng dụng của mình về phiên bản trước nếu có sự cố xảy ra trong quá trình sản xuất. Kế hoạch khôi phục cũng là vấn đề phù hợp để thêm vào tệp readme.

rollback plan for application 7LIF weNsc 640 Chán, nhưng cần thiết. Kiểm tra gói tài liệu chính.

Các tài liệu? Có thật không? Thật nhàm chán, nhưng cần thiết

Làm việc với các chính sách và tài liệu thật khó chịu nhưng có vẻ là cách duy nhất để bảo vệ tài sản trí tuệ và dữ liệu của người dùng trong thế giới kỹ thuật số. Vì vậy, hãy đảm bảo rằng sản phẩm của bạn được tích hợp và bảo đảm ở mức độ an toàn và chất lượng thích hợp. Dưới đây là gói tài liệu chính:

  • GiẼy phĂŠp phĂ´ng chᝯ vĂ  hĂŹnh ảnh;
  • Điᝁu khoản Dịch v᝼ vĂ  ChĂ­nh sĂĄch quyᝁn riĂŞng tĆ°;
  • TĂ i liệu Điᝁu khoản vĂ  Điᝁu kiện;
  • Một biᝃu ngᝯ cookie đã được thĂŞm vĂ o trang web;
  • CĂĄc tĂ i liệu khĂĄc cần thiáşżt để một trang web đáp ᝊng được việc tuân thᝧ GDPR.

seo optimization jruSmaWFdf 640 Tập trung vào các yếu tố cần thiết về SEO.

Bạn thân với công cụ tìm kiếm

Bạn khó có thể tìm thấy những người không biết SEO là gì. Tóm lại, đây là một tập hợp các thực hành tạo điều kiện thuận lợi cho việc xếp hạng các trang web của bạn bởi các công cụ tìm kiếm. Bạn được yêu cầu làm theo những cách tốt nhất để đảm bảo trình thu thập thông tin của công cụ tìm kiếm có thể nhận được tất cả thông tin quan trọng từ trang web của bạn. BTW, Google Lighthouse (chúng tôi đã viết về công cụ này ở trên) giúp xác định các vấn đề SEO dễ dàng hơn và cũng đưa ra một số mẹo về cách khắc phục chúng. Dưới đây là danh sách một vài mục nên có trên trang web, để các công cụ tìm kiếm có thể xếp hạng trang web một cách chính xác.

Đã thêm cåc thẝ meta cƥ bản

Thẻ meta là một phần của đánh dấu siêu văn bản giúp rô bốt tìm kiếm hiểu nội dung trang web của bạn và nội dung sẽ phát cho khách truy cập trong trang kết quả tìm kiếm.

Sơ đồ trang web đã được thêm vào

Sơ đồ trang web là một tệp XML nơi bạn cung cấp thông tin về các trang, video, các tệp khác trên trang web và chúng có mối quan hệ với nhau như thế nào. Các công cụ tìm kiếm như Google đọc tệp này để thu thập thông tin trang web một cách thông minh hơn. Sơ đồ trang web cho Google biết những trang và tệp nào có thể cần thiết trong một trang web cụ thể và cung cấp thông tin có giá trị.

Robots.txt đã được thêm

Tệp robots.txt giúp trình thu thập thông tin của công cụ tìm kiếm hiểu những trang nào nên hiển thị trong trang kết quả tìm kiếm và trang nào không nên. Bạn có thể sử dụng nó để cấm các công cụ tìm kiếm đọc các trang có dữ liệu riêng tư. Xem hướng dẫn của google để biết thêm thông tin.

Mở đồ thị, thêm thẻ meta đồ thị twitter

Đánh dấu Open Graph và Twitter Graph là một tập hợp các thẻ meta giúp các liên kết đến trang web của bạn trông hấp dẫn hơn khi bạn chia sẻ chúng trên Facebook và Twitter. Mạng xã hội hiện nay khá phổ biến, vì vậy chúng ta không nên miễn các thẻ này. Giúp người dùng mới yêu thích nội dung của bạn dễ dàng hơn trước khi họ truy cập trang web của bạn.

Tất cả nội dung đều có liên quan và cập nhật

Trước khi phát hành, cũng cần phải kiểm tra mức độ liên quan của nội dung của trang web: tất cả nội dung đó có liên quan đến sản phẩm không? Có thể thông tin đã lỗi thời, hoặc ở đâu đó có thể tìm thấy Lorem ipsum.

TrÏnh theo dþi phân tích

Các trình theo dõi phân tích như Hotjar và Google analytics rất cần thiết khi bạn đang cải thiện trải nghiệm người dùng trên trang web của mình và xây dựng chiến dịch tiếp thị. Nhưng hãy đảm bảo rằng chúng là cần thiết vì tất cả các tập lệnh bổ sung đang làm giảm hiệu suất của trang web.

development with love UysrC cLVC 640

Hãy bắt đầu nào

Mỗi sản phẩm là một hộp đựng riêng biệt, bao gồm nhiều chi tiết. Như chúng tôi đã nói, một số yếu tố có thể dễ dàng bị lãng quên chỉ vì bạn vĩnh viễn không cần đến chúng. Để hoàn thành sản phẩm, chúng tôi đã sử dụng danh sách kiểm tra trước khi phát hành đã tạo.

Chúng tôi luôn suy nghĩ về tất cả các lựa chọn có thể để cải thiện sản phẩm của bạn, luôn đề phòng chất lượng kỹ thuật số. Hãy kiểm tra trang web của bạn. Chúng tôi sẽ làm điều đó một cách nhẹ nhàng nhưng chất lượng.

SẾn sàng thảo luận vᝁ d᝹ ån
cᝧa bấn?

Liên hệ với chúng tôi