36 Cách tối ưu tốc độ Load trang WEB theo lời khuyên của Google
Cải thiện tốc độ tải trang web
Hiện nay có nhiều người sử dụng điện thoại để đọc và tìm kiếm thông tin. Số lượng người dùng sử dụng điện thoại thông minh để tìm kiếm thông tin đã nhiều hơn người dùng sử dụng máy tính cho thấy được tầm quan trọng của việc phát triển một trang web di động có tốc độ tải cao đáp ứng được nhu cầu ngày càng cao của người dùng.
Người dùng di động có kì vọng rất cao 74% người dùng sẽ rời khỏi trang web nếu trang web mất >5s để tải, 52% người dùng kì vọng một trang web sẽ tải trong 2s và 88% người dùng sẽ không trở lại trang web nếu trang web khiến người dùng có những trải nghiệm không tốt.
Một thử thách lớn cho các nhà xuất bản hiện nay là cân bằng giữa việc tối ưu hóa trải nghiệm người dùng với việc kiếm thêm người dùng và kiếm tiền.
Vì người dùng ngày càng có kỳ vọng cao và khó tính hơn nên việc làm sao để trang web tải nhanh là một điều hết sức quan trọng đảm bảo giữ chân người dùng lại website của bạn và tăng doanh thu Adsence đến từ trang web của bạn.
Hiện nay cứ một trong ba người dùng chia sẻ là tốc độ tải trang là quan trong nhất khi sử dụng trang web trên di động và 74% người dùng sẽ rời khỏi trang web nếu trang mất hơn 5s để tải. Trong một cuộc khảo sát trải nghiệm người dùng khi được hỏi điều gì bạn không thích nhất khi xem một trang web trên di dộng thì những người khảo sát đã đưa ra các lí do sau:
- Video không chạy được ——14%
- Trang web di động tự điều hướng về trang chủ——13%
- Trang web hiển thị quảng cáo quá nhiều——16%
- Trang web phải chờ lâu để tải ——-46%
Điều đó cho thấy một lần nữa yếu tố tốc độ là vấn đề được đặt lên hàng đầu. Trong cuộc đua giành người dùng và tìm kiếm người dùng mới trên internet thì chậm là yếu tố khiến bạn thất bại.
Khi đặt một so sánh giữa các trang web có tốc độ tải trong 3s và 5s với mốc là trang web tải trong 1s thì cho thấy được trang web tải trong 3s có lượng pageview ít hơn 22% lượng chuyển đổi ít hơn 22% và tỉ lệ thoát nhiề hơn 50%
Trang web mất 5s để tải thì lượng pageview ít hơn 35% lượng chuyển đổi ít hơn 38% và tỉ lệ thoát nhiều hơn 105%
Những số liệu trên cho thấy sự mật thiết tốc độ tải web với lượng pageview, lượng chuyển đổi và tỉ lệ người dùng thoát trang
Khi trang web tải trong 2.4s thì tỉ lệ thoát chỉ là 13% khi trang web tải trong 3.3s thì tỉ lệ thoát chỉ là 20% và khi trang web mất tới 10s để tải thì 58% người dùng sẽ rời khỏi trang web.
Sau đây là một số ví dụ về trang web nổi tiếng trên thế giới nhưng nhiều lúc vẫn chưa tối ưu được tốc độ tải trang web của mình và có những trang phải mất đến hơn 10s để tải.
Xem thêm: Google Adsence: 10 Phương pháp tối ưu hóa Doanh thu cho trang
Đôi khi không phải trang web mình tải nhanh như thế nào mà người dùng cảm nhận ra sao khi xem trang web của bạn.
Google có một số công cụ giúp bạn đo lường xem trang của bạn tải như thế nào
Ví dụ: Speed index đo thời gian trung bình mà những phần trang web hiển thị ra trước mắt người đọc. Công cụ này đo theo mili second và là đơn vị đo lường tốt để xem trang của bạn có hiển thị đúng các phần cần hiển thị hay không
Công cụ khác như PSI score là công cụ đo thang điểm từ 1 đến 100 cho bạn biết trang của mình tải nhanh hay chậm như thế nào nếu trang của bạn có điểm 85/100 thì bạn nên xem kĩ các gợi ý cụ thể cách khắc phục và tăng tốc độ tải trang web.
Nên kết hợp cả hai công cụ Speed Index và PSI score để có thể theo dõi và đo lường chất lượng hoạt động của trang web của mình và có thể tạo cảm giác cho người dùng là trang web tải nhanh thì bạn nên xem xét tải trước các thành phần ở nửa trên của trang trước để người dùng nhìn thấy trước và tiếp tục tải dần các thành phần khác sau.
Xem thêm: Tầm quan trọng, nguyên nhân Web Load chậm và cách tối ưu Tốc độ Load
Bạn cần đảm bảo nội dung trên màn hình người dùng nhìn thấy tải xong và hiển thị trong vòng 1s có thẻ gọi phương pháp này là lazy loading nghĩa là tải dần ra trong quá trình người dùng kéo chuột xuống phía dưới. Bên cạnh đó bạn nên dùng inline CSS để chia CSS ra làm hai và sử dụng inline CSS cho phần nửa trên màn hình, tải nội dung chính ra trước tải các widget của bên thứ ba ra sau.
Các chuyên gia Google gợi ý điểm chấm trang web trên công cụ PSI trên 85 thì mới được cho là một trang web có tốc độ tải tốt.
Sau đây là những việc làm tốt nhất để tối ưu trang web và vui lòng download tài liệu trong trang của chương trình:
- Cái nhìn đầu tiên rất quan trọng là những gì người dùng nhìn thấy đầu tiên khi trang web được tải ra và để đảm bảo trải nghiệm tốt nhất với người dùng thì chúng ta nên tránh hiện tượng trang web tự điều hướng sang một trang khác mà người dung không mong đợi điều này tạo ra một trải ngiệm tiêu cực và ảnh hưởng đến thương hiệu hoặc website của bạn trong mắt người dùng
- Chúng ta nên cố gắng nén nhũng hình ảnh để bớt nặng và lựa chọn hình ảnh hiển thị ở đầu trang thật hiệu quả đẹp mắt để hấp dẫn người dùng
- Chúng ta nên ưu tiên tải những nội dung ở phía trên ra trước sau đó mới từ từ tải các nội dung còn lại nên sử dụng inline, internal CSS và Javascript
- Chúng ta nên hạn chế server hit bằng cách bật HTTPS, HTTP2 và tận dụng browser caching để tăng tốc độ tải web tối thiểu thời gian cần để tải một nội dung nào đó. Khi dung browser caching thì khi người dùng quay lại một trang web thì rất nhiều thành tố của trang đã có sẵn và không mất thời gian để tải lại
- Tối ưu việc hiển thi nội dung giảm thiểu thời gian truyền và phản hồi từ server và nên nén với gzip
Sau đây là một số lí do khiến cho việc tải trang web trở nên chạm khi ở trên di động:
- Hình ảnh quá nặng nhiều khi hình ảnh chiếm hết 63% dung lượng trang web và để khắc phục thì nên chọn hình ảnh đúng kích cỡ cần thiết và luôn luôn phải nén hình ảnh
- Có quá nhiều resource requests, cách cải thiện là giảm thiểu thời gian tải từ server bằng cách sử dụng browser caching để requests chỉ bị gọi 1 lần và tổng hợp kết nối các resource lại để giới hạn số lần phải làm việc và kết nối với server
- Sử dụng javascript quá nhiều dẫn đến việc mỗi requests làm tăng độ phức tạp của việc tải trang web cần download và parsed cùng với trình duyệt. Chúng ta chỉ nên dùng Javascript khi thực sự cần thiết và khảo sát những trang quan trọng để xem các trang này đang dùng Javascript như thế nào
- 50% các trang web di động hiện nay sử dụng các font chữ tùy chỉnh, nếu không thiết lập các phông chữ một cách đúng đắn hoặc sử dụng phông chữ từ các nguồn bên ngoài thì tốc độ tải web sẽ bị ảnh hưởng nhiều font chữ cần rất nhiều CSS code hoặc nhiều Javascript cách giải quyết là chúng ta nên dùng phông chữ tùy chỉnh trên thiết bị di động. Chỉ dùng các font chữ này ở header và các thành phần quan trọng nhất mà thôi
- 20% trang có hơn 5 điều hướng để cải thiện chúng ta nên sử dụng công cụ SEO để kiểm tra và tìm ra các điều hướng và loại bỏ chúng đi nếu không cần thiết
- Hiện nay các trang web chứa HTTPS đã tăng gấp 5 lần và các HTTPS requests cần có thêm handshakes để bổ sung để xác minh tính xác thực của chúng điều này sẽ gây ra độ trễ của mạng nếu máy chủ không được cấu hình đúng thì có thể ảnh hưởng đến thời gian tải để cải thiện thì chúng ta có thể chạy URL của mình qua một SSL server như là ssllaps.com để xác minh xem server và các certificate khác có được thiết lập chuẩn hay chưa
Công cụ dành cho nhà lập trình để theo dõi và cải thiện tốc độ tải trang web của bạn:
Hiện nay người dùng sử dụng điện thoại di động rất nhiều và có số lượng lớn hơn máy tính. Nó đã thay đổi chiến lược của nhiều nhãn hàng và website trong việc tiếp cận và tiếp xúc với người dùng chỉ trong một thời gian ngắn lượng người sử dụng mobile web đã tăng 2.5 lần và vẫn tăng trưởng với tốc độ gấp hai lần trước đây.
Để tiếp cận người dùng trên di động thì khó khăn của các nhà xuất bản là làm sao để tạo ra một trang web tải thật nhanh tiết kiệm băng thông đường truyền internet sử dụng trang web mở và có những lời mời chào hấp dẫn thu hút người dùng.
Mình sẽ giới thiệu với các bạn một phần mềm có tên AMP. Với AMP Google muốn thúc đẩy tăng cường để các nhà xuất bản có thể tăng cường tiềm năng của các trang web mở giúp cho nội dung của họ xuất hiện khắp mọi nơi và nhanh chóng trên nhiều nền tảng trong khi vẫn đảm bảo được hai yếu tố quan trọng là đáp ứng nhu cầu người dùng muốn xem thông tin nhanh và vẫn giữ lại được các yếu tố kinh doanh như kiếm tiền từ quảng cáo.
Xem thêm: 6 Điều cần biết về AMP HTML của GOOGLE
Chúng ta sẽ đi vào tìm hiểu các thành tố chính của Google AMP HTML được dựa trên 4 yếu tố quan trọng:
Một trang AMP HTML là HTML mở rộng với khả năng mở rộng với các thuộc tính tùy chỉnh AMP một số thuộc tính bắt buộc phải sử dụng còn một số thuộc tính chỉ là adon nhưng rõ ràng là bạn càng thêm nhiều thuộc tính thì trang web càng tải chậm lại.
AMP Javascript được dựa trên tính năng ưu tiên nội dung thông minh, mà cơ bản là biết chính xác vị trí của mỗi yếu tố trên trang web do đó khi trang web được tải thì chúng tôi refresh các yếu tố đó, tính năng ưu tiên nội dung thông minh còn giúp nội dung phía trên màn hình được tải ra trước sau đó mới tải các nội dung ở dưới màn hình ra điều này giúp chi người đọc có trải nghiệm tốt dễ dàng đọc nội dung web mà không cần chờ tải.
Một khía cạnh khác của AMP là không có Javascript của bên thứ 3 ngoại trừ AMP iframe, layout của từng thành tố trên trang đã được tính trước khi tải và inline CSS được đặt tại nhà xuất bản mà không phải một bên thứ ba nào khác.
Một số font chữ tùy chỉnh sẽ làm chậm tốc độ tải trang web cho nên một số font chữ cụ thể sẽ không được cho phép ở đây và AMP card có thể host và hiển thị tất cả các trang và Google có trụ sở đặt ở nhiều nơi trên khắp thế giới để lưu giữ tập tin AMP và tải nó ra thật nhanh đến bất kì người dùng ở bất kì nơi nào.
Hiện nay có 20 quốc gia có kết quả AMP hiện ra trong trang kết quả tìm kiếm của oogle, có 4,2 triệu trang AMP được tạo ra mỗi tuần và hơn 600 triệu document trong bộ index của google từ hơn 700.000 tên miền và gần 8500 nhà lập trình github quan tâm và sử dụng AMP.
Đối với các bạn đang sử dụng WordPress thì AMP cũng có WordPress plugin vừa ra trong thời gian gần đây các bạ có thể download login này tại đường link https ://wordpress.org/plugin/amp
Có một số trường hợp plugin này sẽ xóa mất mã Google Analytics trên những trang chạy AMP vì vậy bạn nhớ thủ công lại mã code của Google Analytics vào lại trang.
Hiện nay google đã mở rộng việc hiển thị AMP trên các trang kết quả tìm kiếm và mở rộng ra nhiều lĩnh vực chứ không chỉ giới hạn ở việc tin tức và bạn cần lưu ý rằng việc sử dụng AMP sẽ không ảnh hưởng đến thứ hạng trang web của bạn trên trang tìm kiếm của Google.
Google ưu tiên cho các trang web thân thiện với thiết bị di động và xếp những trang này ở thứ hạng cao và những trang sử dụng AMP cũng được coi là những trang web thân thiện với các thiết bị di động về tính tương tự chứ không được ưu tiên thêm về thứ hạng nào nữa.
Xem thêm: 3 Khác biệt lớn giữ HTML và AMP HTML
Ngoài ra nếu bạn có hai phiên bản web là một phiên bản di động thông thường và một phiên bản AMP thì khi người dùng tìm kiếm trên di động Google sẽ ưu tiên hiển thị bản AMP và bạn sẽ thấy rằng đối với những trang web mà sử dụng AMP thì trên trang kết quả tìm kiếm của Google thì sẽ được đánh dấu hình tia chớp và có chữ AMP bên cạnh màu xám để người dùng biết được là những trang web đã được tích hợp AMP và người dùng sẽ biết rằng những trang web này sẽ được tải ra rất nhanh do đó xu hướng người dung sẽ click vào những trang có đánh dấu là AMP do vậy sẽ tăng tỉ lệ nhấp chuột và lưu lượng truy cập vào trang của bạn và giúp bạn tăng doanh thu.
Vậy việc đặt quảng cáo với AMP khác gì so với việc đặt quảng cáo thông thường. Dĩ nhiên AMP HTML là dạng HTML yêu cầu có nhiều kĩ thuật để đảm bảo trang web tải nhanh do đó sẽ ảnh hưởng tới những yếu tố khác bao gồm cả việc đặt quảng cáo.
Quảng cáo chạy trên trang AMP phải tuân thủ đúng các yêu cầu của AMP như là phải dùng thành tố AMP HTML, AMPs thay vì dùng adtag thông thường, quảng cáo phải được search trên HTTPS connections quảng cáo không được tự độn điều chỉnh kích cỡ và không được che mất nội dung bài viết, không được dùng quảng cáo toàn màn hình hoặc quảng cáo tự phóng to ra.
Các quảng cáo chuẩn AMP được load theo cách tối ưu nhất để đảm bảo cân bằng gữa tốc độ tải web và khả năng quảng cáo được nhiều người nhìn thấy.
Một số thực hành tốt nhất cho việc đặt quảng cáo trên AMP đó là bạn nên dùng các ad units mẫu quảng cáo riêng biệt dành cho AMP để dễ nhắm mục tiêu và dễ xem báo cáo riêng biệt nên đặt mẫu quảng cáo đầu tiên ngay sau một viewport thường là khoảng 700 pixels.
Tránh dùng các mẫu quảng cáo nặng nên dùng các mẫu quảng cáo hoạt động tốt cho di động như kích cỡ 300×250 hoặc quảng cáo native và chỉ hiển thị quảng cáo trong một màn hình bất kì
Hầu hết quảng cáo theo tiêu chuẩn của ngành quảng cáo trực tuyến đều chạy được trên AMP ví dụ như quảng cáo trực tiếp, quảng cáo văn bản, quảng cáo video.
Sau những yếu tố kĩ thuật cần có và hiệu quả mà AMP mang lại thì mình mong là các bạn cũng cảm thấy hào hứng giống như mình và sẽ tích hợp AMP vào trang web của mình.
Xem thêm: Học SEO miễn phí với Lamvt là thế đấy
