Việc đưa một trang web lên không còn khó khăn nữa, ít nhất là trên bề mặt. Bất kỳ ai cũng có thể yêu cầu thiết lập một trang web cho bạn. Nhưng bí mật về một trang web hiệu suất cao là những gì được thực hiện ở phần phụ trợ của cấp độ máy chủ và có độ phức tạp về kỹ thuật mà hầu hết các nhà thiết kế web không quan tâm hoặc không có kiến ​​thức. Hãy cùng khám phá một số bí mật này sẽ thúc đẩy trang web của bạn tăng vọt với điểm PageSpeed ​​và YSlow tốt hơn (để SEO tốt hơn) và đặc biệt là đối với người dùng di động.

Sai lầm của thiết kế web

Đối với một số khách hàng, tất cả những gì họ quan tâm là một trang web "đẹp". Họ muốn có những màn trình diễn hào nhoáng, với hình ảnh toàn màn hình, video nặng và các loại kịch bản hào nhoáng. Đối với những khách hàng này, họ có quan niệm sai lầm rằng khách hàng trả tiền và khách truy cập thích các trang web theo cách này. Thật không may, đó là một sai lầm vẫn được hỗ trợ bởi một số cơ quan và nhà thiết kế web, những người không hiểu rõ hơn, hoặc quá ngại dành thời gian để giải thích cách các trang web thực sự hoạt động.

Bạn thấy đấy, một trang web tốt là nhằm cung cấp thông tin với lời kêu gọi hành động (CTA) để khách truy cập có thể được chuyển thành khách hàng tiềm năng và khách hàng. Do đó, một trang web tốt phải phục vụ 2 mục tiêu chính:

  1. Có thể được tìm thấy bởi khách truy cập thông qua các công cụ tìm kiếm (nghĩ rằng Google).
  2. Phải nhanh chóng cho bất kỳ khách truy cập nào trên khắp thế giới, đặc biệt là vì chúng ta đang sống trong nền kinh tế toàn cầu hiện nay, với Amazon là ví dụ điển hình.

Cả hai mục tiêu chính này đều gắn bó mật thiết với nhau. Google sẽ chỉ lập chỉ mục trang web của bạn nếu nó có liên quan (không chứa đầy "spam"), an toàn (không có phần mềm độc hại hoặc quảng cáo độc hại), nhanh (nội dung được tối ưu hóa) và thân thiện với thiết bị di động. Không đạt bất kỳ một trong những tiêu chí này sẽ phạt trang web của bạn và ngày càng bị chìm sâu hơn trong chỉ mục của Google.

Và cho người dùng? Người dùng thiếu kiên nhẫn và ngày càng như vậy.

Nếu trang web của bạn tải rất chậm trên Wi-Fi công cộng hoặc thiết bị di động, chúng sẽ tiếp tục (theo một chỉ số có thể đo lường được gọi là "tỷ lệ thoát"). Nếu trang web của bạn nặng và chậm, khách truy cập sẽ đợi vài giây và nhấp chuột vào nơi khác. Bạn vừa đánh mất cơ hội duy nhất để thu hút khách hàng tiềm năng mới.

Một số nhà thiết kế web sẽ chạy trang web nguyên mẫu của bạn trên một đĩa cục bộ, điều này rõ ràng sẽ không bị phạt tốc độ và bạn có thể không nhận ra trang web của mình sẽ chậm như thế nào trong đời thực. Một số có thể lưu trữ trang web nguyên mẫu của bạn trong đường trục sợi cục bộ và bạn cũng có thể nghĩ rằng trang web chạy khá nhanh. Nhưng thực tế là trang web sẽ chỉ có vẻ nhanh nếu bạn ở trên cùng một đường trục và không trải qua quá nhiều bước.

Thiết kế cho điện thoại di động cũng không phải là dễ dàng như nó có vẻ. Hầu hết các nhà thiết kế web sẽ sử dụng chủ đề CMS (hệ thống quản lý nội dung) "đáp ứng" và trong các trường hợp thông thường, trang web của bạn sẽ có thể được xem trên điện thoại di động.

Tuy nhiên, điều ác là ở chi tiết và nhiều chủ đề như vậy sử dụng các khuôn khổ rất nặng và sẽ kéo tốc độ trang web của bạn xuống, đặc biệt là đối với điện thoại di động và sẽ xếp hạng kém trong các bài kiểm tra trên thiết bị di động.

Bây giờ, hãy để chúng tôi kiểm tra cách kiểm tra trang web của bạn để xem có thân thiện với Google, băng thông và thân thiện với thiết bị di động hay không.

Giáo dục thiên lệch là một vấn đề

Nhiều trường học tập trung vào thiết kế web và quên rằng PHÁT TRIỂN cũng giống như, hoặc thậm chí quan trọng hơn thiết kế khi nói đến việc đưa một trang web tốt lên.

Và vì nhiều người chỉ tập trung vào tính thẩm mỹ hơn là sự phức tạp về kỹ thuật, thành phần phát triển còn thiếu trong rất nhiều nhân viên trang web ngoài kia. Tôi biết, như tôi đã phỏng vấn vô số ứng viên, và hầu hết đều thiếu loại công việc tôi cần hoàn thành. Ngay cả các nhà cung cấp dịch vụ lưu trữ web cũng không được miễn trừ.

Tôi đã nói chuyện với các đồng nghiệp rất thân thiện trong lĩnh vực hỗ trợ kỹ thuật của các công ty lưu trữ web, và họ đủ thành thật để thừa nhận với tôi rằng những gì tôi đã trao đổi với họ "trên mức lương của họ" (trích dẫn lời nói của họ). Tôi đã phải tự mình khắc phục sự cố và giải quyết nhiều phức tạp kỹ thuật trong suốt chặng đường dài gian khổ kể từ năm 1996 đến nay (21 năm!).

Trang web có thực sự thân thiện với thiết bị di động không?

Thật dễ dàng để có được một chủ đề thân thiện với thiết bị di động (đáp ứng) tự động hoạt động. Điều mà nhiều người không nhận ra là một trang web không chỉ phải tương thích về mặt hình ảnh với điện thoại thông minh mà còn phải tương thích về băng thông - tức là thực sự tải đủ nhanh trên thiết bị di động trên kết nối 3G hoặc có thể là 4G.

Cách miễn phí và đơn giản để kiểm tra trang web của bạn là với chính trình duyệt mà vua của các công cụ tìm kiếm đã tạo ra - google Chrome trình duyệt.

Trong trình duyệt của Những công cụ phát triển tùy chọn, chọn mạngthrottling các tùy chọn và chọn "3G tốt"(một ước tính tốt cho nhiều người dùng điện thoại thông minh ở khu vực này của thế giới phát triển) và nhấp vào"Vô hiệu hóa bộ nhớ cache".

Ở cuối màn hình, bạn sẽ thấy 3 bản đọc:

  • yêu cầu,
  • (dữ liệu) Chuyển
  • Kết thúc (thời gian tải trang đầy đủ).

Yêu cầu càng ít, dữ liệu được truyền càng nhỏ và Kết thúc (thời gian tải trang đầy đủ) càng ngắn, thì trang web của bạn càng thân thiện với thiết bị di động về mặt băng thông di động.

Ví dụ: trang web của chúng tôi thực hiện 23 Yêu cầu, có dung lượng 640kB và tải đầy đủ trong 6.6 giây trên kết nối 3G di động.

20170423_chrome3g_mb1

Kiểm tra điều chỉnh mạng Chrome - trang web của riêng chúng tôi

Đây là ví dụ về một trang đại lý thiết kế web, trang này thực hiện 79 Yêu cầu, có kích thước khổng lồ 1.5 MB và tải trong 9.81 giây trên kết nối 3G di động.

20170423_chrome3g_webdevcd1

Kiểm tra điều chỉnh mạng Chrome - một cơ quan thiết kế web

Đây là cửa hàng thương mại điện tử do chúng tôi thiết kế, lưu trữ 50 lựa chọn sản phẩm trên trang này và thực hiện 70 Yêu cầu, có kích thước 1.1 MB (do 50 sản phẩm) và tải xong trong 9.76 giây.

20170423_chrome3g_ecommepshub1

Kiểm tra điều chỉnh mạng Chrome - một trang web thương mại điện tử mà chúng tôi đã phát triển

Đây là cửa hàng thương mại điện tử của một công ty khác, với 244 Yêu cầu, kích thước 6.7 MB và tải xong trong 39.91 giây. Nó cực kỳ không thân thiện với người dùng di động và tỷ lệ thoát sẽ cao. Sẽ là khôn ngoan hơn nếu giảm số lượng yêu cầu trên mỗi trang với thiết kế thông minh hơn, và do đó giảm tổng kích thước trang và thời gian tải trang.

20170423_chrome3g_ecommchallgr1

Kiểm tra điều chỉnh mạng Chrome - một trang web thương mại điện tử địa phương lớn

Mặc dù chúng tôi có thể đo lường mức độ thân thiện của một trang web với thiết bị di động và băng thông tương ứng của nó, nhưng điều gì sẽ quyết định hiệu suất này? Chúng ta sẽ tìm hiểu một chút.

Kỹ năng quản trị máy chủ và bảo mật là rất quan trọng

Đối với một trang web CMS điển hình, nhà thiết kế web điển hình chỉ chỉnh sửa phần WordPress của nó, với các chủ đề, plugin và nội dung (văn bản, hình ảnh và liên kết đến video và nội dung khác). Nó thực sự không phải là khoa học tên lửa và thậm chí sau đó, nhiều nhà thiết kế web thất bại ở thành phần quan trọng là bảo mật trang WordPress đúng cách.

Tôi có đặc ân là một chuyên gia bảo mật từ năm 1996 và đã thực hiện lập trình bảo mật và tư vấn ở các cấp chiến lược, để ít nhất hiểu được những gì cần phải làm. Nhưng nhiều nhà thiết kế trẻ sẽ không có nhiệm kỳ hoặc kiến ​​thức này. Đối với các plugin bảo mật của WordPress, việc định cấu hình sai có thể làm hỏng trang web (500 lỗi bị cấm) và thậm chí khóa hoàn toàn người dùng hợp pháp. Và việc thiếu bảo mật có thể khiến trang web bị sập rất dễ dàng thông qua các cuộc tấn công DDoS (từ chối dịch vụ phân tán) và các cuộc tấn công vũ phu thường xuyên. Đây là một yếu tố quan trọng và không được coi nhẹ.

Một số nhà thiết kế web không tập trung (hoặc không có chuyên môn về) quản trị máy chủ, điều này tạo ra sự khác biệt trong Điểm PageSpeed ​​và YSlow, cũng như hiệu suất di động, vì nhiều tham số này chỉ có thể được định cấu hình trên máy chủ.

Một trang web tốt có chất lượng SEO (tối ưu hóa công cụ tìm kiếm) và tối ưu hóa nội dung cần có kiến ​​thức về lập trình và quản trị máy chủ, chẳng hạn như Apache cấu hình / bảo mật máy chủ web, PHP ngôn ngữ kịch bản và SQL quản lý cơ sở dữ liệu để điều chỉnh WordPress CMS. Các kỹ năng kỹ thuật này là lĩnh vực của các lập trình viên và nhà phát triển.

Một số thông tin cơ bản có thể giúp ích cho hiệu suất và bảo mật trang web của bạn, nhưng có thể bị các nhà thiết kế đơn thuần bỏ qua, cũng là các phiên bản của phần mềm máy chủ web Apache (hoặc phần mềm máy chủ web tương đương khác), PHP và SQL.

Ví dụ: bạn có ít nhất đang chạy Apache 2.4x, PHP 7 và MariaDB 10 không? Một lần nữa, những điều này sẽ yêu cầu một số điều chỉnh để làm cho trang web của bạn hoạt động bình thường.

GTmetrix giải cứu

GTmetrix là một nền tảng thử nghiệm tuyệt vời để kiểm tra tốc độ và tối ưu hóa trang web của bạn. Nếu bạn đang chọn một nhà thiết kế web hoặc đại lý, hãy sử dụng GTmetrix làm bài kiểm tra quỳ cho các kỹ năng của họ. Một nhà thiết kế hoặc đại lý giỏi ít nhất phải có khả năng tối ưu hóa trang web của họ về tốc độ.

Có 2 điểm mà bạn cần biết, Tốc độ trangYSlow, là những cách phổ biến để những người làm trong ngành đo lường tốc độ và tối ưu hóa của một trang web, đồng thời tìm ra cách cải thiện trang web cho phù hợp.

Dễ dàng đạt được điểm Tốc độ trang cao hơn, trong khi điểm YSlow nghiêm ngặt hơn nhiều. Bạn có thể đạt điểm B cho Tốc độ trang và cũng có thể đạt điểm D cho YSlow. Theo ý kiến ​​của tôi, một trang web tốt phải là A cho PageSpeed ​​và B hoặc tốt hơn cho YSlow.

Điểm số trang web của bạn là gì?

Ngoài điểm PageSpeed ​​và YSlow, các yếu tố quan trọng khác mà bạn có thể phân biệt từ GTmetrix là:

1) Thời gian tải đầy đủ - một thước đo thực sự về tốc độ và kích thước của một trang web, vì một số người có thể sử dụng "lười tải"để tải hình ảnh không đồng bộ, nhưng người dùng vẫn cần tải toàn bộ trang để đọc mọi thứ.

2) Tổng kích thước trang - nó có đủ nhỏ cho điện thoại di động không? Băng thông của trang web có thân thiện với Wifi hoặc 3G công cộng chậm không? Đây là lúc bạn cần sự tỉnh táo hơn là sự ám ảnh. Một trong những lỗi phổ biến của các nhà thiết kế web (bao gồm cả một số cửa hàng lớn) là hình ảnh không được tối ưu hóa cho Web. Ví dụ: bạn KHÔNG cần hình ảnh 4,000 pixel (chiều rộng) cho Web, hình ảnh này có ý nghĩa hơn đối với bản in. Một hình ảnh 1,200 pixel (chiều rộng) với độ nén hình ảnh tối ưu là đủ tốt. Ngoài ra, cung cấp "hình ảnh được chia tỷ lệ", đòi hỏi nhiều hơn từ nhà thiết kế web, nhưng sẽ giúp ích với Tốc độ trang và hiệu suất. Hãy nhớ rằng thị giác của con người dựa trên logic mờ và rất phức tạp để tạo ra các chi tiết mà không cần độ phân giải cao hoặc đầy đủ. Là người tiên phong trong lĩnh vực thiết kế phương tiện tương tác từ năm 1986, tôi đảm bảo với bạn rằng có rất nhiều thủ thuật đáng kinh ngạc mà người ta có thể sử dụng để giảm kích thước hình ảnh xuống đáng kể và làm cho trang web trở nên nhẹ nhàng.

3) yêu cầu - số lượng yêu cầu HTTP đến các trang web và máy chủ khác nhau để đáp ứng việc cung cấp toàn bộ trang. Một số trang web thực hiện hàng trăm yêu cầu máy chủ, quá nhiều. Đối với các yêu cầu hợp pháp như CSS (các biểu định kiểu xếp tầng) và JS (Javascript), hãy kết hợp và rút gọn chúng nếu có thể. Nội tuyến các tệp CSS và JS nhỏ bất cứ khi nào bạn có thể. Các lệnh gọi HTTP không cần thiết có thể làm giảm khả năng sử dụng của trang web, tăng tỷ lệ lỗi, giảm tốc độ và cũng gây ra các lo ngại về bảo mật và quyền riêng tư. Những yêu cầu như vậy thường xảy ra với miền cookie, nhà cung cấp quảng cáo, nền tảng video, nền tảng truyền thông xã hội, v.v. Sử dụng các yêu cầu một cách thận trọng. Nếu cần, hãy chọn các mẫu số thấp nhất và hợp nhất hoặc sắp xếp hợp lý các yêu cầu.

4) Bộ nhớ đệm - ngoài bộ nhớ đệm cấp máy chủ, bạn cũng có thể tận dụng bộ nhớ đệm của trình duyệt để cho phép người dùng của bạn lưu nội dung vào bộ nhớ đệm trên đĩa của chính họ. Điều này sẽ giảm thời gian tải khi khách truy cập của bạn quay lại, vì họ đã lưu vào bộ nhớ cache một số nội dung. Bạn có thể cấu hình điều này tại phần phụ trợ của máy chủ. Và trên trang web của bạn, hãy định cấu hình một plugin bộ nhớ đệm chất lượng tốt.

5) GZip - cấu hình máy chủ của bạn để phục vụ nội dung nén, đặc biệt là các tệp văn bản như HTML, JS và CSS. Một số trang có thể được nén lên đến 70% và sẽ giúp cải thiện thời gian tải tổng thể của bạn.

6) Cố sống đi - cấu hình Apache của bạn để kích hoạt các kết nối HTTP liên tục để các kết nối giống nhau có thể gửi và nhận các yêu cầu đồng bộ, tăng tốc độ cho người dùng của bạn.

7) Hết hạn tiêu đề - một cấu hình cấp máy chủ khác có thể được cấu hình trên máy chủ hoặc trên cấp độ trang web. Hầu hết nội dung có thể có tiêu đề hết hạn được chỉ định, trong đó nội dung tạm thời như văn bản có thể có thời hạn ngắn hơn, trong khi hình ảnh, video, tài liệu và tập lệnh có thể hết hạn lâu hơn vì chúng ít có khả năng thay đổi thường xuyên. Lưu ý là với một số tập lệnh bên ngoài (chẳng hạn như tập lệnh của Google), vì chúng tôi sẽ không có quyền kiểm soát cấp máy chủ đối với những tập lệnh đó và vì vậy chúng tôi không thể chỉ định tiêu đề hết hạn cho chúng.

Dưới đây là ví dụ về điểm GTmetrix của chúng tôi, hiển thị A cho cả Tốc độ trang và YSlow, với Thời gian tải đầy đủ rất ngắn (1.8 giây), Tổng kích thước trang nhỏ (693kB) và 22 yêu cầu:

20170423_gtmetrix_mb1

Điểm GTmetrix - trang web của riêng chúng tôi

Đây là ví dụ về một nhà cung cấp dịch vụ lưu trữ web, có E cho Tốc độ trang và YSlow, với Thời gian tải đầy đủ là 7 giây, Tổng kích thước trang 2.22 MB và 170 yêu cầu đáng kinh ngạc.

20170422_gtmetrix_sgwebhost1

Điểm GTmetrix - một máy chủ web lớn

Đây là ví dụ về một đại lý thiết kế web, có A cho Tốc độ trang nhưng C cho YSlow, với Thời gian tải đầy đủ 23.9 giây thực sự chậm, Tổng kích thước trang là 2.66 MB, với 52 yêu cầu.

20170422_gtmetrix_sgwebdesign1

Điểm GTmetrix - một đại lý thiết kế web

Tăng CDN

Mạng phân phối nội dung (CDN) có thể tăng thêm phần tăng cường, mặc dù điều đó không hoàn toàn cần thiết nếu bạn đã thực hiện cấu hình chất lượng tốt để cho phép điểm A cho Tốc độ trang. YSlow gắn một giá trị vào các CDN, vì vậy nếu bạn không chạy CDN, điểm YSlow của bạn sẽ giảm. Có nhiều CDN khác nhau và càng nhiều càng tốt, hãy CHI TIẾT trên một CDN tốt vì các CDN miễn phí sẽ không bao giờ hoạt động hiệu quả như CDN chuyên dụng trả phí. Không có bữa trưa miễn phí trên thế giới.

Vì vậy, nếu bạn có một trang web, tôi khuyên bạn nên thử nghiệm nó với GTmetrix và Google Chrome ngay bây giờ, và hiểu những gì có thể được cải thiện. Nếu điểm số quá thấp và đáng lo ngại, đừng lo lắng, vì có những kỹ thuật đã được chứng minh trên máy chủ của bạn để giúp mọi thứ diễn ra đúng đắn. Sẽ không phải là một chuyến đi bộ ngắn dễ dàng trong công viên, nhưng sẽ rất đáng giá khi bạn nhận được điểm số của mình và giảm các hình phạt về SEO. Và nếu bạn chưa có trang web và đang nói chuyện với các đại lý và nhà thiết kế web tiềm năng, hãy kiểm tra trang web của riêng họ dựa trên GTmetrix và Google Chrome. Sau đó, tìm những người phù hợp để giúp bạn tiến lên.