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í 17++ 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)

Contents

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

Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...

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...

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ế giới ở trong kỷ nguyên số và thương mại trực tuyến đang trở thành trụ cột của nền kinh...
    30 giây trước
  2. Microbelift.vn là website cung cấp những sản phẩm Microbe-Lift của Ecological Laboratories Inc - công ty công nghệ sinh học...
    10 giây trước
  3. Từ ngàn xưa, con người sinh sống phụ thuộc rất nhiều vào thiên nhiên. Gần thiên nhiên con người cảm...
    22 giây trước
  4. Như chúng ta đã biết, để lấy Newsfeed dạng cuộn đến cuối trang và load thêm trang tin giống như...
    9 giây trước
  5. Nghiên cứu từ khóa là một khái niệm đã có từ lâu và đây là một công việc khá tốn...
    19 giây trước
  6. Nếu thế giới có mạng internet thì có thể không có ứng dụng hoặc trò chơi nhưng không thể không...
    9 giây trước
  7. Giảm Thời gian phản hồi của máy chủ là một giá trị quan trọng để theo dõi vì tất cả...
    2 giây trước
  8. Bạn đang cố gắng nỗ lực cải thiện tốc độ load trang Web của mình trên các thiết bị di...
    16 giây trước
  9. SEO là gì? Làm thế nào viết bài chuẩn SEO cho người mới bắt đầu? Bài viết hôm nay sẽ...
    9 giây trước
  10. Nghiên cứu từ khóa là một trong những công việc quan trọng nhất trong SEO. Đây là quá trình dùng...
    29 giây trước