background-blog

Blog

Tốc độ website | Đừng rơi vào tầm ngắm của Google!

Tối ưu tốc độ website

Bạn đang gặp tình trạng tốc độ website chậm? Bạn muốn biết cách kiểm tra tốc độ website? Và sau đó tối ưu hoặc tăng tốc website lên tầm cao mới? Tất cả sẽ được giải quyết trong bài viết dưới đây.

Hiểu đúng về tốc độ website 

Tốc độ website là gì?

Tầng 1:
Nếu bạn chỉ là người dùng thông thường thì tốc độ web đơn giản là “thời gian thực tế” để tải hết: hình ảnh, chữ viết, nút ấn, video…(gọi chung là tài nguyên) trên website.
Tầng 2:
Nếu bạn là người làm SEO thì tốc độ không chỉ là yếu tố ảnh hưởng đến người dùng mà đây còn là yếu tố xếp hạng quan trọng.
Bạn biết đấy! google khá thờ ơ và lửng lơ trong chuyện xếp hạng một website. Nhưng tốc độ là thứ họ “luôn luôn đề cập đến” mỗi lần có ai hỏi: Google? Bạn xếp hạng website theo tiêu chí nào?
Tầng 3:
Nếu là dân kỹ thuật thì tốc độ tải trang được hiểu là thời gian từ khi người dùng thực hiện truy vấn đến khi tải hết tài nguyên từ server về trình duyệt người dùng.

=> Vậy tốc độ tải trang là tốc độ “thực tế” khi người dùng truy cập website và nhận được nội dung chính trên trang web đó. Tức mọi thứ bạn làm đều phải hướng tới người dùng ở tầng 1.

Phải làm rõ vấn đề này vì nhiều bạn lầm tưởng tốc độ (thực ra là điểm tốc độ) trên các tool check tốc độ là tốc độ thực tế của website. Khi sang phần tool test tốc độ tôi sẽ nói rõ hơn về vấn đề này.

Tại sao tốc độ lại quan trọng ?

Đơn giản, người dùng tầng 1 sẽ đi mất nếu phải chờ đợi quá lâu, tầng 2 sẽ chẳng được gì sau bao nỗ lực làm SEO và tầng 3 sẽ bị sếp la vì website chạy quá chậm.

Thống kê của Analytic như sau:
Nếu thời gian tải trang tăng từ 1 giây lên 3 giây, tỷ lệ thoát sẽ tăng 32%
Nếu thời gian tải trang tăng từ 1 giây lên 6 giây, tỷ lệ thoát sẽ tăng 106%

Thống kê của google cho biết:
53% mọi người sẽ rời khỏi trang di động nếu mất hơn 3 giây để tải. Các trang được google coi là có tốc độ chậm thì sẽ bị giảm thứ hạng.

Có thể bạn muốn xem thêm: báo cáo tốc độ được gợi ý bởi Google Analytic

Cách kiểm tra tốc độ website

Có rất nhiều công cụ thống kê “điểm tốc độ” website như: GTMetrix, Pingdom, Google’s PageSpeed Insights, Yslow,…Analytic.

Ở đây tôi xin giới thiệu cho bạn 3 công cụ thần thánh:

Hai công cụ của google là Google’s PageSpeed Insights và Google Analytic, công cụ thứ ba là chính bạn.

Thực tế để test tốc độ một trang cần có hai dữ liệu là: dữ liệu phòng thí nghiệm (tool) và hiện trường (người dùng-chính bạn). Và dữ liệu người dùng là quan trọng hơn cả.

– Đo tốc độ website bằng tay

Bạn thực hiện gõ tên miền lên google và dùng cảm quan của mình đánh giá. Đó là tốc độ thực tế website của bạn. Nếu bạn hài lòng rất có thể đa số khách hàng ngoài kia đều hài lòng.

Rất nhiều trường hợp, điểm tối ưu tốc độ cao nhưng web chạy chậm. Vì vậy, chính bạn vẫn là người kiểm tra tốt nhất và gần nhất đối với người dùng.

? Bạn đặt câu hỏi: Vậy, cảm quan tôi thấy web đã chạy nhanh. Có cần tối ưu không?
CÂU TRẢ LỜI LÀ CÓ – vì đây là yếu tố ảnh hưởng đến thứ hạng seo website của bạn.

– Check tốc độ website bằng Google Analytic

Vì sao tôi chọn hai công cụ của google – đơn giản đây là sân chơi của google. Vì vậy, tối ưu theo google là tốt nhất!

Cách xem dữ liệu tốc độ trên analytic.
Bước 1: Đăng nhập vào Google Analytics.
Bước 2: Chuyển đến chế độ xem của bạn.
Bước 3: Mở Báo cáo.
Bước 4: Chọn Hành vi > Tốc độ trang web.

xem-du-lieu-toc-do-tren-analytic

Xem dữ liệu tốc độ trên Analytic

Dữ liệu này sẽ giúp bạn có những báo cáo nhanh phục vụ cho quản trị web. Để biết điểm tốc độ và cách cải thiện chúng bạn nên sử dụng công cụ page speed insight.

– Kiểm tra tốc độ website – Page Speed Insight (PSI)

Theo page speed insight

PSI là công cụ của google cung cấp cả dữ liệu “phòng thí nghiệm” và “hiện trường” –  về một trang.

Dữ liệu phòng thí nghiệm rất hữu ích để gỡ lỗi các vấn đề về hiệu năng, vì nó được thu thập trong một môi trường được kiểm soát. “Tuy nhiên, nó có thể không nắm bắt được các nút thắt trong thế giới thực”.

Dữ liệu thực địa rất hữu ích để ghi lại trải nghiệm người dùng thực, trong thế giới thực – nhưng có bộ số liệu hạn chế hơn.

Bạn có thể chú ý vào dòng – “Tuy nhiên, nó có thể không nắm bắt được các nút thắt trong thế giới thực” và “Rất hữu ích để gỡ lỗi các vấn đề về hiệu năng”

PSI muốn nối với bạn rằng dữ liệu bạn thấy là dữ liệu thí nghiệm: vì vậy, nó là công cụ để đo “điểm tốc độ” và gợi ý “phần nào cần tối ưu website” nó chưa chắc phản ánh 100% thực tế. 

=> Vì vậy, điểm được đưa ra trên PSI hay các tool check tốc độ khác là điểm tối ưu chứ không hẳn là tốc độ thực tế của trang web.

xem-du-lieu-toc-do-tren-google-speed

Xem dữ liệu tốc độ với google speed

Bước 1: Truy cập tool: https://developers.google.com/speed/pagespeed/insights/
Bước 2: Bỏ tên miền vào ô phân tích – ví dụ: http://xinchaobandangxembaivietnay.vn/ hoặc http://xinchaoban.vn/
Bước 3: Nhấp vào ô phân tích
Bước 4: Nhận kết quả ở ô: Thiết bị di động | Ô máy tính

Sau khi đã rõ công cụ, biết được những điểm cần tối ưu hóa website: chúng ta đi tối ưu tốc độ web như sau:

Tối ưu tốc độ website:

Để tối ưu website chúng ta phải hiểu cách vận hành của nó:

Để tạo nên website ta cần các yếu tố cơ bản.
(1) Máy chủ server (hosting – không gian lưu trữ được chia ra từ server) 
(2) Nội dung web: Bộ files, tài liệu, và database (file code CSS, JS, Html, nội dung, hình ảnh, video…).
(3) Tên miền  
(4) Mạng internet.

Sự việc diễn ra như sau:
Bất kể có người nào gõ tên miền lên thanh địa chỉ của trình duyệt, hosting sẽ chuyển toàn bộ files cần thiết từ server xuống trình người đó.

Như vậy:  (1) vị trị bạn càng xa sever, không gian lưu trữ càng yếu | (2) file nội dung càng nặng |  (4) mạng càng chậm thì tốc độ càng chậm.

Vì vậy, ngoài tốc độ mạng phụ thuộc vào những “chú cá mập hư” ra thì những yếu tố khác bạn đều có thể lựa chọn để áp dụng vào website của mình.

Có rất nhiều yếu tố ảnh hưởng đến tốc độ website – sau đây sẽ là checklist những yếu tố quan trọng nhất bạn có thể cải thiện:

> Tối ưu tốc độ cơ bản
Cách tối ưu tốc độ website
1. Tối ưu dung lượng ảnh (nén ảnh và up lại ảnh đã nén lên website).
2. Tối ưu JS, CSS
3. Giảm thời gian phản hồi máy chủ (vào Cpanel bật web optimize – nếu chưa bật)
4. Xóa những plugin không cần thiết, nâng cấp những plugin chậm, cũ
– Cài thêm plugin rocket (hoặc plugin tương tự)… để nén web.

> Xem xét chuyên sâu
5. Bắt buộc xem lại theme và hosting.

5-cach-toi-uu-toc-do-website

Các bước tối ưu tốc độ

Checklist dưới đây sẽ sắp xếp các yếu tố theo hướng quan trọng giảm dần và mô tả cách thức tối ưu chi tiết nhất. 

Server – Hosting

Đầu tiên là server và hosting, đây gần như là hai yếu tố quan trọng nhất được xếp hạng đầu tiên. Vì tóm lại, file web bạn có tối ưu tốt đến đâu mà hạ tầng kỹ thuật không đảm bảo thì web cũng không thể vận hành trơn tru.

 + Server ảnh hưởng tới tốc độ load trang:

Điều quan trọng nhất là vị trí máy chủ – đặt càng xa thì tốc độ phản hồi của dữ liệu càng lâu. Vì vậy, bạn nên chọn những nhà cung cấp có vị trí máy chủ gần bạn.
Ngoài ra, bạn nên chọn những nhà cung cấp uy tín, bảo mật cao, ít chập chờn, ổn định.

 + Khả năng ảnh hưởng của Hosting

Hosting là không gian lưu trữ được chia nhỏ từ server (máy chủ vật lý). Bạn tưởng tưởng Server là không gian lưu trữ lớn còn hosting là một khu đất nhỏ.
Trong đó, khu đất (hosting) càng rộng càng đón được nhiều khách cùng vào website, vị trí càng gần trung tâm, đường càng rộng (băng thông, mạng) càng mượt thì khách truy cập vào càng dễ.

Dưới đây là một số chỉ số tiêu biểu của hosting cần xem xét khi mua dịch vụ:

Đối với chủ doanh nghiệp

– Loại hosting phù hợp với web của bạn:
+ Dedicated Server – Máy chủ vật lý:
Ít ai thuê nguyên cả máy chủ – trừ khi bạn có dữ liệu cực khủng như google, big, yahoo hoặc các tập đoàn dữ liệu lớn
+ Virtual Private Server (VPS) – Máy chủ ảo:
Doanh nghiệp cỡ vừa và các website đang có phát triển nhanh chóng, đón lượng truy cập đột biến.
+ Shared Hosting – Hosting dùng chung:
Doanh nghiệp nhỏ và blog Website – như website của mình này.
– Dung lượng lưu trữ : Sẽ có hai loại HDD và SSD. SSD sẽ có tốc độ xử lý nhanh hơn HDD (thường là 5GB)
– Giá cả
– Nhà cung cấp uy tín

Tip 1: tóm lại – Chọn Hosting:
+ Chọn nhà cung cấp uy tín? – Hawk Host, Mắt Bão…
+ Phải có SSD – là một ỗ đĩa giúp tối ưu hóa tốc độ.
+ Nếu có nhiều lượng truy cập thì nên dùng VPS thay vì Sharehost
— Sharehost: thuê chung, giá tốt
— VPS: thuê riêng, giá cao hơn
đa số doanh nghiệp đều chọn share hosting hoặc cao hơn là VPS có yêu cầu bắt buộc thêm SSD (giúp web có tốc độ xử lý nhanh hơn).

thong-so-hosting

Một số thông số của hosting

Tip 2:
Giảm thời gian phản hồi máy chủ: thời gian để web tải hết tệp file html (ảnh, hiệu ứng, nội dung) từ server xuống màn hình người dùng.
Nếu đã tuân thủ yếu tố trên bạn cần thêm một động tác.
Nếu bạn sử dụng trình quản lý hosting là Cpanel bạn cần:
Vào trình quản trị
Gõ lên khung tìm kiếm “optimize website”
Set up như bên dưới và ấn “SAVE”

huong-dan-giam-thoi-gian-may-chu

Giảm thời gian phản hồi trên máy chủ

Chuyên sâu hơn dành cho kỹ thuật

+ Hệ điều hành: Sẽ có 2 hệ điều hành chính là Windows và Linux. Nếu bạn muốn vận hành website WordPress tốt, hãy chọn Linux.
+ Ngôn ngữ lập trình hỗ trợ.
+ Băng thông: Băng thông hay Bandwidth là thuật ngữ dùng để chỉ lượng dữ liệu được truyền trong một giây. Thường sẽ được định lượng theo tháng, vì thế nếu hết băng thông, bạn có thể liên hệ nhà cung cấp để mở rộng. Thường (unlimited – không giới hạn).
+ Addon Domain: Lượng Addon Domain bạn có thể thêm vào host
+ Sub Domain: Lượng Sub Domain mà bạn có thể tạo.
+ Các tham số bảo mật (mã hóa kênh truyền SSL, các add-on antivirus quét mã độc)
+ Sao lưu (backup), phục hồi: Hãy đảm bảo rằng bạn sẽ có chức năng sao lưu, backup, phục hồi dữ liệu khi cần.
Cloud ssd + Linux + Băng thông

– Tối ưu file up lên website

— Tối ưu File code

File code bao gồm: html, css, js. Trong đó:
– Html là ngôn ngữ lập trình cốt lõi.
– Trong khi html chỉ cung cấp nguyên liệu thô thì CSS là để trang điểm, makeup cho website: phần hiển thị, hiệu ứng đẹp, trình bày, bố cục, thay đổi màu chữ, font chữ, lùi dòng, thụt dòng… trông phần nhìn sẽ đẹp hơn.
– JS sẽ giúp bạn thiết kế các điểm có thể tương tác, yếu tố động trên website như nút ấn, popup,…

Đây là những file cấu thành website, vì vậy các file này càng nhỏ càng tốt.
Code của web cần được nén xuống mức tối ưu – khi đó file web sẽ được tải xuống nhanh hơn => Hãy để coder của bạn tối ưu những tệp này.

— Bổ trợ – chọn theme

Theme (giao diện) là bộ khung hiện thị website của bạn. Trong thực tế bạn sẽ gặp hai trường hợp:
– Giao diện code tay
– Giao diện mẫu
Việc theme hiện thị càng đẹp, yếu tố động, bắt mắt, nhiều chức năng khiến file web càng nặng – vì vậy chọn theme nhẹ cũng là yếu tố được kể đến.

— Bổ trợ – các phần mở rộng

Ngoài thêm website, các phần chức năng cài đặt mở rộng cũng là yếu tố làm chậm website. Có những phương án sau đây:
Ví dụ đối với tối ưu tốc độ với wordpress
– Trong một plugin: tắt bớt chức năng không cần thiết
– Đối với các plugin: xóa plugin không cần thiết
– Nâng cấp plugin cũ: thường plugin sau khi có cải tiến từ nhà sản xuất sẽ chạy mượt hơn và nhanh hơn
– Xóa các plugin không cần thiết, trùng hoặc thay thế plugin cũ với một plugin mới cùng chức năng nhưng hiệu năng tốt hơn.
Tip: Bạn không nên có quá 10 phần mở rộng cùng hoạt động trên website, nhất là các phần mở rộng chỉ làm web trông đẹp hơn – nó sẽ làm chậm website đáng kể.

— Bổ trợ – Phương pháp cache

Sử dụng phương pháp cache: thu hết thông tin vào bộ nhớ đệm – sau đó nén nó lại như một cục bông – khi có người truy cập nó sẽ bung ra.
Đối với việc tăng tốc độ website wordpress, bạn nên sử dụng plugin WP Rocket – hiện tại đang được sử dụng để nén cache tốt nhất hiện nay.
Cứ tin tôi đi nếu bạn đang dùng wordpress – chỉ cần bật tắt plugin này là một sự khác biệt lớn.
Plugin tương tự: Framework SEO, SEO Press.

— Bổ trợ – Tối ưu video, ảnh

Đối với Video, gift: Khuyến nghị dùng hợp lý

Là một tài nguyên đáng kế, vì nó khá nặng. Video giúp khách hàng hình dung rõ hơn về sản phẩm dịch vụ. Tuy nhiên, nó nên được lựa chọn, dung lượng vừa phải để trang hoạt động tốt hơn

Đối với ảnh: Khuyến nghị dưới 100kb.

Bạn chỉ cần bỏ ảnh vào https://tinypng.com/ nén ảnh lại rồi up lên web là xong.

Đối với những ca khó nhằn hơn, tức là nén rồi mà vẫn tầm 200, 300kb. Tôi khuyên bạn quy trinh nén như sau:
B1: Xem kích thước chuẩn khung hiển thị ảnh
Một ảnh có khích thước lớn hơn khung website không chỉ làm ảnh mờ mà còn làm lớn dung lượng ảnh

Cách xem kích thước ảnh như sau: 
Cách 1 – yêu cầu code web cung cấp kích thước ảnh từng khung – đặc biệt là trang chủ và trang sản phẩm, vì những trang này thường phải có nhiều ảnh, tài nguyên.
Cách 2 – Vào admin xem kích thước.
Cách 3 – Tự bạn vào web: ấn f12 và làm theo hướng dẫn:
– Tại góc phải ấn vào dấu “ba chấm” chọn hiện thị dọc
– Tại góc trái chọn hình mũi tên
– Rồi chọn yếu tố bạn muốn xem – ok bạn có kích thước.
Cách làm này có sai lệch nếu màn hình bạn có kích thước khác nhau

chon-hien-thi-ngang

Chọn dấu “ba chấm” và chọn hiện thị ngang

tuy-chon-hien-thi-anh

Chọn hình mũi tên bên góc trái

hien-thi-khung-anh

Chỉ chuột vào yếu tố bạn muốn xem kích thước

B2: Dùng photoshop giảm kích thước ảnh như đã đo được

B3: Chuyển từ PNJ – JPEG (JPG)

Định dạng ảnh JPG sẽ có khả năng nén được ảnh nhiều hơn nhưng vẫn có độ nét tốt – ảnh nén xong không bị quá mờ.

B4: Cuối cùng nén ảnh bằng tinypng ( từ 1 đến 2 lần).

Vậy nếu bạn có hàng nghìn ảnh cần nén thì sao?
– Vâng, với wordpress bạn có plugin smush hoặc bạn có thể tìm trên google với từ khóa : tool/plugin nén ảnh wordpress
– Hoặc coder web của bạn cũng có thể tải các file ảnh về và nén rồi up lại lên. Quy trình trên chỉ áp dụng với ảnh khó nhằn và các trang quan trọng cần tối ưu triệt để như trang chủ.

— Bổ trợ – Giải quyết link 404 errors

Các trang 404 (các trang không tìm thấy) không chỉ làm người dùng khó chịu, giảm chất lượng seo mà còn tốt thêm tài nguyên của web.
Phương án:
– Dùng google web mastertool xóa url 
– Redirect sang trang đích mới.

— Bổ trợ – cài đặt AMP

AMP là một phiên bản chuẩn hóa dành cho điện thoại – nơi website của bạn sẽ được hiện thị một cách tối giản nhất và vì vậy nó sẽ nhanh nhất.
AMP được google đánh giá cao vì tốc độ tải trang cực nhanh. Tuy nhiên, khi áp dụng cần lưu ý xem trước bản hiện thị của amp. Rất nhiều trường hợp bản AMP rất xấu xí và kém hấp dẫn vì lược hết các yếu tố quan trọng.
Để cài đặt – với wordpress bạn cần vào phần plugin gõ AMP – và kích hoạt.
Sau đó trong trình soạn thảo một trạng cụ thể sẽ có phần cấu hình AMP cho bạn.

Trên đây là cách kiểm tra tốc độ website, tối ưu, tăng tốc website. Hi vọng qua bài viết bạn có đầy đủ kiến thức về cách vận hành và phương án tối ưu website về mặt tốc độ hiệu quả. Cảm ơn bạn đã dành thời gian.

BÀI VIẾT TRONG CÙNG CHUYÊN MỤC