Tối ưu web wordpress để pagespeed insights màu xanh

Chạy quảng cáo ads không phải bỏ tiền ra là có thể có khách hàng. Website cần tăng điểm trải nghiệm của khách hàng mà còn tính đểm của công cụ Google Pagespeed Insights. Các hạng mục điểm website đó rất quan trọng trong việc xếp thứ hạng trang. tham khảo: webmtp.com/toi-uu-hoa-website-wordpress-tren-pagespeed-insights

//www.gomahamaya.com/test-website-speed-page-speed-performance/

//www.gomahamaya.com/boost-site-speed/

//www.gomahamaya.com/defer-parsing-of-javascript/

Chỉnh theo kết quả Pagespeed Insights

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
• PluginAutoptimize
• VPS / Hosting hỗ trợ Litespeed
• PluginLitespeed

Đặ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.

1. Xem ngay cách tối ưu hình ảnh JPG / JPEG
2. Tối ưu hình ảnh PNG
3. Tối ưu hình ảnh SVG
4. 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àoFlatsome > Advanced > Performancevà tích 2 dòngEnable lazy loading of banner and section backgroundsvàEnable lazy loading for images. It will generate an inline blank Base64 image with the same aspect ratio as the original imagelà 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ó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: [code] 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 ); [/code] 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: [code] 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. } [/code] Ở đ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: [code] wp_enqueue_script($handle, $src, $deps, $ver, $in_footer) [/code] 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ỗitrì 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.onlinekiể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 trangfont-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 [code] @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”;} [/code] 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: swapcầ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 [code] ## 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 ## [/code] Và thêm đoạn này: [code] # 1 Month for most static assets <filesMatch “.(css|jpg|jpeg|png|gif|js|ico)$”> Header set Cache-Control “max-age=2592000, public” [/code] 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 [code] ExpiresByType image/svg+xml “access plus 1 year” [/code] 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ápwp_dequeue_style,wp_dequeue_scriptvà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: [code] 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’); } [/code]

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.

Cách khác dùng plugin tăng điểm

Plugin WP Meteor Page Speed Optimization Topping giúp chúng ta tăng tốc độ tải trang và đồng thời tăng điểm google pagespeed insights để chiều anh Google và chiều Khách hàng. Dù điểm số có thể cao nhưng đổi lại bạn phải chấp nhận đôi khi vào website có thể sẽ có 1 số phần tử bị load chậm hơn bình thường (nhập tên miền enter rồi để chuột yên đó chờ nó load nên cảm thấy chậm. Còn người dùng vào web cái sẽ có hành động di chuột thì lúc đó js sẽ dc load luôn và không phải chờ 2s mới load js dẫn đến không còn cảm giác chậm nữa). Plugin này thật sự làm mình bất ngờ khi nó tăng điểm 1 cách kinh khủng luôn. Plugin này đã làm cho các js (js của web và cả js của các công cụ khác như chat online, google tracking, facebook fixel…) không tải ngay khi khách vào website mà cho tới khi người dùng thực hiện hành động nào đó hoặc trễ trong khoảng thời gian nào đó do mình cài đặt. Sau đó vào cài đặt tại menuCài đặt > WP Meteorvà chọn mức độ bạn muốn. Hiện tại plugin có 3 mức độ là: 1, 2 và ∞. Như web demo mình để ở mức 2 nhé cả nhà Các mức độ đó có ý nghĩa gì?

• Mức 1:Dành cho web nào hiện tại đang tốc độ load thực tế rất nhanh dưới 1s mà điểm google pagespeed insights vẫn thấp. Ở mức độ này sẽ ít ảnh hưởng tới trải nghiệm của người dùng nhất.
• Mức 2:Dành cho website tốc độ load thực tế chưa được nhanh lắm. Ở mức độ này đa số là điểm google đã xanh lét lèn lẹt rồi nha cả nhà. Nhưng nhược điểm của nó là ở màn hình đầu tiên có thể 1 số phần tử sẽ bị load chậm hơn. ví dụ như ảnh mà để ở lazyload sẽ bị load chậm hơn bình thường
• Mức ∞tại mức độ này thì mọi js đều không được load cho tới khi nào người dùng thực hiện 1 hành động nào đó trên trang thì js mới được load. Mở mức này thì chắc chắn điểm web bạn sẽ xanh nhưng trải nghiệm người dùng cũng như bộ đếm google tracking có thể sẽ không làm việc

Cài plugin này rồi có cần cài plugin cache khác không? ồ chắc chắn rồi. Plugin này chỉ hỗ trợ bạn tải chậm các js tránh gây ảnh hưởng ở thời gian đầu load trang thôi nên bạn vẫn cài các plugin cache khác như bình thường nhé. Để điểm số được như ý các bạn cần tối ưu ảnh, css và cache page tĩnh nữa nha. Ví dụ combo đầy đủ nhất mình hay dùng là

• Redis cache để tối ưu cho sql
• Opcache để lưu cache các file php
• WP Rocket để lưu trang tĩnh. nếu dùng WP Rocket các bạn cứ bật full option lên nhé (Hoặc các plugin cache khác như Autoptimize, WP Total Cache, WP Super Cache, LiteSpeed Cache… tùy vào hosting của bạn)

Tham khảo thêm cách cấu hình plugin cache //thuthuatwp.com/cau-hinh-w3-total-cache-chuan/

Dịch vụ tối ưu hóa tăng tốc website wordpress chuyên nghiệp

WPVN.XYZ 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ợ.

Trì hoãn chạy JavaScript trong WordPress

Trì hoãn phân tích cú pháp JavaScript có nghĩa là chỉ tải tệp JavaScript sau khi tất cả tệp HTML và css được tải hoàn toàn. Đó là nhiều lý do khiến chúng ta nên trì hoãn việc tải javascript. Nhưng hầu hết mọi người đều cân nhắc đến tốc độ khi hoãn các tệp JavaScript. Các tệp JavaScript được đặt giữa thẻ head của trang web của chúng tôi và khi trình duyệt thực hiện lệnh gọi đến tất cả các tệp, nó được gửi theo trình tự nhất định của nó. Vì Google yêu cầu chúng tôi ưu tiên nội dung trong màn hình đầu tiên mà chỉ có thể được thực hiện bằng cách hoãn tất cả các tệp JavaScript và Loại bỏ JavaScript và CSS chặn hiển thị trong màn hình đầu tiên . Để nâng cao tốc độ, Google đã phát hành amp (các trang được tăng tốc trên thiết bị di động) tải mà không cần tệp javascript và ngày nay điều này rất quan trọng đối với tất cả các trang web.

Lợi ích của việc Trì hoãn phân tích cú pháp JavaScript .

• Tăngtrải nghiệm người dùngbằng cách tải trang web trong mili giây.
• Tăngthứ hạng SEO của bạn.
• Google Bots sẽthu thập dữ liệutrang web của bạnnhanh hơn

Để làm được điều đó, bạn cần đăng nhập vào wp-admin của mình. Sau đó nhấp vào giao diện rồi đến trình chỉnh sửa chủ đề. Bên trong đó, tìm tệpFunction.phpvà dán mã 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 );

Ngoài ra dùng sử dụng các plugin: Wp rocket, Comet cache, WP Deferred JavaScripts, Autoptimize, W3 Total Cache, Speed Booster Pack, Wp fastest cache. Ví dụWp rocket (gomahamaya.com/defer-parsing-of-javascript/)

Thay đổi tốc độ trang web

< link  rel = "preload"  href = "/fonts/inter.woff2"  as = "font"  type = "font/woff2"  crossorigin "> 
< link  rel = "preload"  href = "/images/hero.webp"  as = "image" >

<!-- Trên trang /đăng nhập của bạn, hãy tải trước các tài nguyên của bảng điều khiển --> 
< link  rel = "prefetch"  href = "/dashboard/bundle.js" > 
< link  rel = "prefetch"  href = "/dashboard/main.css" >

< link  rel = "preconnect"  href = "//fonts.googleapis.com" > 
< link  rel = "preconnect"  href = "//fonts.gstatic.com"  crossorigin "> 
< link  rel = "preconnect"  href = "//api.yourapp.com" >

< link  rel = "dns-prefetch"  href = "//analytics.yourapp.com" > 
< link  rel = "dns-prefetch"  href = "//cdn.thirdparty.io" >

< link  rel = "modulepreload"  href = "/src/utils.js" > 
< link  rel = "modulepreload"  href = "/src/router.js" > 
< link  rel = "modulepreload"  href = "/src/store.js" >

<head> 
  < meta  charset = "UTF-8" > 
  < meta  name = "viewport"  content = "width=device - width, initial-scale=1.0" > <title> 
  Ứng dụng của tôi </title> < !-- Bước 1: Khởi động các kết 

  nối bên thứ ba trước --> 
  < link  rel = "preconnect"  href = "//fonts.googleapis.com" > 
  < link  rel = "preconnect"  href = "//fonts.gstatic.com"  crossorigin "> 
  < link  rel = "dns-prefetch"  href = "//analytics.myapp.com" > 

  <!-- Bước 2: Tải trước các tài nguyên quan trọng của trang hiện tại --> 
  < link  rel = "preload"  href = "/fonts/inter.woff2"  as = "font"  type = "font/woff2"  crossorigin "> 
  < link  rel = "preload"  href = "/images/hero.webp"  as = "image" > 

  <!-- Bước 3: Tải bảng định kiểu --> 
  < link  rel =" <head> <  link href = "/styles/main.css" href = "/styles/main.css" > 
  < link  href = "//fonts.googleapis.com/css2?family=Inter&display=swap"  rel = "stylesheet" > 

  <!-- Bước 4: Tải trước các trang có thể sẽ hiển thị tiếp theo (chạy nền, không khẩn cấp) --> 
  < link  rel = "prefetch"  href = "/dashboard/ bundle.js " > 
</head>