Tôi đã tối ưu hóa website wordpress trên pagespeed insights như thế nào?
Tôi đã tối ưu hóa website wordpress trên pagespeed insights như thế nào? Từ một người chuyên về chỉnh sửa ảnh trên Photoshop đến nhân viên marketing online, sau đó tôi chọn ngành website là nghề dừng chân lựa chọn để phát triển. Tôi hiểu được khách hàng cần gì và mong muốn điều gì ở bất kỳ sản phẩm của mình. Đối với website, không những website phải đẹp, gọn, dễ sử dụng mà còn phải nhanh, điểm tối ưu trên Pagespeed insights phải cao.
Sau nhiều ngày nghiên cứu cách chấm điểm của công cụ Google Pagespeed Insights, tôi nhận thấy các hạng mục điểm đó rất quan trọng trong kinh doanh sản phẩm trên website. Nó chiếm đến 5/10 phần quyết định khách hàng có mua hàng của chúng ta trên website hay không? Và quảng cáo của chúng ta có chạy thuận lợi hay không?
Hôm nay, tôi sẽ viết một bài chia sẻ kinh nghiệm về việc tôi đã tối ưu hóa website wordpress trên Pagespeed Insights như thế nào?
Chuẩn bị những thứ cần thiết
- Website muốn tối ưu: Ở đây tôi sẽ tối ưu hóa trên chính website trên nền wordpress của mình (webmtp.com)
- Lựa chọn themes phù hợp. Trong website tối ưu của bài viết này, mình sử dụng theme Flatsome.
- Công cụ Google Pagespeed
- Công cụ Gtmetrix
- Plugin Autoptimize
- VPS / Hosting hỗ trợ Litespeed
- Plugin Litespeed
Đặc biệt, bạn cần ưu tiên sử dụng Hosting / VPS có cài đặt Litespeed để việc tối ưu được xảy ra suôn sẻ hơn. Ở đây tôi khuyến nghị bạn sử dụng Hosting / VPS tại công ty Web MTP để có thể theo sát với bài hướng dẫn này.
Các hạng mục quan trọng cần thực hiện để tối ưu hóa website wordpress
- Rút gọn CSS & JS và đặt chúng thành một dòng trên một file duy nhất
- Trì hoãn tải các CSS & JS
- Nội tiếng JS bên thứ 3 như analytics
- Chuyển đổi liên kết thư viện của WordPress thành một subdomain
- Tối ưu hình ảnh bằng cách dùng Photoshop, Pngyu và Base64
Các kỹ năng cần có trước khi tối ưu hóa website wordpress
- Kỹ năng đọc hiểu ngôn ngữ HTML / CSS / JS
- Kỹ năng cơ bản về PHP
- Kỹ năng cơ bản về Photoshop
- Kỹ năng cơ bản về tìm kiếm và thay thế
- Am hiểu cơ bản về cấu trúc của WordPress
- Biết sử dụng Hosting / VPS
Tại sao cần có các kỹ năng trên?
Việc tối ưu một website thật sự không khó mà cũng không dễ, để dễ dàng hơn trong công cuộc tối ưu thì bạn cần có một người hướng dẫn tận tình nếu không tự tin thực hiện. Hoặc bạn cần phải có các kỹ năng trên để am hiểu các dòng code trong website của bạn, từ đó có thể tối ưu một cách dễ dàng.
Bắt đầu tối ưu hóa website WordPress
Trước tiên, mình sẽ show cho các bạn thấy website của mình trước khi tối ưu:
Trên thiết bị di động nhìn rất là buồn luôn, lúc ban đầu mình cũng chẳng hiểu tại sao điểm lại thấp như vậy, có 9-20. Cảm giác như tuyệt vọng vậy =))
Trên máy tính để bàn thì khả quan hơn chút, nhưng so với thang điểm của Pagespeed thì điểm số trên máy tính để bàn như vậy cũng chưa ăn thua gì.
Check thêm trên Gtmetrix thì thế này:
Nhìn thôi đã muốn phá sản rồi các bạn ạ. Điểm load page lên tới 7.4s, tổng kích thước của page mà 1.69MB trong khi trang chủ của mình chẳng có cái gì nặng cả và thêm ông Requests khá cao lên tới 74.
Sơ qua thì website này chưa thể kinh doanh được, chưa nói tới chuyện phải SEO được nữa.
OK, bây giờ mình sẽ bắt tay vào làm ngay luôn cho nóng.
Trước hết mình sẽ vào VPS / Hosting có hỗ trợ Lite Speed Full Option, bật nó lên và kết nối tới website webmtp.com.
- Đối với các bạn đang xài VPS đã được cài sẵn Lite Speed rồi thì không cần bật trên VPS nữa mà chỉ cần cài plugin Lite Speed vào là được.
- Đối với các bạn đang dùng hosting có Litespeed thì các bạn truy cập vào hosting, sau đó vào mục LiteSpeed Web Cache Manager > Nhấn WordPress Cache > Scan rồi Enable website của mình lên.
Kế tiếp, vào quản lý trang website wordpress cài đặt Plugin Litespeed > Kích hoạt. Thường trên Hosting / VPS bên mình sẽ không cần thiết lập thông số gì cả, chỉ cần kích hoạt là xong (các bạn có thể mua Hosting hoặc VPS ngay). Còn các bạn xài bên khác thì sẽ có thông số thiết lập riêng, liên hệ bên nhà cung cấp Hosting / VPS để kiểm tra nhé.
Sau khi cài đặt Litespeed xong, chúng ta check lại điểm page một lần nữa xem sao nhé!
Nhìn có vẻ nhỉnh lên thêm chút so với lúc ban đầu rồi. Bây giờ mình sẽ check xem ông Google Pagespeed nói gì về website của mình nhé.
Rồi, một mớ kinh hoàng mà các bạn sẽ không muốn gặp phải đã xuất hiện.
Ở đây, webmtp đang gặp phải các lỗi như sau:
- Trì hoãn tải các hình ảnh ngoài màn hình
- Phân phối hình ảnh ở định dạng mới hiệu quả hơn
- Loại bỏ các tài nguyên chặn hiển thị
- Rút gọn Javascript
- Xóa biểu định kiểu xếp chồng (CSS) không dùng
- Đảm bảo văn bản vẫn hiển thị khi tải Font chữ web
- Giảm thiểu công việc theo chuỗi chính
- Phân phối các nội dung bằng chính sách bộ nhớ đệm hiệu quả
- Tránh kích thước DOM quá lớn
- Giảm thời gian thực thi JavaScript
- Tránh các tài nguyên lớn trên mạng
OK, bây giờ mình sẽ đi tối ưu từng lỗi một.
Tối ưu hình ảnh trước khi tải lên website
Trong mỗi website đều có các định dạng ảnh như JPG / JPEG / PNG / SVG, ngoài việc tạo cookie cho các hình ảnh này thì ta cần phải nén hoặc tối ưu các hình ảnh này trước khi tải lên website. Vì vậy, ở đây tôi chia thành 3 dạng hình ảnh cần tối ưu.
- Xem ngay cách tối ưu hình ảnh JPG / JPEG
- Tối ưu hình ảnh PNG
- Tối ưu hình ảnh SVG
- Chuyển đổi và sử dụng hiệu quả hình ảnh dạng Base64
Trì hoãn tải các hình ảnh ngoài màn hình (Defer loading of off-screen images)
Đây là mục đơn giản nhất mà ai cũng có thể làm được, trên theme Flatsome đã hỗ trợ sẵn công cụ Lazy Loading. Các bạn chỉ cần vào Flatsome > Advanced > Performance và tích 2 dòng Enable lazy loading of banner and section backgrounds và Enable lazy loading for images. It will generate an inline blank Base64 image with the same aspect ratio as the original image là xong.
Đối với các bạn không xài theme Flatsome thì cài đặt plugin Autoptimize. Sau đó vào thiết lập > Images, tích chọn Lazy-load images và lưu lại.
Phân phối hình ảnh ở định dạng mới hiệu quả hơn (Distribute images in the new format more effectively)
Đây là phần các bên dịch vụ sẽ làm trước cho khách hàng hoặc các bạn phải tự mình làm lấy. Các định dạng hỗ trợ website tốt mà Google Pagespeed khuyên dùng là JPEG / WEBP. Thường thì mình sẽ dùng JPEG hoặc JPG là thân thiện nhất đối với người dùng website. Định dạng WEBP thường sẽ được tự chuyển đổi từ các định dạng ảnh khác sang WEBP khi website được kết nối với CDN (Content Delivery Network) và hỗ trợ tự động convert.
Tại sao chỉ nên dùng WEBP trên CDN?
Định dạng WEBP không được hỗ trợ trên trình duyệt Safari, như vậy người dùng iPhone, Mac mà đang sử dụng Safari sẽ không thể xem hình ảnh trên website của chúng ta được. Và đối với đa số mọi người sẽ không đi quá sâu vào để lập trình ra một công cụ có thể tự động hiển thị định dạng WEBP khi người truy cập không dùng trình duyệt Safari khi truy cập website. Và nếu chúng ta có lập trình ra được một công cụ như vậy thì cũng không nên kích hoạt nó, bởi sẽ làm cho dung lượng lưu trữ của website tăng lên cao hơn bình thường.
Bạn nào thích sử dụng CDN thì có thể tham khảo các bên cung cấp như Cloudflare, viettelidc, vncdn,…
Loại bỏ các tài nguyên chặn hiển thị (Remove Render Blocking Javascript and CSS)
Google khuyến nghị xóa hoặc trì hoãn các tệp Javascript can thiệp vào việc tải website của chúng ta. Để làm được điều này, các bạn cần phải biết một chút về code (ít nhất là HTML). Trước hết chúng ta click vào hạng mục này trên Google Pagespeed để xác định xem website đã tải những tệp tin gì:
Đến đây các bạn sẽ một website có thể chứa vô số các tệp tin, những tệp tin này có thể cần được sử dụng và cũng có thể không được sử dụng. Vì vậy, công việc của chúng ta là xác định xem các tệp tin nào không được sử dụng và ghi nó ra trong một notepad. Sau đó chúng ta tìm đến các tệp tin đó và xóa nó đi.
Nhưng các bạn đừng nghĩ chỉ xóa rồi là xong nhé. Trong các dòng code của website có những dòng “GỌI” các tệp tin này. Chúng ta phải tìm được các dòng đó và xóa đi nữa thì việc xóa file không cần thiết trên website mới hoàn thành.
Đến đây chắc sẽ có vài bạn tự hỏi tại sao những file đó không cần thiết mà thằng thiết kế theme web này lại đưa vào?
Nói thật thì tôi cũng đã từng tự hỏi như vậy và sẽ giải thích cho các bạn hiểu một cách đơn giản là: Người lập trình ra theme này không phải chỉ dành riêng cho công việc kinh doanh của bạn, mà còn cho những người khác dùng nữa. Có người thì làm website bán mỹ phẩm, có người thì làm website bán điện lạnh, có người giày da, có người thì dép lào,… nên nhiệm vụ của người lập trình theme này là để có thể đáp ứng được tất cả những người dùng như vậy. Và đương nhiên nếu bạn đang bán mỹ phẩm thì chắc chắn sẽ không cần các chức năng của ông bán dép lào đúng ko? Vậy nên chúng ta phải loại bỏ các file của ông dép lào đi để website của chúng ta nhẹ hơn.
Tiếp theo việc tối ưu.
Chắc một điều, file nào không dùng thì xóa đi. Nhưng có những file không dùng ở thời điểm này, nhưng lại dùng ở thời điểm khác thì chúng ta không được xóa file đó đi, mà hãy hoãn tải các file đó lại hoặc đặt điều kiện sử dụng file đó.
Để làm được điều này, chúng ta có thể sử dụng đoạn mã như sau:
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );Chèn đoạn mã trên vào file Function.php trên theme của bạn và lưu lại. Đoạn mã trên sẽ giúp các file jquery được trì hoãn tải trên trang.
Hoặc / Và di chuyển các dòng gọi của file này xuống dưới thẻ <footer> thay vì đang ở <header>. Để áp dụng được điều này, các bạn cần tìm các dòng gọi trên header và xóa đi, sau đó thêm đoạn mã sau vào:
add_action('wp_enqueue_scripts', 'enqueue_my_scripts');
function enqueue_my_scripts()
{
wp_enqueue_script('wmtp-jquery-migrate', get_template_directory_uri() . '/wp-includes/js/jquery/jquery-migrate.min.js', array('jquery'), false, true);
//Làm tương tự cho các tệp js / css khác.
}Ở đoạn mã trên mình muốn đưa file jquery-migrate.min.js xuống <footer> sẽ dùng đến lệnh có cú pháp:
wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)Giải thích về các biến bên trong:
- $Handle – Handle là tên duy nhất mà file script của bạn có. Ví dụ script của tôi được gọi là “wmtp-jquery-migrate”.
- $Src – src là vị trí đường dẫn của script. Bạn có thể sử dụng Plugins “What the file” để có được chính xác URL của thư mục plugins hoặc nếu biết code thì có thể sử dụng hàm plugin_url.
- $DEPS – DEPS là dependence. Khi script sử dụng jQuery, thì website sẽ thêm jQuery vào dependence. WordPress sẽ tự động tải jQuery nếu nó không được tải sẵn trên trang web.
- $Ver – Đây là số phiên bản của script. Tham số này là không cần thiết nên tôi đã đặt nó thành False.
- $In_footer – Đây mới là biến quan trọng, chúng ta muốn tải JavaScripts và CSS vào footer nên chúng ta sẽ thiết lập nó là True.
Khi các bạn đã làm được hết phần này, thì đã giải quyết được lỗi trì hoãn tải các hình ảnh ngoài màn hình (Defer loading of off-screen images)
Rút gọn Javascript (Minify Javascript) và rút gọn CSS (Minify CSS)
Đến phần này thì khỏe hơn xíu rồi. Để rút gọn Javascript hay CSS thì các bạn có thể sử dụng plugin Autoptimze click chọn như sau:
Như vậy là đã giải quyết được lỗi Minify Javascript một cách dễ dàng. Công cụ Autoptimize đã khá mạnh rồi nên chúng ta có thể không cần sử dụng đến code nữa. Nếu bạn nào có nhã hứng sửa code thì có thể thử với gợi ý của tôi dưới đây:
Gộp các file CSS thành 1 file duy nhất và các file Javascript thành 1 file duy nhất. Sau đó xóa các lệnh “gọi” file đi và để lại 1 lệnh gọi của file đã gộp. Như vậy, chúng ta đã giải quyết được bài toán Minify Javascript & CSS
Xóa biểu định kiểu xếp chồng CSS không dùng (Remove Unused CSS)
Mặc dù người thiết kế website có PRO đến đâu đi nữa, tôi cũng tin chắc họ sẽ để thừa một số dòng CSS không cần dùng đến vì đã có dòng khác thay thế. Công việc của chúng ta là loại bỏ các dòng CSS thừa đó đi là được. Để có thể xem các file nào có tỉ lệ css không dùng đến thì các bạn có thể sử dụng công cụ: purifycss.online kiểm tra và tải xuống bản CSS hoàn thiện hơn.
Mặc khác, bạn có thể chuyển các dòng trong file css thành 1 dòng duy nhất và hạn chế khoảng trống bằng cách dùng công cụ sau: jonassebastianohlsson.com
Khuyến nghị: Backup website trước khi thực hiện thay đổi các file CSS.
Đảm bảo văn bản vẫn hiển thị khi tải Font chữ web
Mặc định các theme wordpress thường sử dụng font từ Google Font, nhưng điều này làm cho website của chúng ta trong khi load sẽ phải kết nối đến Google Font và load font về website. Như vậy sẽ làm chậm tốc độ tải website của chúng ta.
Vì vậy, để có thể khắc phục việc này, chúng ta cần phải đưa Font chữ từ Google Font lên website và kết nối cục bộ.
Các bạn truy cập: fonts.google.com, sau đó chọn font chữ mình thích hoặc website của các bạn đang sử dụng font gì thì chọn font đó trên Google Font và tải về.
Khi tải về, định dạng font sẽ là *.ttf và việc của chúng ta cần làm là convert định dạng *.ttf sang *.woff2. Các bạn có thể truy cập trang font-converter.net để thực hiện việc chuyển đổi định dạng.
OK, sau khi chuyển đổi định dạng xong, chúng ta tải font *.woff2 lên hosting bằng cách sử dụng Winscp, Filezila hoặc truy cập trực tiếp vào hosting ở mục File Manager > Publish_html tạo một folder mới đặt tên là fonts.
Tiếp theo, chúng ta vào tệp styles.css hoặc bất cứ nơi đâu bạn có thể chèn code CSS và dán đoạn mã dưới đây vào
@font-face {
font-family: "roboto";
src: url("./fonts/roboto.woff2") format("woff2"); /* Modern Browsers */
font-weight: normal;
font-style: normal;
font-display: swap;
}
h1,h2,h3,h4,h5,h6 {font-family: "roboto";}
p, span {font-family: "roboto";}
nav > li {font-family: "roboto";}roboto: là tên font của bạn, đặt tên tùy ý. Sau đó bạn muốn gắn vào thẻ nào thì liệt kê thẻ đó ngay bên dưới. Ở đây tôi gắn các thẻ h, p, span và li trên menu sẽ dùng font roboto.
font-display: swap cần được thêm vào để giúp font được tải tối ưu hơn.
Và bạn có thể làm tương tự với các font khác để khắc phục lỗi Đảm bảo văn bản vẫn hiển thị khi tải Font chữ web.
Phân phối các nội dung tĩnh bằng chính sách bộ nhớ đệm hiệu quả (Leverage browser caching)
Để có thể kích hoạt bộ nhớ đệm thì ngoài việc chúng ta sử dụng Litespeed thì chúng ta thêm các đoạn mã dưới đây vào file .htaccess
## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
## EXPIRES CACHING ##Và thêm đoạn này:
# 1 Month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"Trên đây là các định dạng sẽ tạo cache. Nếu trên website của bạn có thêm định dạng khác thì bạn có thể thêm vào. Ví dụ đối với webmtp thì tôi có thêm định dạng ảnh SVG thì tôi thêm dòng
ExpiresByType image/svg+xml "access plus 1 year"Như vậy chúng ta đã tiếp tục hoàn thành thêm một lỗi nữa.
Tránh kích thước DOM quá lớn
Đây là lỗi mà các bạn sẽ rất hay gặp phải bởi tính cầu toàn của bản thân. Một trang có rất nhiều DOM, DOM ở đây là những thành phần trên trang web của chúng ta.
Trên website cứ mỗi 1 element là 1 DOM, chỉ cần 1 khối tin như hình thôi là đã sinh ra mấy chục DOM rồi.
Vậy chúng ta cần phải làm thế nào để hạn chế nhiều DOM?
Cách tốt nhất là nhìn lại tổng website xem phần nào cảm thấy dư thừa thì hãy bỏ nó đi, có như vậy các bạn mới có thể giảm DOM cho website.
Giảm thời gian thực thi JavaScript
Cũng như lỗi chặn hiển thị JavaScript, các website WordPress luôn chứa nhiều JavaScript (JS) từ theme và plugin, bạn có thể tắt bớt plugin để giảm thời gian thực thi JavaScript hoặc nếu không thể tắt bớt plugin thì tìm cách loại bỏ bớt JavaScript nào không cần dùng đến trên plugin. Để làm được điều này, các bạn có thể sử dụng biện pháp wp_dequeue_style, wp_dequeue_script và wp_enqueue_style, wp_enqueue_script để tắt và thay thế các tệp tin tối ưu hơn.
Ví dụ một function mà tôi đã sử dụng để tối ưu:
add_action( 'wp_enqueue_scripts', 'wmtp_change_style_script', 99 );
function wmtp_change_style_script() {
wp_deregister_script('flatsome-js');
wp_register_script('flatsome-js', get_stylesheet_directory_uri() . '/assets/js/flatsome.js', false, false, true);
wp_enqueue_script('flatsome-js');
}Tránh các tài nguyên lớn trên mạng
Tránh các tài nguyên lớn trên mạng nghĩa là gì? Trang web của chúng ta sẽ luôn bắt buộc tích hợp các mã js từ bên thứ 3 như Google Analytics, Facebook Pixel, tích hợp Fanpage,… như vậy website của chúng ta sẽ phải tải một mớ tài nguyên đó về web để hiển thị. Điều này sẽ làm cho website của chúng ta tải chậm hơn.
Vì vậy, nếu các bạn buộc phải tích hợp các mã js của bên thứ 3 vào thì lời khuyên của mình là đừng đưa nó vào công cụ Google Tag Manager rồi trỏ lên website. Có thể Tag Manager giúp các bạn quản lý các mã JS dễ dàng nhưng vô tình lại làm cho website của các bạn bị chậm đi. Và cố gắng loại bỏ các JS bên thứ 3 không cần thiết trên website của các bạn để giảm lỗi tài nguyên lớn này.
Lời kết: Để kết thúc bài viết này thì tôi xin cảm ơn các bạn đã theo dõi bài viết này và chúc các bạn thành công! Nếu có thắc mắc gì, các bạn hãy comment bên dưới nhé!
Và đây là kết quả của Web MTP sau khi tối ưu:
Dịch vụ tối ưu hóa tăng tốc website wordpress chuyên nghiệp
Web MTP sẽ khiến bạn hài lòng với đội ngũ nhân viên chuyên nghiệp kết hợp cùng các kỹ năng thiết kế, lập trình và chăm sóc website từ các lập trình viên sẽ tư vấn và hỗ trợ khách hàng xây dựng một website 100% chuẩn SEO, tốc độ load trang “tiêu chuẩn”, nội dung thu hút, tăng traffic và tăng thứ hạng website lên TOP nhanh chóng.
Nếu bạn đang có nhu cầu về tối ưu hóa website wordpress thì hãy liên hệ ngay với chúng tôi để được hỗ trợ tại:
Website: https://webmtp.com/
Hotline: 0931 91 23 79
Email: tung@webmtp.com
Hân hạnh được đồng hành cùng quý khách hàng!
Các bước thiết kế website chuyên nghiệp – Quy trình chuẩn tại Web MTP
Mời bạn xem nhiều bài hấp dẫn khác
Mời bạn đọc thêm