Thứ tự tải tối ưu cho website đây là một điều cực kì quan trọng tối ưu tốc độ load website WordPress, nó không giúp website của bạn load nhanh hơn tổng thể nó giúp khách hàng cảm nhận website này load nhanh thật.
Google năm 2021 tuyến bố sẽ đánh chỉ số : First Contentful Paint, Largest Contentful Paint, Cumulative Layout Shift những bộ chỉ số này thứ tự tải website ảnh hưởng rất nhiều không phải là tất cả nhưng rất nhiều đấy, 3 bộ chỉ số quan trọng này của google đề ra bạn không làm tốt thì sang năm 2021 thứ hạng seo có bạn chắc chắn bị tác động tiêu cực rất lớn, nếu bạn làm tốt thì chắc chắn sẽ vượt mặt được đối thủ.
Anh Hiếu bên wp căn bản có chia sẻ bài viết này khá là kỹ bạn có thể tham khảo: Google giới thiệu thuật toán xếp hạng trải nghiệm trang
First Contentful Paint, Largest Contentful Paint, Cumulative Layout Shift để tối ưu được tốt là một bài toàn cần rất nhiều kỹ thuật trong đó có kỹ thuật này, Mình sẽ tạm bỏ qua về vấn đề tăng tốc độ load đến seo.
Mình sẽ tập trung vào người dùng, về chủ đề thứ tự tải tối ưu.
Mình sẽ chia sẻ thứ tự như thế nào thì tối ưu, và điều trình như thế nào, và làm sao để nhận biết chính xác được thứ tự tải.
Bạn làm chủ được thứ tự tải bạn không bao giờ phải lo về vấn đề trì hoãn defef hay tải không đồng bộ làm lỗi website của bạn. (mấy kỹ thuật defef, tải không đồng, preload… chỉ là thay đổi thứ tự tải, nếu không làm đúng thì lỗi là điều bình thường)
Thứ tự tải tối ưu nhất cho WordPress
Theo kinh nghiệm của mình đây là thứ tự tải tốt nhất cho website WordPress.
HTML => CSS ~ FONT => ảnh đầu tiên hiển thị thường là logo => jquery => javascript => favicon icon => ảnh bình thường
Đây là thứ tự tải tối ưu nhất theo kinh nghiệm của mình.
Công thức load này đúng 80% website WordPress, quy luật tải tuần tự này cực kì theo mình là tối ưu, và website wptangtoc.com vẫn đang sử dụng công thức này nhé.
Làm như thế nào để thay đổi thứ tự tải file
Đây là 7 kỹ thuật mình thường xuyên sử dụng để thay đổi thứ tự tải cho website WordPress.
- preload
- preconnect
- điều chỉnh hook nhúng file như wp_enqueue_scripts thay đổi thứ tự ưu tiên trong với lập trình php.
- chuyển file xuống footer
- Lazy load image, javascript…
- trì hoãn (defef)
- tải không đồng bộ (Async)
Đây là 7 cái thường dùng để thay đổi thứ tự tải của trình duyệt, trì hoãn và tải không đồng bộ là 2 các hơi đặc biệt nó vẫn tải như bình thường nhưng phân tích thì thay đổi.
Trình duyệt làm việc nó tải và phân tích là 2 quá trình khác nhau, còn các kỹ thuật 1,2,3,4 thì tải là phân tích ngay như trình duyệt vẫn thường làm theo mặc định, còn lazy load khi cần tác động của người dùng nó mới làm việc hoặc tác động theo thời gian quy định.
Mỗi một kỹ thuật đề là một chủ đề lớn và rất hay, mình sẽ có ra những bài viết chia sẻ về những kỹ thuật này. để giúp mọi người trong việc phát triển website WordPress của bạn.
Cách kiểm tra thứ tự tải website của bạn
Cách mình thích nhất đó chính là xem view-source. bạn chỉ cần vào trang web của bạn, xong bạn ấn phím CTRL + U
hoặc bạn có nhập url như thế này: view-source:https://wptangtoc.com/ thay wptangtoc.com bằng tên miền của bạn.
Xem view-source là cách chính xác nhất để biết thứ tự tải.
Nguyên tắc của trình duyệt sẽ tải html từ trên xuống dưới từ trái quay phải, gặp những đường link file nào nó sẽ tải xuống và phân tích.
Còn mấy công cụ speed test thì mình thấy hơi ngáo về vấn đề này và không chuẩn xác lắm nên mình không sử dụng, nếu cố dùng thì vẫn được nếu muốn chính xác tuyệt đối phải xem view-source.
Lưu ý nếu bạn đang sử dụng nén html thì hãy tắt đi để xem view-source dễ dàng hơn nhé.
hoặc bạn có thể sử dụng chrome dev tool vào phần tab performance để kiểm tra.
Ưu tiên 1: HTML
Vì đơn giản trình duyệt sẽ tải html đầu tiên, luôn là như vậy.
Bạn không thể thay đổi quy tắc này, chắc chỉ có không tải html là xóa website đi mà thôi 😂 😂
Mọi người thì không làm gì cũng đã tối ưu đúng quy trình rồi, nên phần html này thì mình bỏ qua.
HTML là tiền đề mình tối ưu những thứ khác, để điều chỉnh quy luật tải cho trình duyệt web.
Nguyên tắc của trình duyệt sẽ tải html từ trên xuống dưới từ trái quay phải, gặp những file nào nó sẽ tải xuống và phân tích.
Ưu tiên 2: CSS và font
CSS và font là luôn luôn là thứ được yêu tiên sau html.
Vì đơn giản trình duyệt sẽ không hiển thị bất cứ thứ gì nếu chưa tải và phân tích xong file.css và mặc định không hiển thị chữ khi không có font chữ.
Nếu chưa tải và phân tích xong css thì người dùng chỉ nhìn thấy màn hình trắng không có gì.
Nếu trong trường hợp bạn ép trong html mà file javascript tải trước file css thì đó cũng là một thứ không hề ổn chút nào, vì nó tải xong javascript nó mới tải css. Làm xong css thì mới hiển thị.
Ví dụ nếu file javascript đó mất một giây mới tải và phân tích xong thì mới đến lượt file css thì người dùng sẽ ngồi ngắm màn hình trắng trắng thêm một giây.
Hay nếu bạn còn chơi theo kiểu cho file ảnh load trước css và load trước javascript, file ảnh đó mất một giây để tải và phân tích thì suy ra trường hợp này người dùng phải mất tổng là 2 giây ngồi ngắm màn hình trắng ( 1 giây làm file ảnh + 1 giây làm file javascript).
Với các themes WordPress chất lượng tốt thì bạn không phải quan tâm đến điều này cho lắm, nhưng nếu bạn không chắc chắn thì hãy lên kiểm tra lại cho chắc.
view-source website bạn xem url đường link file css có đang dẫn đầu hay không nhé, nếu không dẫn đầu thì bạn phải điều chỉnh lại ngay.
Nếu bạn đang dùng cdn truyền thống hãy cho đoạn mã này vào file functions.php
function preconnect_cdn() {
?>
<link href='//cdn.wptangtoc.com' crossorigin rel='preconnect' />
<?php
}
add_action('wp_head', 'preconnect_cdn',1);Rồi thay rồi cdn.wptangtoc.com bằng tên miền bạn sử dụng cdn nhé.
Có kỹ thuật css quan trọng và tải không đồng bộ thì nó nằm ở phạm trù bài viết khác không phải trong bài viết này, lên mình sẽ không liệt kê vào đây.
Ghi chú: Với file css bạn chỉ cần xắp xếp theo thứ tự html với css là được rồi không cần thiết phải sử dụng kỹ thuật preload với file css làm gì, nếu áp dụng kỹ thuật preload file css mà đang sử dụng Query Strings của WordPress không biết cách sử kích hoạt preload css chính xác thì sẽ tạo ra 2 file css mà lại làm chậm website mà biết kích hoạt chính xác đi nữa thì tác động đến tốc độ mình đã thử nghiệm thì cũng không ảnh hưởng và tận chí còn làm chậm website.
Trừ trường hợp bạn cần phải preload css là website của bạn có quá nhiều file css riêng lẻ, tầm 5 file css trở lên mà bạn đã phân vùng cái nào là css chính của themes thì mới cần phải preload css, nếu nhỏ hơn 5 file css thì không cần thiết phải preload file css.
Font
Đây là thứ quan trọng ngang hàng với css.
Tại sao phải ưu tiên font chữ?
Đây là một chủ đề khá rộng mình chỉ giải thích ngắn gọn sơ sơ quá thôi nhé, chứ chi tiết hẹn các bạn những bài viết khác.
Khi trình duyệt tải theo thứ tự mặc định, thứ tự yêu tiên của font chữ thì kém gần như là cuối cùng.
Nhưng cách làm việc mặc định của trình duyệt là khi nào font chữ tải xong thì mới cho hiển thị chữ. (như vậy người dùng phải đợi toàn bộ website bạn load xong mới nhìn được chữ nội dung của bạn viết gì)
Khi bạn đo điểm google pagespeed insight họ khuyến cáo là hãy cho thêm thuộc tính css là font-display: swap; vào trong rules @font, thuộc tính font-display: swap; ý nghĩa đoạn code này là khai báo với trình duyệt là cứ hiển thị cho người dùng đi font chữ gì cũng được, sau khi tải xong file font chữ thì sẽ hoán đổi lại kiểu chữ. (cái này có rất nhiều plugin hỗ trợ làm cho bạn hay bạn biết về css hãy tự làm thủ công)
Hoán đổi đó là lý do thực sự không tốt cho trải nghiệm người dùng. Chữ bình thường đang đọc giật một phát bay mất dòng người dùng đang đọc font-display: swap; làm trải nghiệm người dùng ux kém đi, thuật ngữ này thế giới gọi là Flash of unstyled text (FOUT). Nhưng vẫn tốt hơn là bắt người dùng đợi load đầy đủ mới hiển thị chữ.
Chính vì kỹ thuật preload font đã giải quyết được không hiển thị được chữ khi chưa tải font ( vì font tải trước gần như ngang với css) và không còn bị lỗi Flash of unstyled text (FOUT) như khi dùng font-display: swap;.
preload là font chữ bạn đang sử dụng lưu tải trong webhost của bạn hãy dùng preload, khi dùng preload font phải thêm thuộc tính crossorigin.
preconnect là font chữ bạn dùng tài nguyên bên thứ ba thường dùng như là của google font, khi dùng preconnect cho font phải thêm thuộc tính crossorigin.
Hướng dẫn preload font chữ. đoạn code này hãy cho vào file functions.php
function preload_file_font() {
?>
<link rel="preload" href="/wp-content/themes/GiaTuan/fonts/giatuan.woff2" as="font" type="font/woff2" crossorigin>
<?php
}
add_action('wp_head', 'preload_file_font',8);Bạn hãy thay đường dẫn file font chữ bạn /wp-content/themes/GiaTuan/fonts/giatuan.woff2 bằng đường dẫn của bạn, nếu có thể tốt nhất hãy sử dụng đường dẫn url tương đối thì sẽ load hơn nhé.
Nếu bạn chưa biết url tương đối là gì bạn có thể tham khảo bài viết: url tương đối và url tuyệt đối
Nếu bạn đang dùng google font thì hãy preconnnect đi nhé. Hướng dẫn preconnect font chữ google font, đoạn code này hãy cho vào file functions.php
function preconnect_file_font_gstatic() {
?>
<link href='//fonts.gstatic.com' crossorigin rel='preconnect' />
<?php
}
add_action('wp_head', 'preconnect_file_font_gstatic',8);
Nếu như bạn không phải là dân marketing chuyên nghiệp có thể thấu font chữ, khi dùng font này giúp tăng bao nhiêu doanh thu lợn nhuận thế này thế kia, bạn chỉ đơn giản không có kiến thức gì về font chữ trong marketing thì hãy nên sử dụng font chữ mặc định của trình duyệt.
Nguyên nhân nhiều người nhét vô tội vạ font chữ vào mà không có kiến thức gì về marketing font chữ xong ảo tưởng nhét nhiều vậy khách hàng chắc nghĩ website mình cao cấp.(đó là một ảo tưởng)
Font chữ làm nặng website của bạn, bạn chưa biết không phải là dân marketing chuyên nghiệp nhìn font chữ ra thấy ra tiền nhưng tích hợp phát chắc mất tiền cái đã làm nặng website của bạn, người dùng phải load lâu (giảm trải nghiệm người dùng, dùng font đúng thì tăng doanh thu rất tốt nhưng mà còn sai làm người dùng khó chịu thì càng tệ hại)
Tăng tốc webfont tăng ngay 12% tốc độ load chỉ đơn dùng font chữ mặc định của trình duyệt.
Ưu tiên thứ 3: logo
Logo thường luôn luôn sẽ để ở đầu tiên màn hình đầu, và thường ở bên góc trái màn hình đó gần như là tiêu chuẩn quốc tế rồi.
Nếu bạn có thiết kế dị không theo chuẩn quy tắc bạn đặt logo ở sidebar hay footer gì đó không đặt ở đầu trang thì đoạn này bạn hãy bỏ qua.
Để ưu tiên load được file logo thì có rất nhiều cách mình sẽ liệt kê ra ở đây:
1: file logo nhớ bỏ lazy load nhé nếu bạn dùng lazy load mà lazy load cả file logo thì khoai rồi.
2: file logo dạng file base64 html
3: file logo dạng font icon ( mình đang sử dụng)
4: Trình giữ chỗ lazy load base64, đây là một trò cực hay nhưng ít người áp dụng, giới thiệu với bạn là litespeed cache có hỗ trợ tính năng này đấy nhưng ít ai biết mà sử dụng. ví dụ điển hình làm tuyệt chiêu này là shopee làm rất ngon.
5: preload file logo
Hướng dẫn preload file logo đây là cách dễ làm nhất mà thấy cũng khá hiệu quả, nếu bạn có đam mê với tốc độ load thì hãy thử nghiệm xem cách nào tốt nhất cho website của bạn nhé.
cho đoạn mã này vào file functions.php
function preload_logo_wptangtoc() {
?>
<link rel="preload" href="logo-tuan.png" as="image" type="image/png">
<?php
}
add_action('wp_head', 'preload_logo_wptangtoc',9);Bạn hãy thay đường dẫn logo-tuan.png bằng đường dẫn logo của bạn.
Ưu tiên 4: Jquery
Jquery là thư viện javascript gần như với website WordPress gần như ai cũng sử dụng jquery, gần như theme nào cũng chạy theo jquery, nếu không chạy theo file jquery thì themes đó rất hiếm và cực kì đặc biệt.
Jquery sẽ load ở header, nếu jquery mà load sau file javascript thường mà file đó javascript đó mà code theo tập lệnh jquery thì chắc chắn là lỗi.
website WordPress thì gần như ai cũng dùng jquery, nếu bạn không dùng jquery thì yêu tiên jquery nên bỏ qua.
Với WordPress thì jquery họ đã tối ưu cho lên trên header rồi bạn cũng không cần phải quan tâm lắm, chỉ là quan tâm là sợ jquery nó vượt qua cả file css thôi, sợ file css themes hàm ưu tiên thấp hơn jquery.
Nếu file jquery nằm ở dưới file css và file font thì là hoàn hảo.
Mình nghĩ là để đó thì WordPress cũng đã để header đã tối ưu rồi, chắc bạn chỉ sử dụng đoạn code chuyển toàn bộ javascript xuống footer thì mới bị đảo đi mà thôi. nếu bạn muốn biết vào bài viết này để xem thử nhé.
Với website WordPress thì không bao giờ để jquery xuống footer, đó là nguyên tắc nếu bạn để xuống footer thì gần như 95% website của bạn sẽ bị lỗi tính năng đặc biệt bạn còn thêm trì hoãn hay tải không đồng bộ tỷ lệ lỗi cực cao, đấy là thứ bạn lên lưu ý.
Bây giờ jquery là một javascript bạn có thể trì hoãn và tải không đồng gì đó nếu nó phù hợp với website của bạn.
Bạn có thể tham khảo bài viết tối ưu hóa javascript
Ưu tiên 5: javascript thông thường
File javascript thông thường mình thường có thói quen là cho file footer bằng mẹo khai báo là nó chạy theo jquery, chứ không phải là chuyển toàn bộ javascript xuống footer đâu nhé.
Nếu file javascript đó không phải là hỗ trợ những cái hiển thị màn hình đầu, như kiểu menu javascript các kiểu thì mới nên áp dụng nhé kỹ thuật bên dưới mình để cập nhật.
Khi nhúng file bạn có thể sử dụng hook xuống footer riêng nhưng theo với WordPress mình biết có cách nhúng file rất là hay mẹo là chỉ cần cho array('jquery'), như vậy là WordPress sẽ tự hiểu cho file javascript đó xuống footer cho dù bạn file đó không chạy theo jquery thì vẫn array('jquery') bình thường nhé.
cách nhúng thì sử dụng file nào dù là css hay javascript thì dùng hook wp_enqueue_scripts của WordPress.
add_action( 'wp_enqueue_scripts', 'gia_tuan_script',100 );
function gia_tuan_script() {
wp_enqueue_script( 'to-top', get_stylesheet_directory_uri() . '/js/gia-tuan.js', '1.0', true );
}
Khi cho thêm array(‘jquery’) WordPress sẽ tự động chuyển javascript xuống footer
add_action( 'wp_enqueue_scripts', 'gia_tuan_script',100 );
function gia_tuan_script() {
wp_enqueue_script( 'to-top', get_stylesheet_directory_uri() . '/js/gia-tuan.js', array( 'jquery' ), '1.0', true );
}
đoạn code này add_action( 'wp_enqueue_scripts', 'gia_tuan_script',100 ); Số 100 trong đoạn code càng cao thì càng ít được ưu tiên đồng nghĩa với việc sẽ bị đẩy xuống footer càng sâu hơn.
Bạn có nhiều file javascript thì hãy xắp xếp thứ tự yêu tiên một cách tối ưu nhất nhé, mình không có câu trả lời chính xác phải xắp xếp như thế nào cho website của bạn, cái này chỉ có bạn mới hiểu website của bạn và nhu cầu website của bạn.
Còn phương pháp trì hoãn hay tải không đồng bộ thì tùy thuộc vào file jquery thì bạn mới quyết định được chiến lược cho file javascript thông thường.
Ưu tiên 6: favicon
Là icon nhỏ hiển thị trên góc màn hình, favicon rất có giá trị trên giao diện desktop pc tuy nhiên không có giá trị nhiều trên giao diện mobile nhưng bạn không thể không có favicon.
Nếu không có favicon thì favicon báo 404 là cực kỳ tác hại đến tốc độ load website, vì nếu thiếu favicon trình duyệt xin phép yêu cầu favicon mà bạn không cấp được nó cứ vẫn xin yêu cầu favicon.
vì vậy dù có logo hay không bạn phải up favicon lên để khai báo cho trình duyệt là đã hoàn tất favicon nhé đừng bao giờ để favicon lỗi 404.
kinh nghiệm mình làm việc có những website không có favicon đã khiến máy chủ quá tải, vì trình duyệt yêu cầu quá nhiều favicon mà trả về 404, trình duyệt cứ đi tìm favicon.
Bạn không cần tác động gì đâu trình duyệt cũng đã làm rất tối ưu rồi, quan trọng là bạn phải có favicon icon nhỏ nhé, nếu không có logo không có favicon nhét tạm cái ảnh nào thật nhẹ vào để cho trình duyệt nó xác nhận là favicon cũng được.
themes hay tự bạn có khai báo trong html trong ưu tiên favicon thế nào trình duyệt sẽ auto không tải ưu tiên nhé.
Trừ một trường hợp bạn chơi trội preload favicon như thế này.
Mình không khuyên bạn nên preload favicon nhé, nó rất tốt cho deskop những không tốt cho mobile mà destop pc cấu hình khủng load nhanh, nên không nên preload favicon làm gì
<link rel="preload" href="faviconn.png" as="image" type="image/png" onload="this.onload=null;this.rel='shortcut icon'"> <noscript><link href="faviconn.png" rel="shortcut icon" type="image/png"></noscript>
Đây là đoạn code để preload favicon nhưng năm 2020 thì mobile lên ngôi lên cái này cũng chỉ là để nói, nếu website của bạn có đoạn code này thì xóa đi nhé.
Nếu không có thì coi như là tốt rồi.
Khi trình duyệt load xong favicon cũng là khai báo trình duyệt đã hoàn tất tải trang.
Ưu tiên 7: ảnh bình thường
Sự thật là để ảnh mà nó load sau favicon.
bạn cần phải áp dụng kỹ thuật lazy load ảnh.
Nếu bạn chưa biết lazy load là gì và mà muốn áp dụng lazy load ảnh thì bạn có thể tham khảo bài viết này nhé: Lazy load ảnh là gì? Tối ưu lazy load ảnh
Kỹ thuật lazy load mình thấy các trang lớn của Việt Nam như điện máy xanh, fpt… taobao của trung quốc đều sử dụng lazy load, là một kĩ thuật quan trọng trong tải nghiệm người dùng, khi các ông lớn dùng lazy load ảnh tôi được củng cố niềm tin của tôi rằng toàn những ông lớn sử dụng lazy load chắc họ đã nghiên cứu kĩ hết rồi, một blogger nhỏ nhoi như mình thì sao phải suy nghĩ.
phần thêm ưu tiên thứ 8: lazy load iframes, nếu bạn nhúng video youtube hay google maps, nếu bạn đang sử dụng ở phần cuối cùng nhé.
Tăng tốc nhúng video youtube WordPress, lazy load iframes
Tóm tắt:
HTML => CSS ~ FONT => ảnh đầu tiên hiển thị thường là logo => jquery => javascript => favicon icon => ảnh bình thường => iframes
Dĩ bất biến ứng vạn biến, đây là bản tuần hoàn thứ tự tải mà do mình sáng tạo ra mình cảm thấy rất tuyệt vời còn mỗi một tình huống thì có cách sử lý khác nhau.
Đây là nguyên lý thứ tự tải mà mình cảm thấy rất phù hợp cho gần 80% website WordPress, không phải là tất cả website WordPress mà là đa phần có thể sử dụng được.
Cá nhân mình thì gần như mình nhận dự án cho khách hàng thì 90% đều dùng sơ đồ này mà thi triển, có một số trường hợp đặc biệt là khác thôi.
Mình vẫn đang sử dụng thứ tự tải này cho wp tăng tốc và vẫn đang cảm thấy rất tốt ưu.
Chúc bạn thành công !! 😄 😄
Để lại một bình luận