Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 15++ Năm (Từ 2006 đến Nay)

Defer code trong các tiện ích (widgets) – Tốc độ tải trang (Page Speed)

3.7/5 - (3 bình chọn)

Làm thế nào để UP tốc độ trang (Page Speed) với Widget Defer?

Có cách nào để hoãn một widget ở phần footer không?

Tôi có một external API trong một tiện ích ở footer và nó làm chậm tốc độ của trang. Cho tới khi trang đã được tải xong thì không cần dùng đến external API này. Bộ nhớ đệm plugin (caching plugin) mà tôi sử dụng (W3 Total Cache) có thể giúp tôi chọn hoãn các tập lệnh (script) khác ngoại trừ các tập lệnh (script) được mã hóa trực tiếp vào tiện ích.

Defer code trong các tiện ích (widgets) - Tốc độ tải trang (Page Speed) Widgets_API_WordPress_Codex

Đâu là cách tốt nhất để hoãn một cách thủ công mã tùy chỉnh API (custom code API) ở vùng WordPress widget của một footer.

Như thế này:

Defer code trong các tiện ích (widgets) - Tốc độ tải trang (Page Speed) defer-code-trong-cac-tien-ich-widgets-toc-do-tai-trang-page-speed-1

Vùng Footer #2

 

Defer code trong các tiện ích (widgets) - Tốc độ tải trang (Page Speed) defer-code-trong-cac-tien-ich-widgets-toc-do-tai-trang-page-speed-2

<script type=”text/javascript”>
baseUrl = “https://widgets.cryptocompare.com/”;
var scripts = document.getElementsByTagName(“script”);
var embedder = scripts[ scripts.length – 1 ];
var cccTheme = {“General”:{“background”:”#ffffff14″,”borderWidth”:”0″,”borderColor”:”none”},”Tabs”:{“background”:”#ffffff08″,”color”:”#eee”,”activeBackground”:”#ffffff14″,”activeColor”:”#fff”},”Row”:{“color”:”#eee”,”borderColor”:”#016ac1″},”Trend”:{“colorDown”:”#b7b6b6″,”colorUp”:”#50dcb6″,”colorUnchanged”:”#dddddd”},”Conversion”:{“color”:”#006ac1″}};
(function (){
var appName = encodeURIComponent(window.location.hostname);
if(appName==””){appName=”local”;}
var s = document.createElement(“script”);
s.type = “text/javascript”;
s.async = true;
var theUrl = baseUrl+’serve/v1/coin/multi?fsyms=BTC,LBC,ETH&tsyms=USD,BTC,GBP,CNY’;
s.src = theUrl + ( theUrl.indexOf(“?”) >= 0 ? “&” : “?”) + “app=” + appName;
embedder.parentNode.appendChild(s);
})();
</script>

Ba câu trả lời

1. Cái này thì không có liên quan gì đến WordPress cả. Đây chỉ là hành vi trình duyệt trong các tập lệnh tải lên (loading script). Việc bạn để ý thấy defer sẽ không hoạt động với các tập lệnh nội tuyến (inline scripts) là đúng. Vì vậy, cách tiếp cận dễ dàng nhất là thêm một event listener vào tập lệnh có vai trò tổ chức thực hiện cho đến khi trang đã được tải xong.

window.addEventListener (“load”, function() {
… your script …
}

Câu trả lời của cjbj 


Tại sao hoãn tập lệnh trong một WordPress Widget lại không có liên quan đến WordPress vậy?  – Invariant Change 2 days ago


Không. Nó giống như với chiếc iPhone của bạn khi bạn đang ngồi trong xe ô tô, cũng không có liên quan gì đến BMW. – cjbj 2 days ago


@cjbj nói đúng đấy. – T.Todua 2 days ago


Cả cjbj and @T.Todua đều đúng. Đó chỉ là vấn đề lựa chọn. Cá nhân tôi thì thích cho tập lệnh vào một tệp. Tôi sẽ upvote cả hai giải pháp. – Remzi Cavdar 2 days ago


Tôi thắc mắc không biết có chức năng defer widget codeX hay cái gì tương tự hay không, nhưng tôi hiểu ý của bạn! – Invariant Change 2 days ago


Tôi đã thêm cái này vào vùng footer widget nhưng không có kết quả gì. – Invariant Change 2 days ago


Không có gì hiện ra như trong ” không tập lệnh trong mã nguồn (no script in the source code)” hay ” tập lệnh trong nguồn nhưng không có gì được tải lên (script in the source but nothing loaded)”? – cjbj yesterday


 

2. @cjbj đúng đấy, tôi ủng hộ ý kiến của anh ấy. Tuy nhiên bạn có thể thử cách tiếp cận khác nếu muốn – cho tập lệnh đó vào một tệp (ví dụ: wp-content/your_script.js) rồi sau đó chèn nó vào widget với defer:

<script src=”https://yoursite.com/wp-content/your_script.js” defer></script>

Tái bút: Tập lệnh (script) của bạn trông có vẻ không được chuyên nghiệp (có lẽ là không được viết bởi các chuyên gia javascript). Để buộc nó nằm trong vùng html cụ thể (specific html area) của bạn, hãy làm thế này:

  • Cho tập lệnh vào div: <div id=”my_cripto”><script src…….></div>
  • Trong tệp .js, hãy thực hiện chỉnh sửa như sau:

var embedder = document.getElementById(“my_cripto”);

Trả lời bởi T.Todua


Tôi vừa thử làm cách này, nhưng nó lại thành ra thế này  i.imgur.com/cZ2Fszc.jpg – Invariant Change 2 days ago


Nó phải được để ở trong vùng footer widget! Có vẻ như vì lý do nào đấy mà nó bị nhảy ra ngoài – Invariant Change 2 days ago


@InvariantChange tôi vừa thêm phần cần thiết cho trường hợp của bạn ở câu trả lời, kiểm tra lại nhé – T.Todua yesterday


 

3. Mã của bạn hiển thị một tập lệnh nội tuyến (inline script), nó thêm một thẻ tập lệnh mới (script tag) vào DOM, điều này có thể làm chậm tốc độ tải trong trang web của bạn. Vì vậy đây không phải là một inline script tag. Hãy thử thêm dòng này s.defer = true; sau s.async = true; để thêm thuộc tính defer vào script tag của bạn. Và nó sẽ trông như thế này:

var s = document.createElement(“script”);
s.type = “text/javascript”;
s.async = true;
s.defer = true; //add this line
var theUrl = baseUrl+’serve/v1/coin/multi?fsyms=BTC,LBC,ETH&tsyms=USD,BTC,GBP,CNY’;
s.src = theUrl + ( theUrl.indexOf(“?”) >= 0 ? “&” : “?”) + “app=” + appName;
embedder.parentNode.appendChild(s);

Việc này sẽ dẫn đến một script tag mới (được đặt là s trong mã của bạn) sẽ được thêm vào tất cả các tập lệnh (script) mà trang sẽ tải và nó sẽ trông như thế này:

<script type=”text/javascript” async defer src=”https://widgets.cryptocompare.com/serve/v1/coin/multi?fsyms=BTC,LBC,ETH&amp;tsyms=USD,BTC,GBP,CNY”></script>

Defer code trong các tiện ích (widgets) - Tốc độ tải trang (Page Speed) defer-code-trong-cac-tien-ich-widgets-toc-do-tai-trang-page-speed-5

 


Tôi đã thêm nó vào nhưng có vẻ không có gì khác hơn cả… i.imgur.com/JE3GyqJ.jpg – Invariant Change 2 days ago


@InvariantChange có nghĩa là tập lệnh (script) của bạn chỉ được lưu trữ trong bộ nhớ cache trong vòng 10 giây vào trình duyệt, đây là một thời gian rất ngắn và đòi hỏi một bản tải xuống mới của cả tập lệnh sau 10 giây. Nếu bạn thực sự muốn sửa, bạn cần phải tăng thời gian này lên. Nhưng việc này không có ý nghĩa với async hay defer đối với một thẻ tập lệnh (script tag) ;). – Александр Фишер 21 hours ago

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Thời gian tải quá nhiều có thể gây hại cho trang web của bạn theo nhiều cách. Có một vài cách...
    28 giây trước
  2. Thực sự mà nói thì có hàng trăm cách kiếm tiền miễn phí từ Internet. Chỉ bằng việc search online,...
    7 giây trước
  3. Lamvt Group được sáng lập bởi Vũ Thành Lâm cùng các bạn hữu và các học trò nhằm mục đích...
    24 giây trước
  4. Nếu bạn đã có một công việc làm copywriter ở một cơ quan nào đó, bạn có thể sẽ cảm...
    20 giây trước
  5. Xã hội hiện đại đang phát triển xu hướng tương tác trực tuyến cho công việc, học tập, mua sắm,...
    18 giây trước
  6. Top 10 công cụ kiểm tra Backlink, Việc sở hữu những backlink chất lượng cho trang web của bạn là...
    26 giây trước
  7. Backlink là một trong những mẹo SEO được sử dụng khá phổ biến hiện nay. Đã có rất nhiều bài...
    2 giây trước
  8. Hình ảnh có sức mạnh hơn vạn lần lời nói. Bởi vậy, việc sử dụng hình ảnh trong SEO một...
    30 giây trước
  9. Bạn có cập nhật các hướng dẫn mới nhất về nghiên cứu từ khóa không? Nghiên cứu từ khóa đã là...
    4 giây trước
  10. Bạn muốn bắt đầu xây dựng một Website Online của riêng mình? Đối với những ai không thuộc dân công...
    19 giây trước