Trong marketing digital thì landing page là một thứ không thể thiếu với nhiều ngành nghề trong thời đại công nghệ.
mục đích của landing page là muốn tạo ra chuyển đổi.
Để landing page hoạt động hiệu quả hơn thì bạn cần phải tối ưu tốc độ load của landing page.
Tốc độ load của landing page không phải là tất cả để một landing page đó chắn chắn sẽ thành công, tốc độ load landing page cũng là một yếu tố quan trọng để góp phần nên sự hiệu quả của landing page.
Hôm nay mình chia sẻ những chiến lược tăng tốc độ landing page, những chiến lược mình để cập ra đều website WordPress thông thường không thể sử dụng được nhưng landing page thì hoạt động lại rất tốt.
chiến lược tối ưu website bạn có thể học hỏi áp dụng để tối ưu cho landing page, vì landing page cũng là chạy trên nên web nhưng nó chỉ là một trang duy nhất, những điểm chung tối ưu website thông thường thì mình sẽ không đề cập bạn có thể tham khảo các bài viết trong blog của mình, mình chỉ đề cập đến những cách mà website thông thường không thể sử dụng được mà landing page hoạt động lại hiệu quả.
Mục lục
Tạo lập tên miền riêng hoặc subdomain không sử dụng url
Tạo lập tên miền riêng hoặc subdomain không sử dụng url.
tên miền riêng ví dụ: wptangtoc.com (nên sử dụng)
subdomain ví dụ: giatuan.wptangtoc.com (nên sử dụng)
url ví dụ: wptangtoc.com/giatuan/ (không nên sử dụng)
Khi bạn tạo lập landing page tối ưu thì bạn phải tác bạch hoàn toàn những thứ website chính của bạn đang sử dụng, các file của website không lên liên quan đến landing page, landing page sẽ được tạo lập riêng biệt.
Nếu là landing page mà chi phí rẻ mà vẫn chất lượng thì mình khuyến cáo là sử dụng subdomain, subdomain quan trọng là dễ tạo lòng tin hơn cho người dùng khi đã quen thuộc với website chính của bạn.
Lý do mình khuyến cao mọi người không nên sử dụng url vì nó sẽ load những đoạn code của website của bạn cho vào landing page mà landing page của bạn không sử dụng vì vậy làm lãng phí tài nguyên và làm chậm tốc độ load website.
Loại bỏ css không sử dụng
Loại bỏ css không sử dụng thì dễ làm hơn website rất nhiều.
Bạn truy cập vào purifycss.online rồi nhập tên miền landing page của bạn
purifycss.online
Rồi phần mềm sẽ trả lại những kết quả mà css của bạn đang sử dụng, nó sẽ tự động loại bỏ các css thừa, tuy nhiên bạn cần phải sử lý tay những đoạn css phần mềm purifycss trả về đều là những css tĩnh, còn css động thì không ( css động nghĩa là những đoạn sử dụng cho javascript khi bạn tác động lên nó thì nó mới được sử dụng), bắt buộc bạn phải tự làm thủ công dữ lại những đoạn rules css mà javascript bạn sử dụng.
landing page kinh nghiệm của mình, landing page thì thường dùng ít javascript thì khâu này làm đơn giản hơn rất nhiều. (nếu trong trường hợp bạn không có javascript nào thì bạn có thể bỏ qua tìm kiếm thêm những đoạn css mà javascript sử dụng).
(nếu là website thì mình khuyên mọi người không nên sử dụng purifycss nhưng landing page thì hoàn toàn khác)
Nội bộ toàn bộ css
Nội bộ css nghĩa là bạn hãy cho những file css bên ngoài của bạn cho thẳng vào trong html.
Cách làm bạn chỉ cần ấn thằng vào file.css của bạn: ví dụ như giatuan.css
Bước tiếp theo bạn nội tuyến bằng cách cho đoạn code này vào file functions.php
function wptangtoc_noi_bo_css() {
?>
<style>/** bạn hãy cho tất cả css này vào đây **/</style>
<?php
}
add_action('wp_head', 'wptangtoc_noi_bo_css',8);
Rồi tiếp theo bạn cần xóa bỏ file css đó, bạn cho đoạn này vào file functions.php
add_action( 'wp_enqueue_scripts', 'wptangtoc_deregister_css_ladding_page', 100 );
function wptangtoc_deregister_css_ladding_page() {
wp_deregister_style( 'gia-tuan' );
}
Bạn thay thế gia-tuan bằng id file css của bạn, để loại bỏ css đó nhé.
Các xác định id file css thì bạn xem file view source code landing page của bạn, truy cập vào landing page của bạn rồi ấn tổ hợp phím: CTRL + U rồi tìm đến đoạn html nhúng đoạn css đó rồi bạn, nó sẽ có ký tự ví dụ <link rel='stylesheet' id='wp-tang-toc-css' href='duong-dan-url' type='text/css' media='all' />
Đoạn id='wp-tang-toc-css' bạn loại bỏ -css nghĩa là đoạn id css của bạn là wp-tang-toc, rồi thay thế vào đoạn php functions trên.
Chiến lược này để hiện thị sớm càng sớm càng tốt, vì landing page không cần cache trình duyệt, bạn sử dụng chiến lược này rất hiệu quả cho landing page.
Nếu được bạn có thể nội bộ luôn những file javascript của bạn.
Gộp javascript và css
Nguyên tắc tối ưu landing page bạn càng ít yêu cầu đến máy chủ càng tốt, nếu bạn thể nội bộ css hay javascript như mình có hướng dẫn bên trên thì bạn hãy gộp javascript hay css vào một yêu cầu.
Gộp file thì có rất nhiều plugin tăng tốc WordPress hỗ trợ gộp file bạn có thể sử dụng, như litespeed cache, wp-rocket, swift performance lite…
Với website thì mình thường khuyến cáo mọi người không nên gộp javascript nhưng với landing page thì hãy nên gộp nhé.
Hãy cẩn thận kiểm tra kỹ càng nếu không sẽ dễ bị lỗi.
nếu trong trường hợp bị lỗi bạn hãy bật thêm tính năng loại bỏ jquery khi gộp nhé ( plugin tăng tốc WordPress cao cấp nào thì cũng đều có cái này).
Không sử dụng page builder
Page builder là một trong những nguyên nhân làm website của bạn chậm đi.
Nếu là website thì người dùng truy cập vào nhiều trang thì dùng page builder là tạm chấp nhận được.
Nhưng với landing page thì tốt nhất bạn không nên sử dụng page builder, hãy cố gắng tạo lập temple.php cho ladding Page.
Đây cũng là một điều khó khăn cho những người không biết gì về lập trình.
Bạn có thể thuê những lập trình viên về làm cho bạn, bạn sử dụng page builder để lên những ý tưởng rồi yêu cầu người lập trình viên bạn thuê về hãy tạo lập temple.php cho bạn.
Có nên sử dụng page builder không?
Hãy cân nhắc thật kỹ lưỡng khoản đầu tư của bạn, tốc độ của ladding quyết định bao nhiêu % sự thành công landing page bạn rồi xem nó có đáng để bạn thuê lập trình viên để tạo lập temple.php cho bạn hay không.
Nếu đáng đầu tư thì hãy đầu tư, nếu không đáng thì thôi chiến lược này bỏ qua.
Nếu bạn là lập trình viên thì tốt quá rồi câu chuyện đơn giản.
Nếu bạn không biết lập trình những vẫn muốn có một landing page nhanh nhưng không muốn đầu tư tiền để thuê lập trình viên về làm cho bạn.
Thì bạn có thể sử dụng chiến thuật này: theo mình đây là một chiến thuật tạo lập builder page khá tốt: bạn có thể tìm hiểu và nghiên cứu sử dụng gutenberg + một số plugins hỗ trợ thêm cho gutenberg.
gutenberg là trình soạn thảo mặc định của WordPress từ 5.0 trở đi, gutenberg không phải trình soạn thảo đơn thuần nó chính là page builder, gutenberg làm page builder rất mạnh và tốt nhưng nhiều người vẫn chưa biết và hiểu được sức mạnh thực sự của nó, mọi người vẫn cứ nghĩ và sử dụng gutenberg như là trình soạn thảo đơn thuần, nếu bạn nghĩ là gutenberg nó trình soạn thảo đơn thuần và vẫn chưa tận dùng được sức mạnh của nó thì hãy chuyển về classic edior đi nhé tốc độ website của bạn sẽ tăng nên rất đáng kể đó. Hướng dẫn chuyển gutenberg về classic edior
Sự thật rằng: không có một page builder nào trên WordPress mà chiến thắng được gutenberg ( về tốc độ, sự ổn định, bảo mật…)
gutenberg thì càng ngày càng dễ sử dụng hơn theo các bản cập nhật của WordPress, trước kia khá là khó sử dụng những giờ thì khá là đơn giản.
Sử dụng dns-prefetch
dns-prefetch là phân giải dns khi trình duyệt rãnh rồi, tức là trình duyệt đã load xong mọi thứ không có việc gì làm thì phân giải dns.
<link rel="dns-prefetch" href="//wptangtoc.com">
Chiến thuật này áp dụng khi bạn có 1 website và 1 landing page, một website về blog và một landing page để tạo ra mục đích sale chuyển đổi gì đó.
Ví dụ: bạn có landing page bán mỹ phẩm, một trang blog về hướng dẫn làm đẹp.
Khi khách hàng truy cập vào trang hướng dẫn làm đẹp trên website thì bạn hãy triển khai dns-prefetch
Bạn thêm thẻ dns-prefetch vào website blog chính của bạn
function wptangtoc_dns_prefetch_landing_page() {
?>
<link rel="dns-prefetch" href="//giatuan.wptangtoc.com">
<?php
}
add_action('wp_head', 'wptangtoc_dns_prefetch_landing_page',5);
bạn hãy thay giatuan.wptangtoc.com bằng tên miền hay subdomain của bạn, thành tên miền của bạn rồi cho đoạn code này vào file functions.php của bạn.
dns-prefetch tài nguyên không tốn nhiều nhưng sự hiệu quả có nó rất lớn, giảm độ chễ kết nối đến landing page cho bạn rất tốt.
HTTP/2 Push
HTTP/2 Push là kỹ thuật thay đổi thứ tự tải, giúp file gửi ngang bằng với html ( file sẽ gửi rất sớm)
Với website WordPress thì mình không khuyến khích sử dụng HTTP/2 Push nhưng với landding page thì khác.
HTTP/2 Push thực sự rất hiệu quả khi áp dụng tối ưu cho landding page.
HTTP / 2 Push cho phép các lập trình viên nhà quản trị trang web xác định nội dung file cụ thể nào đó sẽ được đẩy gửi sớm nhất đến trình duyệt của người dùng cùng với tài liệu HTML (sớm nhất có thể).
Nếu như bạn chưa biết về thứ mình đang nói thì bạn hãy tham khảo bài viết, để bài viết này có thể giúp bạn dễ đọc hiểu hơn thì mình khuyến cáo là học đọc bài viết này trước: cách trình duyệt làm hiển thị cho người dùng như thế nào? khi bạn đã có nền tảng kiến thức rồi, thì chắc bạn cũng đã hiểu ý nghĩa: đưa file cụ thể nào đó được đẩy sớm đến trình duyệt của người dùng cùng với tài liệu HTMT (sớm nhất có thể).
Theo truyền thống, người dùng click vào đường dẫn trang web của bạn sẽ yêu cầu tài nguyên từ máy chủ ban đầu sẽ nhận tệp HTML và phân tích cú pháp tệp đó để xác định nội dung nào nó cần yêu cầu tiếp theo. Sau đó, các yêu cầu khác được thực hiện đến máy chủ.
Đây là một quy trình mặc định của cách trình duyệt làm việc
Tuy nhiên với HTTP / 2 Push được kích hoạt triển khai, máy chủ có thể chủ động đẩy các nội dung được biết là cần thiết chắc chắn người dùng sẽ cần nó, trước khi trình duyệt người dùng thậm chí bắt đầu phân tích cú pháp tệp HTML.
Ví dụ: nếu chúng tôi có một trang web với file là giatuan.html tệp và một file css là giatuan.css theo như truyền thống mặc định, trình duyệt sẽ yêu cầu trước index.html và sau khi nhận được / phân tích cú pháp, sau đó sẽ đưa ra một yêu cầu khác cho giatuan.html.
Tuy nhiên, vì mình biết rằng trình duyệt chắc chắn sẽ yêu cầu tệp file giatuan.css, như vậy mình có thể yêu cầu máy chủ gửi tệp giatuan.css đến trình duyệt người dùng cùng lúc nó gửi file giatuan.html
Khi người dùng click vào đường link trang web: thì file html luôn luôn là file được gửi đi đầu tiên và sớm nhất.
với http /2 Push giảm được một thời gian nhỏ và yêu cầu được gửi đi sớm hơn sẽ hiểu quá khi đó là file css.
Điều này giúp tiết kiệm thời gian như thông thường, websever của bạn phải hoạt động làm việc để tạo HTML ( php + sql = html). Do đó, nếu các file nội dung được biết là cần thiết được đẩy trong thời gian nhàn rỗi của trình duyệt người dùng, thì việc tải nội dung có thể diễn ra hiệu quả hơn.
Nguyên tắc trình duyệt sẽ không hiển thị bất cứ thứ gì khi không làm xong file css.
Điều nghe có vẻ giúp quy trình phân phối thứ tự tải được tối ưu hóa hơn.
HTTP/2 Push thì theo như mình nghiên cứu thì nó chỉ thực sự hiểu quả nhất là HTTP/2 Push file css, không phải là HTTP/2 Push file javascript hay file khác….
nếu như bạn không sử dụng chiến lược nội tuyến toàn bộ css thì hãy cân nhắc sử dụng kỹ thuật HTTP/2 Push file css.
HTTP/ 2 Push là một tính năng mạnh mẽ và rất thú vị có thể cung cấp một số cải tiến hiệu suất đáng kể nhờ số lượng chuyến đi khứ hồi được yêu cầu giảm, một số lượng điểm của HTTP/2 Push thì với landding page thì không lớn như với website thông thường, bạn có thể áp dụng kỹ thuật này để tối ưu hóa landding page.
Để có thể sử dụng được HTTP/2 Push thì yêu cầu bạn cần phải có là có ssl và giao thức http/2.
rồi tiếp theo bạn có thể sử dụng các plugin hỗ trợ công việc HTTP/2 Push. theo mình thấy thì litespeed cache plugin làm công việc HTTP/2 Push rất tốt, bạn có thể nghiên cứu và sử dụng.
Tóm tắt:
Có rất nhiều chiến lược mà landing page có thể áp dụng từ website, bạn có thể tìm hiểu những chiến lược đó ngay trong blog của wp tăng tốc để tìm hiểu nhé.
Hoặc bạn có thể liên hệ với mình để thuê mình về làm tối ưu landing page cho bạn.
Để lại một bình luận