Tăng tốc load 5 lần cho Blog/Website bằng cách tối ưu code

VIEW:

BÀI LIÊN QUAN

 Blogger/ Website của bạn bị chậm chạm, đó là điều không nên có và đem lại nhiều phiền toái cho chủ nhân cũng như khách vào website tốc độ trang web là một trong những yếu tố quan trọng mà quyết định sự thành công của nó khi nói đến việc thu hút và giữ chân giao thông. Tất cả các công cụ tìm kiếm lớn như Google khuyến khích và đề nghị làm cho các trang web đáp ứng và nhanh chóng.

Hôm nay, chúng ta sẽ tập trung vào các tính năng sau và đặc biệt cho blog đặt trên nền tảng blogger của Google. Trước đây, chúng ta đi sâu vào hướng dẫn; Tôi sẽ tư vấn cho bạn để có được kiến thức cơ bản hoặc làm việc sao chép và dán HTML hoặc mã CSS trong template blogger. Nếu bạn đã mày mò với mẫu thiết kế của bạn, không có gì có thể được tốt hơn. Sau khi hoàn thành các bước được đề cập dưới đây, bạn có thể tăng tốc blog của bạn bằng nhiều nếp gấp. Một số nguyên tắc được đề cập ở đây có thể được áp dụng trên các nền tảng khác quá. Như mọi khi, tôi sẽ cảnh báo bạn trước tiên thử những kỹ thuật này trên một blog giả. Và, trong khi thực hiện nó trên blog sống của bạn, giữ một bản sao lưu của thiết kế và nội dung hiện có của bạn. Vì vậy, chúng ta hãy bắt đầu tung quá trình tối ưu hóa này để làm blog blogger của chúng tôi, một tờ.

Hãy nhìn vào thực tế

 Tôi sẽ bắt đầu với việc phân tích tình trạng hiện tại của blog blogger trong câu hỏi. Cho rằng, Google cung cấp một công cụ tuyệt vời gọi là PageSpeed Insights . Nhập địa chỉ blog của bạn vào hộp văn bản và nhấn Enter. Sau khi xử lý nó, công cụ sẽ hiển thị số tốc độ cho cả hai chế độ điện thoại di động và máy tính để bàn cùng với những khó khăn và những đề nghị để sửa chữa chúng. 

Như trong hình trên, bạn có thể thấy một số mẫu cho chế độ máy tính để bàn. Lý tưởng nhất, điểm số này nên là 85+ cho cả chế độ điện thoại di động và máy tính để bàn. Bất cứ điều gì bên dưới nó đòi hỏi sự chú ý. Hãy nhớ rằng, nếu bạn đang xuất bản bài viết dài có chứa số lượng lớn các hình ảnh, số điểm của họ vẫn có thể giữ ở mức dưới 85 là khá hợp lý và có thể thể bỏ qua ngay cả sau khi quá trình tối ưu hoàn tất. 

Vì vậy, tôi giả định rằng bạn đã sử dụng công cụ này và đã có tốc độ trang của bạn điểm số cho cả máy tính để bàn và chế độ di động và họ đang cách dưới 85. Ngay dưới những điểm số này, bạn sẽ tìm thấy những lý do và đề nghị mô tả để sửa chữa các tắc nghẽn. 

  

 Render CSS chặn và nguồn JavaScript

vì vậy, thủ phạm chính là CSS bên ngoài và các nguồn tài nguyên JavaScript bạn đang sử dụng với mẫu hiện tại của bạn. Điều này có thể bao gồm Google fonts CSS, một thư viện JavaScript phổ biến như jQuery và các tập tin CSS bổ sung. Đây chỉ là một ví dụ về các tập tin mà có thể được ngăn chặn kịp thời render các trang web liên kết với blog blogger của bạn. 

Bạn sẽ nhận được một danh sách đầy đủ như vậy làm ngăn chặn các tập tin trên các trang điểm tốc độ trang để bạn có thể làm việc với chúng. Vì vậy, hãy bắt đầu và bắt đầu quá trình tối ưu hóa tốc độ.

1. Loại bỏ tập tin Font

Hầu hết các nhà xuất bản blogger sử dụng phông chữ của Google để tăng cường những mẫu chữ của blog của họ. Những phông chữ có thể pep lên mẫu của bạn nhưng họ đến với một chi phí. Đó là một trong render chặn nguồn tài nguyên làm chậm blog. Vì vậy, giải pháp là gì? Trong trường hợp bạn đang sử dụng WordPress hoặc một số CMS khác với máy chủ web của bạn, tôi sẽ đề nghị một lần cố kỹ thuật này cho lần font chữ tải tối ưu . 

Tôi đã không kiểm tra kỹ thuật này, vì vậy tôi không chắc chắn nếu nó sẽ làm việc một cách chính xác trên máy chủ của bạn. Bây giờ, trở lại blog blogger của chúng tôi cần sự chú ý của chúng tôi. Giải pháp là chết đơn giản. Không được sử dụng bất kỳ tập tin phông chữ nào cả. Tôi đang sử dụng Georgia, Arial và Helvetica trên blog này và nó hoạt động mà không có bất kỳ tập tin phông chữ CSS bên ngoài. Nếu bạn đang loại bỏ phông chữ Google, chắc chắn rằng bạn thay thế chúng với một sự kết hợp của các phông chữ web an toàn mà gel tốt với mẫu thiết kế của bạn. 

Vì vậy, nếu bạn thực sự quan tâm đến việc làm cho blog blogger của bạn, một dây kéo, chỉ cần loại bỏ bất kỳ phông chữ yêu cầu tập tin CSS trong template của bạn.

2. Kết thúc Reliance trên jQuery & Make nhỏ Script file Inline

Hầu hết các blog hiện nay chủ yếu dựa trên jQuery để làm việc liền mạch của các tính năng khác nhau và hiệu ứng. Nhưng với sự cải thiện các tiêu chuẩn HTML và CSS mới, hầu hết các tính năng này có thể được hoàn thành với CSS & HTML. 

Nếu bạn vẫn còn sử dụng một số các tính năng yêu cầu jQuery, cố gắng tìm một giải pháp mà không cần một . Tại thời điểm này, công cụ tìm kiếm Google là người bạn tốt nhất của bạn. Một khi bạn đã chắc chắn bạn không còn cần jQuery, chỉ đơn giản là xóa các yêu cầu bao gồm các tập tin điều đó. 

Đó là một trong hai mặt trong tiêu đề hoặc trong chân của một mẫu blogger. 

Bạn vẫn có thể sử dụng một hoặc nhiều tập tin JavaScript mà không có sự phụ thuộc . Trong khi blog của bạn lấy về các tập tin từ một máy chủ bên ngoài, trang web quá trình dựng hình là bị chặn. Các giải pháp cho vấn đề này là rất đơn giản. Trừ khi, những tập tin này là rất lớn, chỉ cần đảm inline code của họ trong mẫu của bạn. 

Nói cách đơn giản, thay vì kêu gọi các tập tin từ một máy chủ bên ngoài, bạn sẽ trực tiếp dán mã của họ ngay trong template blogger của bạn. Bắt đầu với tiết kiệm tất cả các tập tin trên máy tính để bàn của bạn và từng người một mở chúng trong trình biên tập mã yêu thích của bạn. Hãy chắc chắn rằng bạn nhận xét ra các thẻ bao gồm tập tin kịch bản trong mẫu của bạn để làm việc mã nội tuyến có thể được kiểm tra. 

Hãy nhớ rằng, không mở các tập tin trong một trình soạn thảo văn bản định dạng ( ví dụ như Microsoft Word ) khác mã của bạn có thể bị hỏng. Đối với mỗi mã tập tin, tạo ra các đoạn sau đây của khối mã kịch bản bao gồm cả trong tiêu đề hoặc ngay trước khi kết thúc của mẫu thân bên trong mẫu. Hãy để tôi giải thích nó trong các bước sau đây.

<script type='text/javascript'>
/*<![CDATA[*/
// code javascrip
/*]]>*/
</script>

Đối với mỗi mã tập tin, sao chép nó từ trình soạn thảo văn bản và dán nó vào vị trí chỉ ra ở trên trong đoạn mã. Bây giờ sao chép toàn bộ đoạn mã này và dán nó ngay trước </body> thẻ. Bây giờ một lần mở bài viết của blog của bạn để kiểm tra xem các tính năng / chức năng yêu cầu mã script đang làm việc tốt hay không. Nếu nó không làm việc, chuyển mã để các tiêu đề mẫu và dán vào nơi trước </header> thẻ.

3. Chuyển toàn bộ mã CSS trong header

Blogger template CSS được chia thành 3 phần. Các phần phổ biến nhất và có thể nhìn thấy là các mẫu mã thiết kế nhúng ở dạng inline trong header. Người dùng làm việc trên mã CSS này để thực hiện thay đổi trong các mẫu thiết kế. Tuy nhiên, có hai file CSS bên ngoài khác mà đi theo thể loại của render chặn nguồn lực góp phần làm chậm blog. 

Hai tập tin là:
     1. 728935430-widget_css_bindle.css - file CSS này bao gồm các mã mặc định cho các widget blogger chung chung như bài viết phổ biến phụ tùng, nhãn widget và nhiều hơn nữa. ( Tiền tố số của tập tin này có thể khác nhau trong mẫu của bạn. )
      2. authorization.css - Tập tin này bao gồm hai hoặc nhiều dòng mã CSS. Thành thật mà nói, tôi không chắc chắn những gì sử dụng của nó.

Nền tảng Blogger tự động dò tìm hai làm ngăn chặn các file CSS với mỗi yêu cầu trang. Bây giờ, để thoát khỏi vấn đề này, chúng ta cần phải loại bỏ hai tập tin. Nhưng, nếu chúng ta trực tiếp loại bỏ những tập tin này, các mẫu sử dụng các vật blogger chung chung có thể phá vỡ bóp méo toàn bộ thiết kế. 

Vì vậy, một giải pháp lý tưởng là không chỉ loại bỏ các tập tin mà còn để sao chép mã của họ ngay trước khi chúng tôi thiết kế mẫu hiện có. Đây là một quá trình hai bước sẽ được hoàn thành một cách cẩn thận. Hãy chắc chắn rằng bạn sao lưu các mẫu của bạn trước khi hoàn tất bước này. 

Trước hết lưu nội dung của cả các tập tin trong file văn bản riêng biệt đồng bằng. Bây giờ, tìm đoạn code sau trong template blogger của bạn. Nó hiện diện ở phần đầu của mã CSS template của bạn trong tiêu đề.

b:skin><![CDATA[

Thay thế nó bằng đoạn code sau đây.

<style type="text/css">

&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>

<style type='text/css'>

Bây giờ, hãy tìm đoạn mã sau. Bạn có thể tìm thấy nó ở cuối mẫu mã CSS trong tiêu đề.

]]></b:skin>

Thay thế nó bằng đoạn code sau đây.

</style>

Bây giờ, sao chép các gói đang phụ tùng CSS từ file văn bản và dán nó ngay bên dưới đoạn mã đầu tiên, chúng tôi đã thay thế trước đó. Sau đó, sao chép mã giấy phép CSS từ file văn bản thứ hai và dán nó ngay bên dưới mã bó tùng CSS. Bây giờ, lưu mẫu của bạn. Bạn đã chỉ định hai làm ngăn chặn các file CSS đã được làm chậm blog blogger của bạn. Đến thời điểm này, blog của blogger của bạn được mở khá nhanh khi so sánh với phiên bản cũ của nó.

4. Loại trừ Widgets & Google+ Script Files (Footer)

Một hai làm ngăn chặn các nguồn lực có hai tập tin JavaScript bao gồm tự động bởi nền tảng Blogger. Một trong số đó là một kịch bản Google+ và một trong những khác là liên quan đến tất cả các vật dụng blogger sử dụng trên các blog. Cả hai tập tin được gọi là ở phần cuối của các mẫu. 

Vô hiệu hóa bao gồm của hai tập tin là chết đơn giản. Nhưng, sau khi loại trừ cả những tập tin này, một vài thay đổi xảy ra trong vòng blogger dashboard của Giao diện phần và một số điều quan trọng khác cần phải được chăm sóc để đảm bảo bạn không phá vỡ khuôn mẫu thiết kế của bạn. 

Đầu tiên, chúng ta hãy xem làm thế nào để dễ dàng loại trừ cả những tập tin từ chúng tôi bản mẫu. Đến cuối của mã mẫu của bạn và tìm thấy những </body> thẻ. Thay thế nó bằng đoạn code sau đây.

&lt;!--</body>--&gt;&lt;/body&gt;

Bây giờ lưu mẫu. Như tôi đã nói trước đây, bao gồm cả những tập tin này đòi hỏi sự chú ý nhiều hơn bởi các chủ sở hữu blog trong khi làm việc với các mẫu. Nếu bạn mở một bài đăng trên blog của bạn trong một trình duyệt web và kiểm tra mã nguồn của nó, bạn sẽ nhận thấy rất nhiều mã nhận xét ra ở phần cuối của mẫu mà còn bao gồm cả các tập tin chúng tôi muốn thoát khỏi. 

Mã Widget Blogger trong footer

Như thể hiện trong hình trên , bạn có thể nhìn thấy cả các tập tin kịch bản bây giờ được nhận xét ra và không còn cản trở quá trình render nên trang web qua đó đẩy blog của bạn đáng kể. 

tại thời điểm này, nếu bạn nhấp vào Giao diện tùy chọn bên trong bảng điều khiển của bạn, bạn sẽ nhận thấy rằng toàn bộ cấu trúc bố trí hiện nay là liên kết theo chiều dọc như một chồng các hộp lưu giữ trên đầu trang của nhau như thể hiện trong hình dưới đây. 

Blogger widgets bố trí ngăn xếp

không cần phải hoảng sợ. Chỉ cần chăm sóc của một điều cực kỳ quan trọng từ đây trở đi. Nếu bạn đang làm cho một số thay đổi trong các vật dụng hiện có trong mẫu thiết kế của bạn, không có gì cần phải được thực hiện và bạn có thể chỉnh sửa chúng một cách tự do. Nhưng, nếu bạn đang đi để thêm một widget mới hoặc tìm cách để xóa một widget cũ, thay thế đoạn mã trở lại với bản gốc </body> thẻ. 

Một khi bạn đã thực hiện sự thay đổi đó và đã lưu mẫu, bạn có thể thêm hoặc xóa các widget. Một lần, bạn đã hoàn thành việc bổ sung widget hoặc quá trình xóa, bạn lại có thể thay thế các </body>thẻ với các đoạn mã đã đề cập ở trên. Bằng cách này, mẫu này sẽ không phá vỡ và nó sẽ làm việc. 

Vì vậy, điều này hoàn thành quá trình tối ưu hóa để tăng tốc blog blogger của bạn. Bạn lại có thể kiểm tra tốc độ blog của bạn thông qua công cụ PageSpeed Insights và bạn sẽ nhận thấy rằng bạn đang nhận được một số điểm tốt đó là cách cao hơn điểm số của bạn. Khách truy cập blog của bạn cũng sẽ nhận được ngạc nhiên khi thấy thời gian tải nhanh hơn đáng kể các bài viết blog của bạn.

5. Hướng dẫn thêm Tối ưu hóa tốc độ

Ngoài việc hoàn thành các bước quan trọng, bạn có thể làm theo thông lệ tốt nhất bổ sung và hướng dẫn đảm bảo blog của bạn vẫn rực nhanh chóng đưa ra các kinh nghiệm duyệt web tốt nhất cho du khách. Dưới đây là một số những lời khuyên này:
 1. Trong khi sử dụng hình ảnh trong bài viết blog, chắc chắn bạn web tối ưu hóa chúng để giảm kích thước trang tổng thể.
 2. Đừng nén mẫu mã thiết kế CSS của bạn để tiếp tục giảm kích thước trang web.
 3. Trong khi thêm tất cả các nội tuyến JavaScript đoạn mã, hãy chắc chắn rằng bạn nén các kịch bản quá.
 4. Nếu có thể, giảm bớt số lượng của các vật dụng được sử dụng trên blog của bạn.
 5. Sử dụng họa tiết hình ảnh , bất cứ nơi nào có thể.