Xử lý javascript và css chặn hiển thị, tăng tốc độ tải trang

Việc tối ưu tốc độ cũng như là điểm số cho website  đối với các Webmaster luôn là một yếu tố quan trọng. Cũng vì vậy mà có khá nhiều các công cụ kiểm tra tốc độ website được ra đời. Và một công cụ được khá nhiều Webmaster sử dụng đó là PageSpeed Insights của Google.

Ảnh: Google images

Vì vậy, hôm nay mình xin được chia sẻ tới các bạn cách xóa JavaScript và CSS chặn hiển thị nội dung trong màn hình đầu tiên.

Tuy nhiên, theo mình thì việc tối ưu theo điểm số của PageSpeed Insights là không cần thiết, theo mình thì việc tối ưu này chỉ có giá trị cao đối với các trang nhỏ hoặc các trang landing page, còn với các web có nội dung lớn thì khó có thể đạt được điểm số đẹp trong PageSpeed. Thực tế thì giá trị của website của bạn là nằm ở nội dung, tốc độ chỉ ảnh hưởng 1 phần tới SEO, việc một website cần làm tốt là giữ chân người dùng ở lại và quay lại :)

Loại bỏ JavaScript chặn hiển thị trong nội dung

Đầu tiên, mình sẽ hướng dẫn các bạn cách xóa JavaScript chặn hiển thị trong nội dung. Như các bạn đã biết, thông thường chúng ta sẽ chèn với cú pháp như sau:

<script src='link file js' type='text/javascript'>

Tuy nhiên, để không bị cảnh báo file js đang chặn hiển thị nội dung nữa thì các bạn chỉ cần thêm async=” vào trong thẻ html trên là được. Và ta sẽ có một thẻ html mới như sau:

<script async='' src='link file js' type='text/javascript'>

Loại bỏ CSS chặn hiển thị trong nội dung

Cũng như JavaScript, CSS cũng là một thành phần làm cho điểm số website của bạn bị giảm xuống. Để khác phục điều này, thay vì các bạn chèn file CSS theo cách truyền thống:

<link rel='stylesheet' href='link file CSS' type='text/css'/>

Thì các bạn hãy chèn nó theo cách như sau:

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("link file CSS 1");loadCSS("link file CSS 2");
//]]>
</script>

OK, như vậy là xong rồi đấy, các bạn hãy thử lưu lại và tự kiểm tra kết quả nhé!