Hướng dẫn tăng tốc Favicon cho Wordpress

Biểu tượng Favicon (gọi là biểu tượng trang web) là một yếu tố dễ nhận biết được sử dụng bởi các trình duyệt web.

favicon giúp cho khả năng ghi nhớ và xây dựng thương hiệu. Biểu tượng yêu thích dành cho các tab trình duyệt (bên cạnh tiêu đề trang), thanh địa chỉ (bên cạnh URL), dấu trang và ô cửa sổ, nó còn giúp nhiều người dùng nhìn vào favicon xem website đã load xong chưa.

WordPress giúp bạn dễ dàng thêm biểu tượng favicon vào trang web của mình ngay từ WordPress Customizer themes. Đây thường là phương pháp được mọi người khuyến khích nhưng mình không khuyến cáo thêm favicon bằng cách này.

Nếu bạn thêm favicon bằng cách WordPress Customizer themes nó tạo ra nhiệt tệp hình ảnh favicon nặng nề. Vì lợi ích hiệu suât tốc độ, đừng làm theo cách đó WordPress Customizer themes hãy làm theo cách của mình trong bài viết này mình sẽ hướng dẫn cho tiết cho bạn!

Mình sẽ hướng dẫn bạn tối ưu favicon và hướng dẫn thêm favicon cho website WordPress từ a đến z

Phong cách thiết kế logo favicon

Đơn giản là sự tinh tế tối thượng.

hãy nhìn các hãng lớn xem. họ tập trung thiết kế không quá 4 bit màu đường nén phong cách style thì không nói mình chỉ nói ở đây là số lượng màu sắc họ kết hợp rất ít.

nếu một favicon dưới 4 bit màu thì sẽ rất nhẹ và đặc biệt khi ảnh dưới 4 bit mà sẽ sử dụng được định dạng png-8 tốc độ còn nhanh hơn nữa.

khi thiết kế logo hay favicon thì hãy cố gắng thiết kế càng đơn giản càng tốt, bạn có thể nhìn logo của mình xem nó có mấy màu nhé, rất ít màu vì vậy favicon rất nhẹ và siêu nhẹ.

trong favicon thì hãy thiết kế cho nó là dạng size hình vuông 1 x 1

bạn có thể tham khảo bài viết: thiết kế logo tối ưu cho website

Định dạng nào tốt nhất để làm Favicon

Kể từ HTML5, định dạng PNG cũng là định dạng được chấp nhận cho biểu tượng favicon.

Tất cả các trình duyệt phổ biến hiện nay đề hỗ trợ PNG, bạn không nhất thiết phải sử dụng định dạng ico như trước nữa.

Định dạng tốt nhất để làm favicon đó chính là định dạng png-8, nếu bạn tại sao thì bạn có thể học hỏi thêm về hướng dẫn chọn định dạng ảnh tối ưu

Size Favicon tối ưu

Các themes WordPress tạo ra 4 kích thước biểu tượng yêu thích khi bạn thêm biểu tượng trang web từ WordPress Customizer. Điều này là quá mức cần thiết. Hình ảnh gốc được tải lên Customizer có kích thước tối thiểu là 512 x 512 pixel.

Những bản sao hình ảnh mới này phụ thuộc vào chủ đề. Sau đó, WordPress sẽ tự xử lý các kích thước size khác từ tệp gốc favicon đó:

• Biểu tượng favicon 32 × 32 pixel. (cần thiết)
• Biểu tượng ứng dụng 180 × 180 pixel dành cho iOS cho đến iPhone 6+ (không cần thiết)
• Biểu tượng ứng dụng Android / Chrome 192 × 192 pixel. (không cần thiết)
• microsoft app 270 × 270 pixel dành cho Windows. (không cần thiết)

Tuy nhiên chúng ta sử dụng favicon chủ yếu là nhờ anh thanh niên Biểu tượng favicon 32 × 32 pixel. chứ không phải mấy cái kia, thực sự trả mấy ai lưu trữ icon website của bạn về màn hình máy tính, điện thoại, chắc chỉ có bạn mà thôi ăn chơi lắm thì người dùng lưu bookmark trình duyệt là yêu thương lắm rồi.

mà bookmark thì vẫn dùng 32px x 32px.

Size ảnh favicon tối ưu nhất theo mình: 32 x 32 pixel hoặc 48 x 48 pixel, nếu bạn cuồng tốc độ quá thì dùng 16 x 16 pixel nhưng mình vẫn khuyên thì hãy dùng 32 x 32 pixel size mình vẫn đang sử dụng cho WP Tăng Tốc.

Tại sao tôi khuyến cáo mọi người không nên uploads favicon bằng tùy chỉnh giao diện WordPress?

Nó crop đủ thứ và phân nhiều thể loại, nhưng tính năng crop ảnh của WordPress khi uploads png-8 bị lỗi tôi đang khá phàn nàn về điều đó hy vọng trong tương lai WordPress sẽ hoàn thiện về khoản này (vấn đề này có mặt hơn 5 năm nay rồi vẫn chưa được sử lý). Khi uploads ảnh định dạng png-8 sẽ bị lỗi nói là lỗi thì không hẳn mà là ( tính năng ngầm để các nhà phát triển plugin nén ảnh còn kiếm thêm chứ) size ảnh crop nhỏ nó còn dung lượng to hơn cả size ảnh chính nhiều người sẽ không để ý điều này cho lắm đó là sự thật.

Chính vì vậy mình không khuyến cáo là thêm favicon bằng tùy chỉnh giao diện hãy thêm trực tiếp kiểu của mình trong bài viết này có hướng dẫn nhé.

favicon vòng lập

Đây là kỹ thuật rất hay, kỹ thuật vòng lập favicon.

hiểu đơn giản trong bài viết trang website của bạn có tải một ảnh a.png xong bạn cũng lấy luôn ảnh a.png đó làm favicon.

Như vậy trình duyệt sẽ không tải lại lần chỉ cần tải 1 lần duy nhất làm giảm cũng được một khoảng thời gian.

cái này mình cũng hay áp dụng cho nhiều dự án khách hàng của mình.

Để áp dụng được kỹ thuật này thì trước tiên bạn cần phải:
1: skip-lazy load hãy loại bỏ hình ảnh lazy load nếu bạn đang sử dụng lazy load.
2: yêu cầu hình ảnh phải là hình vuông 1 x 1
3: không sử dụng WordPress Customizer themes mà sử dụng khai báo thẻ trực tiếp cái này phần dưới mình sẽ hướng dẫn cụ thể.

Không có favicon thì có giúp website load nhanh hơn không?

Nếu bạn không sử dụng favicon, nó sẽ tạo ra lỗi hoặc độ trễ 404 không mong muốn.

Vì vậy, đừng nghĩ rằng “không có favicon” là nhanh hơn. Trình duyệt chờ tải biểu tượng favicon – mãi mãi hoặc hết thời gian đã được định trong core của trình duyệt tùy vào trình duyệt. Đó là điều rất tồi tệ cho tốc độ website và cực kì tồi tệ cho tài nguyên của máy chủ.

Nếu không có favicon thì favicon báo 404 là cực kỳ tác hại đến tốc độ load website, vì nếu thiếu favicon trình duyệt xin phép yêu cầu favicon mà bạn không cấp được nó cứ vẫn xin yêu cầu favicon.

Favicon là yêu cầu bắt buộc của mọi trình duyệt web.

vì vậy dù có logo hay không bạn phải up favicon lên để khai báo cho trình duyệt là đã hoàn tất favicon nhé đừng bao giờ để favicon lỗi 404.

kinh nghiệm mình làm việc có những website không có favicon đã khiến máy chủ quá tải, vì trình duyệt yêu cầu quá nhiều favicon mà trả về 404, trình duyệt cứ đi tìm favicon.

Quan trọng là bạn phải có favicon icon nhỏ nhé, nếu không có logo không có favicon bạn nên nhét tạm cái ảnh nào thật nhẹ vào để cho trình duyệt nó xác nhận là favicon cũng được vẫn tốt hơn là không có favicon.

gửi yêu cầu từ tên miền thứ 3

favicon nếu được lưu chữ trũ từ tên miền thứ 3 sẽ có tốc độ tốt hơn nếu bạn lưu trữ ngay trính tên miền của bạn, bạn có thể sử dụng kỹ thuật cdn hay kỹ thuật share domain.

nói rõ hơn về cdn và share domain một chút, thì nhiều bạn hay bị hiểu nhầm về hãy kỹ thuật này, kiểu dạng khi dùng kỹ thuật này mọi người thường dùng kiểu domain subdomain cdn ví dụ như: cdn.wptangtoc.com kiểu dạng vậy

share domain hiệu ngắn gọn là cùng chạy trên một máy chủ và cùng ip nhưng khác nhau ở tên miền họ thêm subdomain. kỹ thuật này bây giờ cũng ít được sử dụng vì sự hiệu quả của nó không còn nhiều như trước vì sự thay đổi của http/2 ra đời.

share domain ra đời là kỹ thuật giảm sự giới hạn luồng bị giới hạn của giao thức trình duyệt, khi bạn sử dụng tên miền thứ 3 thì sẽ có thể nhồi thêm luồng yêu cầu được vào. nếu bạn không có giao thức http/2 thì hãy có thể sử tuyệt chiêu này nhé, nếu có giao thức http/2 thì vẫn có thể sử dụng vẫn mang lại sử hiệu quả nhưng không nhiều lắm.

Cách làm thì giờ tôi sẽ hướng dẫn cách bạn làm luôn.

Hướng dẫn thêm favicon cho WordPress tốt ưu

Bước 1: remove function hook WordPress Customizer themes, người lập trình viên themes WordPress sẽ thường viết tính năng thêm favicon trong WordPress Customizer themes, bây giờ mình cần xóa nó đi.

• trường hợp 1: nếu trong trường hợp bạn không thêm một hình ảnh nào favicon trong WordPress Customizer themes nó nhưng nó sẽ tự động themes favicon riêng của themes vào thì bạn bắt buộc phải xóa nó đi
• trường hợp 2: nếu trong trường hợp bạn không thêm một hình ảnh nào favicon trong WordPress Customizer themes nó không hiển thị bất cứ thứ gì thì không cần phải xóa nữa, coi như bước này bạn đã làm xong rồi.

nếu bạn đang sử dụng themes rơi vào trong trường hợp 1: thì bây giờ bạn cần phải tìm hàm function trong hook wp_head, thường các nhà lập trình viên themes sẽ nhúng favicon vào hook wp_head.

mình không sử dụng themes của bạn nên mình không biết chính xác hàm đó của bạn là gì, nên mình sẽ lấy ví dụ ra một themes đó là themes genesis ra hướng dẫn nhé.

remove_action('wp_head', 'genesis_load_favicon');

Bạn cho đoạn này vào file functions.php, nếu bạn sử dụng themes khác  không phải là themes genesis bạn hãy thay genesis_load_favicon bằng chính đoạn hàm của themes của bạn, mục đích của công việc này là một website thì không thể có 2 favicon chỉ có 1 là đủ rồi.

Bước 1.5: Wordpres cũng hỗ trợ khi bạn không có favicon nó sẽ tự động thêm favicon logo của họ vào giờ cần phải xóa tính năng nó đi.

add_action( 'do_faviconico', 'wptangtoc_favicon_remover_WordPress');
function wptangtoc_favicon_remover_WordPress() {
    exit;
}

Bạn cho đoạn này vào file functions.php

Bước 2: Bạn tạo lập favicon chỉnh sửa các thứ các thứ rồi giờ upload lên phần thư viên ảnh của WordPress thôi, như uploads ảnh bình thường, nếu đã có favicon tối ưu trước rồi thì không cần phải làm bước này nữa.

Bước 3: Bước thêm favicon

function favicon_wptangtoc_load_head(){
?>
<link rel="icon" href="https://wptangtoc.com/wp-content/uploads/2020/08/wp-tang-toc-favico.png" type="image/x-icon"/>
<?php
}
add_action( 'wp_head', 'favicon_wptangtoc_load_head',9999 );
add_action( 'admin_head', 'favicon_wptangtoc_load_head',9999 );

bạn đưa đoạn này vào file function.php rồi bạn hãy thay thế https://wptangtoc.com/wp-content/uploads/2020/08/wp-tang-toc-favico.png bằng chính đường dẫn favicon của bạn, hoặc nếu bạn dùng cdn hay share domain thì chỉ cần thay đổi đường dẫn link favicon, hãy dùng vòng lập favicon thì đưa chính xác url đó vào thế là xong.

Thay url bạn có thể dùng url tương đối hoặc tuyệt đối cũng được, nếu dùng tuyệt đối thì phải chính xác giao thức bạn đang sử dụng http hay https.

Nâng cao hơn thì bạn hãy để file favicon.png của bạn vào thẳng trực tiếp trong thư mục wp-content/themes/themes-cua-ban/ không phải là thư mục wp-content/uploads để giảm thiểu hạn chế khi bạn có dùng plugin nén ảnh tác động đến hình favicon này, png-8 là định dạng rất nhạy cảm rất ít plugin thực sự làm tốt được hình ảnh png-8 nếu plugin nén ảnh vớ vẩn thì size ảnh favicon sẽ to ra hơn chứ không phải là nhỏ lại.

Đoạn mã trên bạn chỉ cần thay đổi url favicon mình đã tối ưu thứ tử tải tối ưu cho favicon WordPress rồi nhé.

Như vậy là hoàn tất rồi.

Bây giờ clear xóa cache nếu bạn đang sử dụng cache rồi kiểm tra thành quả của mình nhé.

!! chúc bạn thành công 😀 😀

Tóm tắt:

Nói không với preload favicon đây là một kỹ thuật thời nguyên thủy bây giờ tác hại hơn là tác lợi, vì favicon preload sẽ rất tốt trên giao diện desktop nhưng lại rất hại cho giao điện thoại mà năm 2020 thì giao diện điện thoại đang nên ngôi người sử dụng bằng điện thoại để truy cập internet rất nhiều.

favicon nó cũng hơi vô bổ so với giao diện mobile, bạn truy cập vào mobile có thấy favicon nằm ở đâu không? còn giao diện desktop thì bạn có thể nhìn thấy, favicon size ảnh cỡ to đẹp các thứ thì không ai ngắm đâu hãy sử dụng tối ưu favicon thật sự nhẹ nhàng để cải thiện tốc độ load website, nếu không có favicon thì còn tệ hơn cả bạn cho favicon size ảnh cỡ lớn nhé như trong bài viết chia sẻ.

hy vọng bài viết này sẽ giúp website của bạn cải thiện thêm được tốc độ load website WordPress nhé.