Hướng dẫn tăng tốc website wordpress | Kiểm tra tốc độ với GTmetrix

Bởi Nguyễn Đức
0 Bình luận 137 Lượt xem

Như đã hứa hôm nay tôi sẽ hướng dẫn các bạn cách tăng tốc website wordpress bằng một loạt các công cụ hỗ trợ.

Khi người dùng vào một trang web và cảm thấy phải đợi để vào website đó thì một cảm giác khó chịu sẽ xảy ra đối với người dùng. Tầm 5 giây mà tôi chưa vào được website đó là tôi thoát trang ngay và không thèm quay lại nữa

Còn đối với doanh nghiệp, cá nhân quản lý website thì sao ?

Họ sẽ mất người dùng, mất khách hàng, không phải là ít mà cực kỳ nhiều.

Tôi sẽ lấy 2 trường hợp là chạy quảng cáo và làm SEO

Chạy quảng cáo : Bạn phải trả tiền để có khách truy cập website của bạn đúng không nào. Tuy nhiên website bạn load chậm, họ click và phải chờ. Đừng hỏi vì sao không ra đơn khi tốn khá nhiều tiền để chạy quảng cáo

SEO : bạn sử dụng SEO để đưa website lên top google và sau một thời gian bạn sẽ có một lượng khách hàng khổng lồ mà không cần tốn bất cứ một khoản tiền nào. Tuy nhiên nếu không tối ưu tốc độ website lượng khách hàng đó sẽ không còn

Trong bài viết này tôi sẽ hướng dẫn các bạn từng bước để tối ưu một website dựa trên mã nguồn mở wordpress. Website của tôi đã load từ 8s về còn hơn 3s bằng những cách này.

 

 

 

Chọn một nhà cung cấp hosting chất lượng

Máy chủ chạy dịch vụ website phải có cấu hình đủ lớn để đảm bảo xử lý thông suốt, phục vụ cho số lượng lớn người truy cập. Phải có đường truyền kết nối tốc độ cao để đảm bảo không bị nghẽn mạch dữ liệu.

Ngược lại cấu hình thấp, dung lượng yếu, nếu người dùng truy cập nhiều sẽ dẫn đến quá tải và website load chậm

Vì vậy chúng ta cần phải biết cách chọn một nhà cung cấp hosting chất lượng để đảm bảo tốc độ website của chúng ta không bị chậm hoặc bị gián đoạn

 

 

 

Cài đặt plugin Gtmetrix kiểm tra tốc độ website

 

Tại sao nên sử dung Gtmetrix để test tốc độ website ?

Không biết mọi người còn biết plugin nào khác không, riêng cá nhân tôi nhận thấy Gtmetrix hiện là website kiểm tra tốc độ trang web tốt nhất thế giới hiện nay.

  • Đã có hơn 450 triệu trang web được kiểm tra

 

Số người sử dung GTmetrix

 

  • Đưa ra lý do tại sao website của bạn lại load chậm

 

Đưa ra nguyên nhân tốc độ website chậm

 

  • Kiểm tra sự hoạt động của website của bạn trên nhiều thiết bị khác nhau

 

Kiểm tra website trên nhiều thiết bị khác nhau

 

  • Đặt máy chủ ở 7 địa điểm trên thế giới. Website của bạn đặt máy chủ ở đâu thì có thể đặt ví trí test tốc độ tại nơi gần với vị trí đó. Ví dụ website marketingtk.com của tôi đặt máy chủ ở châu Á thì tôi chọn Hong Kong là nơi để test tốc độ

 

Cài đặt plugin GTmetrix for wordpress

Nếu website của bạn tự viết code thì có thể lên trang chủ của Gtmetrix để test tốc độ website.

Nếu là một website được xây dựng trên nền tảng wordpress bạn có thể cài đặt plugin GTmetrix For wordpress.

Sau đây sẽ là phần cài đặt plugin này

Bước 1 : vào trang quản trị wordpress, di chuyển tới cài mới plugin và gõ Gtmetrix. Cài đặt và kích hoạt plugin này lên.

 

Cài đặt và kích hoạt plugin GTmetrix for wordpress

 

Bước 2 : Di chuyển tới phần Gtmetrix và click vào Register for a GTmetrix account now » để đăng ký trài khoản trên Gtmetrix.

 

Đang ký tài khoản trên GTmetrix

 

Bước 3 : Trên trang chủ của Gtmetrix các bạn điền đầy đủ thông tin đăng ký của mình vào để đăng ký. Email nên điền email quản trị website của bạn.

 

Form đăng ký tài khoản GTmetrix

 

Bước 4 : Vào hòm thư của bạn kích hoạt email bạn vừa đăng ký lên

Lấy API key để kích hoạt plugin. Vào đây để lấy API key

Click tạo API key

 

Tạo mã API key kích hoạt plugin GTmetrix

 

Bước 5 : Vào lại trang quản trị wordpress.

Điến email và mã API key của bạn vào và chọn save changers

 

Điến email và khóa API vào kích hoạt plugin GTmetrix

 

Bước 6 : Cấu hình Plugin Gtmetrix for wordpress.

Ngay khi kích hoạt khóa API, sẽ hiện ra cho bạn các thông tin để cấu hình plugin. Theo tôi nên chọn hết và ở phần vị trí chọn Hongkong, Chi na nhé

Tại vì máy chủ mình đặt ở châu Á

 

Cấu hình Plugin Gtmetrix for wordpress

 

Kiểm tra tốc độ website bước đầu

Di chuyển tới phần Test trên plugin Gtmetrix for wordpress. Dán URL website vào và chọn kiểm tra ngay bây giờ

 

Kiểm tra tốc độ website ban đầu

 

Chúng ta đã có kết quả.

 

Kết quả kiểm tra tốc độ website ban đâu

 

Click Detailed report để kiểm tra nguyên nhân dẫn tới website bị chậm.

Bạn sẽ đựa đưa tới trang chủ của Gtmetrix để xem chi tiết.

Hai phần quan trọng mà bạn nên xem là page speedYslow Score

 

Phần pags speed trên GTmetrix

 

Qua tệ phải không ? Bây giờ tôi sẽ đưa ra nguyên nhân dẫn tới website load chậm

 

 

 

Một số nguyên nhân chính dẫn tới website load chậm

 

Chưa tận dụng bộ nhớ đệm trình duyệt

Mỗi khi trình duyệt tải một trang web, nó phải tải xuống tất cả các tệp web để hiển thị đúng trang bao gồm tất cả HTML, CSS, JavaScript và hình ảnh.

Bộ nhơ đệm có chức năng lưu trữ lại những tài nguyên trên. Điều đó nói lên vì sao khi khách truy cập lần đầu sẽ chậm hơn các lần tiếp theo

Khi bạn tận dụng bộ nhớ đệm của trình duyệt, các tài nguyên của trang web sẽ được lưu giữ trong bộ nhớ đệm. Khi đó các lần truy cập tiếp theo, người dùng sẽ cảm thấy load nhanh hơn vì vì những tài nguyên website này đã được tận dụng

 

Tối ưu hóa hình ảnh và kích thước hình ảnh

Các hình ảnh có kích thước lớn là khó tránh khỏi. Và khi tải lên website, với những kích thước lớn như vậy, website sẽ load chậm

Cho nên chúng ta cần phải tốt ưu hóa chúng có nghĩa là lưu hoặc biên dịch hình ảnh của ở định dạng thân thiện với web

 

Có quá nhiều cú pháp javascrip

Để tải một trang web, các trình duyệt phải phân tích nội dung của tất cả các thẻ Scrip, chính điều này làm tăng thời gian tải trang

 

Chưa thêm expires title

Các expires title cho trình duyệt biết liệu tài nguyên trên website có cần được yêu cầu từ nguồn không hoặc liệu nó có thể được tìm nạp từ bộ đệm của trình duyệt hay không.

Thêm expires title rất quan trọng để giảm yêu cầu HTTP, giúp giảm thời gian để máy chủ liên lạc với trình duyệt. Nó cũng cho phép người dùng của bạn sử dụng lại các tệp bộ nhớ cache đã được lưu trữ trong trình duyệt để giảm số lượng tệp họ cần tải xuống.

 

Quá nhiều yêu cầu HTTP

Mỗi một khi các tài nguyên được bạn thêm vào, website của bạn phải tạo thêm các yêu cầu HTTP để liên lạc với trình duyệt của khách truy cập. Và những yêu cầu HTTP từng bước sẽ làm chậm trang web của bạn

 

Sử dụng lưu lượng cookie không cần thiết

Cookie HTTP là những mẩu dữ liệu nhỏ được gửi từ một trang web và được lưu trong trình duyệt của bạn.

Cookie rất quan trọng và có giá trị đối với nhiều website và giúp người dùng trải nghiệm tốt hơn. Tuy nhiên không phải lúc nào cũng tốt

Nhiều trường hợp trình duyệt sẽ đưa ra các tài nguyên tĩnh và chúng không cần thiết phải gửi tới máy chủ. Các tài nguyên này sẽ làm tăng thêm các tệp lưu trữ và các tệp tĩnh.

 

Chưa giảm kích thước các tệp JavarScrip và CSS

 Tốc độ tải trang là một yếu tố rất quan trọng nên Google cũng khuyên chúng ta nên Giảm thiểu các tệp JavaScript và CSS.

 

 

 

Cài đặt và kích hoạt plugin sao lưu UpdraftPlus

Khi các bạn nâng cấp phiên bản wordpress, php, cài đặt giao diện … website sẽ rất dễ xãy ra lỗi hoặc mất dữ liệu. Việc sao lưu website lại là rất cần thiết trước khi chúng ta làm một việc nào đó liên quan tới code.

Và plugin số một mà tôi chọn đó là UpdraftPlus

 

 

 

Thay đổi kích cỡ hình ảnh

Những hình ảnh sẽ có những dung lượngkích cỡ khác nhau, có lớn có nhỏ và khi quá lớn sẽ làm chậm tốc độ của website. Và theo tôi nên đưa lên những hình ảnh có kích thước < 100 kb. Điều đó là tuyệt nhất !

Nếu như kích thước ảnh của bạn quá lớn hãy làm hai cách sau :

  • Đưa ảnh lên các website nén ảnh trực tuyến nén về < 100kb
  • Trong phần tải ảnh lên wordpress sẽ có nơi để các bạn điều chỉnh kích thước hình ảnh. Bạn hãy điều chỉnh theo kích thước phù hợp nhất

 

Chỉnh sửa kích thước hình ảnh

 

Nếu như đã làm xong hai bước trên chúng ta tới tối ưu hóa hình ảnh.

 

 

 

Tối ưu hóa và nén ảnh bằng plugin Wp Smush

Khích thước hình ảnh của bạn quá lớn, quá nhiều hình ảnh như vậy và bạn cần tối ưu hóa và giảm kích thước của chúng xuống.

Plugin Smush Wp sẽ giúp bạn thực hiện điều này.

Có nhiều Plugin cũng có chức năng tối ưu hóa hình ảnh nhưng tại sao tôi chọn nó ? Miễn phítối ưu hóa ảnh không giới hạn, ngoài ra chất lượng là không thể bàn cãi.

Trước tiên hãy đảm bảo rằng bạn đã kích hoạt tất cả các định dạng hình ảnh mà bạn muốn tối ưu hóa trước

 

Thay đổi kích thước để tối ưu hóa hình ảnh

 

Tiếp đó tiến hành làm nhòe hình ảnh

 

 

Làm nhòe hình ảnh để tối ưu hình ảnh

 

Để biết cách cài đặt và cấu hình plugin Wp smush một cách chi tiết hãy xem bài viết của tôi về Plugin tối ưu hóa hình ảnh này.

Cài đặt và kích hoạt plugin tăng tốc website Wp Fastest Cache

Lưu ý : Nếu như bạn đang sài hosting của nhà cung cấp host có máy chủ hỗ trợ LiteSpeed Cache thì hãy cài đặt plugin LiteSpeed Cache sẽ tốt hơn chứ không nên cài Wp Fastest Cache nữa.

Bước 1 : Di chuyển vào cài mới plugin và gõ wp Fastest Cache. Cài đặt và kích hoạt plugin.

 

 

Cài đặt và kích hoạt plugin Wp fastest cache

 

Bước 2 : di chuyển vào phần Wp Fastest Cache chọn phần CDN ( nếu như bạn không sử dung CDN thì thôi )

 

 

Giao diện CDN trên plugin Wp fastest cache

 

Bước 3 : Bạn đang sử dụng CDN của của nhà phát triển nào thì chọn nhà phát triển đó. Tôi sài CloudFlare nên tôi chọn CDN Cloudflare.

Dán mã APIemail đăng ký vào bảng vừa hiện lên. Tôi lấy mã này trong tài khoản Cloudflare của tôi.

 

 

Dán mã API CDN vào plugin wp fastest cache

 

Và sau đó tôi đã kết nối thành công CDN với plugin của tôi.

Bước 4 : Sang phần setting các bạn tích vào những phần dưới đây

 

 

Các phần nên chọn để hoạt động plugin fastest cache

 

Cache System : Cho phép bộ nhớ đệm để phân phối các trang nhanh hơn

Preload : Khi nhấp vào đây sẽ hiện lên một cửa sổ

Bạn nhấp vào tất cả chúng và điều chỉnh 2 tới 4 nếu không muốn bị dịch vụ lưu trữ của bạn phàn nàn

 

 

Chọn hết phần preload

 

Logged-in Users :  Không hiển thị phiên bản được lưu trong bộ nhớ cache cho người dùng đã đăng nhập mà hiển thị trạng thái thực tế của bạn

New Post : Bạn có thể chọn xóa bộ nhớ cache hoặc không khi hoàn thành một bài viết

Update Post : Bạn có thể xóa hoặc không xóa bộ nhớ cache khi bài viết được cập nhật

Minify HTML : Nén HTML và giảm kích thước tệp

Minify Css : Nén CSS và giảm kích thước tệp

Combine CSS : Giảm yêu cầu HTTP thông qua các tệp css kết hợp

Combine Js : Giảm yêu cầu HTTP thông qua các tệp Js kết hợp

Gzip : Giảm kích thước tệp được gửi từ máy chủ của bạn

Browser Caching : Giảm thời gian tải trang cho khách truy cập lặp lại

Disable Emojis : Bạn có thể xóa biểu tượng cảm xúc nội tuyến css và wp-emoji-release.min.js

 

 

 

Kiểm tra lại kết quả sau khi tối ưu tốc độ website

Việc cần làm cuối cùng đó là kiểm tra lại tốc độ website của bạn. 

 

 

Kết quả sau khi tiến hàng cái các ứng dụng hỗ trơ tăng tốc Website

 

Các bạn thấy đây 3 giây 11 một kết quả đáng ngạc nhiên. Hãy xem sự cải thiện chi tiết hơn.

 

Kết quả sau khi tối ưu tốc độ website

 

Như tôi đã khẳng định với các bạn đúng không ? Từ việc website load từ 8 giây xuống còn 3 giây. Tại sao không thử ?

 

 

 

Những lời khuyên khi tối ưu tốc độ website

Ở phần trên đó là tôi chỉ tối ưu hóa phần page speed

Để tối ưu phần Yslow score bạn cần phải am hiểu về code hoặc xem các hướng dẫn từ các chuyên gia để tối ưu.

Nhưng có một cách dễ dàng hơn nữa đó là các bạn xóa bớt những plugin không cần thiết đi. Điều đó sẽ giúp bạn giảm thiếu được những lệnh không cần thiết

Một mẹo nữa đó là khi các bạn viết xong bài viết hoặc xóa plugin xong thì hãy dùng ngay plugin wp fastest cache xóa bộ nhớ cache đi. Khi đó website của bạn sẽ cảm thấy khỏe khoắn

Tải lên các ảnh có kích thước < 100 kb điều này sẽ giúp cho website load nhẹ nhành hơn

Một cách khác mà phải gọi là cực kỳ quan trọng đó là lựa chọn một nhà cung cấp hosting tốt. Vì tốc độ website sẽ liên quan khá lớn đến host

Và cách tốt nhất đó là các bạn tìm một nhà phát triển tối ưu tốc độ website giùm bạn. Có nghĩa là khi kiêm tra và phát hiển những lỗi trên Gtmetrix mà phần sửa lỗi liên quan đến vấn đề code. Bạn cần một người có chuyên môn hoặc một công ty có hỗ trợ xử lý vấn đề này.

Plugin Wp smush, điều chỉnh kích cỡ hình ảnh, plugin Wp fastest cache đồng thời lựa chọn một nhà cung cấp hosting tốt là một sự kết hợp cực kỳ hoàn hảo. 

0 Bình luận

Related Posts

Để lại một bình luận