Ở bài trước tôi đã viết về một số vấn đề, nguyên nhân chính làm Blogspot tải chậm. Ở bài viết này, tôi sẽ hướng dẫn các bạn các tối ưu tăng tốc độ tải cho Blogspot chạy nhanh như ngựa xích thố của Quan Vũ khi xưa!
\
1. Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên:
Google cung cấp cho người dùng một công cụ hỗ trợ kiểm tra lỗi tải trang chậm rất hữu dụng mà chắc chắn ai quan tâm đến tốc độ tải trang cũng biết đó là Google Speed Insight. Hầu hết chúng ta sử dụng các template được chia sẻ miễn phí trên mạng, và khi sử dụng công cụ kiểm tra tốc độ Google Speed Insight đều có báo lỗi cơ bản đó là JavaScipt và CSS chặn hiển thị, dưới đây là hình ảnh mô tả chi tiết lỗi này:
Đối với một số trường hợp bạn có thể xóa bỏ đoạn mã dạng như http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js để tăng tốc độ tải trang như Google gợi ý tuy nhiên bạn có thể bị ảnh hưởng nghiêm trọng đến hiệu ứng của website như menu không chạy được,... nhưng rất may là chúng ta có cách không cần xóa đoạn mã này đi mà vẫn đảm bảo tốc độ tải trang được.
Để tối ưu đoạn Jquery chặn hiển thị này các bạn cần làm các bước sau:
- Cách 1: Truy cập vào "Chỉnh sửa HTML" của Blogspot rồi nhấn tổ hợp 2 phím sau Ctrl + F sau đó nhập từ khóa tìm kiếm là chính đoạn Jquery trên. Các bạn sẽ thấy đoạn mã sau <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/> các bạn cần bỏ đoạn mã này đi và thay bằng đoạn mã dưới đây: <script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'></script>
- Cách 2: Thay đoạn mã ban đầu bằng đoạn mã sau: <script type='text/javascript'> //<![CDATA[ <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/> //]]> </script>
2. Xóa bỏ 2 file css mặc định mặc định của blogspot:
- Bước 1: Các bạn truy cập html của blogspot tìm kiếm đoạn mã sau đây: <b:skin><![CDATA[
- Bước 2: Thêm đoạn mã <!--<style type='text/css'/>--> vào ngay trước đoạn mã html trên.
3. Sử dụng thẻ điều kiện:
Đối với CSS không dẫn link và HTML các bạn sử dụng công cụ siêu nén để nén CSS, HTML, JS theo liên kết sau đây: http://www.willpeavy.com/minifier/
Còn đối với CSS dẫn link thông thường Blogspot cần tải JavaScript của trang chủ lẫn bài viết một lúc nên tốc độ rất chậm, khi đó chúng ta có thể sử dụng cách dùng thẻ điều kiện để tách riêng JavaScript của trang chủ và bài viết ra:
<b:if cond='data:blog.pageType == "item"'>
File javascript
</b:if>
Nếu chỉ dùng ở trang chủ dùng code:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
File javascript
</b:if>
4. Tối ưu hóa file css dạng font icon hay dẫn link như font chữ chúng ta dùng đoạn javascript 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>
File javascript
</b:if>
Nếu chỉ dùng ở trang chủ dùng code:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
File javascript
</b:if>
4. Tối ưu hóa file css dạng font icon hay dẫn link như font chữ chúng ta dùng đoạn javascript sau:
//<![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>
Ví dụ: có 2 link là font chữ và icon
<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("http://fonts.googleapis.com/css?family=Segoe UI|Arial|Open+Sans:400,300,300italic,400italic,600|Segoe UI:400,300,700");loadCSS("//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css");
//]]>
</script>
<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("http://fonts.googleapis.com/css?family=Segoe UI|Arial|Open+Sans:400,300,300italic,400italic,600|Segoe UI:400,300,700");loadCSS("//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css");
//]]>
</script>
5. Tối ưu hóa hình ảnh:
Để tốt nhất cho việc tải trang nhanh chóng bạn chỉ nên sử dụng hình ảnh định dạng jpg và hạn chế sử dụng các hình ảnh như png,..
Hình ảnh không cần thiết phải quá nét, quá chi tiết do đó bạn cần giảm dung lượng của ảnh bớt đi.
- Để nén ảnh định dạng png bạn sử dụng công cụ sau: https://tinypng.com/
- Để nén ảnh định dạng jpg bạn sử dụng công cụ sau đây: http://compressnow.com/fr/
0 Nhận xét