Hướng dẫn tối ưu và tăng tốc Wordpress toàn tập

Chắc chắn bạn đã từng gặp những website có tốc độ “rùa bò” và bạn cảm thấy cực kỳ khó chịu đúng ko? Cảm giác của tôi lúc đó là chỉ muốn tắt ngay cửa sổ trình duyệt đi. Nếu là chủ một website thì hẳn bạn không bao giờ muốn độc giả của mình bị rơi vào trạng thái như vậy!. Thời gian tải trang trong khoảng 2 giây hoặc ít hơn được coi là tốt, khoảng 3 giây là chấp nhận được, còn nếu lâu hơn 3 giây thì 40% khách hàng sẽ rời bỏ trang web của bạn. Tất nhiên điều đó cũng chỉ mang tính tương đối, còn tùy thuộc vào trạng thái tâm lý, thói quen của từng người, tốc độ đường truyền mạng, nơi lưu trữ website (hosting)..v.v..và rất nhiều yếu tố khác.

Wordpress vốn là nền tảng rất tuyệt vời, nhưng có nhiều người lại cài đặt hàng tá plugins hay lựa chọn một máy chủ web chất lượng thấp khiến cho website wordpress của bạn trở nên chậm chạp. Thậm chí dù bạn không làm những việc dại dột đó nhưng vẫn có rất nhiều điều mà bạn có thể cải tiến để tối ưu và tăng tốc website wordpress của mình. Hơn nữa, Google cũng đưa tốc độ tải trang vào một trong những tiêu chí xếp hạng trên trang kết quả tìm kiếm. Điều này là dễ hiểu bởi Google luôn hướng người dùng tới những trải nghiệm web tốt nhất.

Dưới đây là một số cách tối ưu để cải thiện hiệu suất và tăng tốc Wordpress mà bạn nên làm:

1. Chọn host chất lượng tốt

Bạn có thể nghĩ đến việc tối ưu hóa một trang web wordpress sau khi bạn chắc chắn rằng máy chủ web của bạn làm việc tốt và không phải là nguyên nhân khiến website wordpress bị chậm. Gần đây tôi đã từng tối ưu hóa một trang web wordpress được lưu trữ trên Godaddy – một trong những máy chủ kinh khủng nhất mà tôi từng gặp. Dường như họ đã đặt hàng nghìn trang web trên cùng một máy chủ. Kết quả là cho dù làm mọi cách mà website vẫn chậm như rùa, thỉnh thoảng còn bị mất kết nối (timed out).

Bởi vậy, các bạn nên tìm hiểu thật kỹ trước khi quyết định mua host. Bạn nên hỏi người quen, những người đã có kinh nghiệm với các nhà cung cấp web hosting để nhờ họ tư vấn hoặc xem những bài viết đánh giá host của các Blogger uy tín. Hoặc lên các diễn đàn (forum) tạo Topic để tham khảo ý kiến của cộng đồng – bạn sẽ nhận được những thông tin khách quan nhất.

Sự thật là Phương cũng có kinh nghiệm với nhiều nhà cung cấp hosting và chia sẻ ở chuyên mục Hosting. Ngoài ra, bạn cũng nên đọc bài viết này: 6 lỗi thường gặp khi lựa chọn nhà cung cấp web hosting.

2. Sử dụng nền tảng (framework), giao diện (theme) nhẹ

Nếu sử dụng một Theme được đóng gói quá nhiều tính năng không cần thiết, nó sẽ làm chậm trang web của bạn. Theme nhẹ có chứa ít js và css giúp trang web của bạn tải nhanh hơn, hiển thị nhanh hơn. Theo kinh nghiệm của mình, các bạn nên sử dụng các theme framework như Genesis, Thesis, Headway kết hợp child theme bởi những framework này không chỉ rất nhẹ, mà còn đặc biết tối ưu SEO Onpage.

Ai làm website cũng muốn có một giao diện đẹp mắt để thu hút người xem. Và có những theme bạn rất thích, rất đẹp, nhưng lại chẳng nhẹ chút nào? Từ bỏ và lựa chọn cái khác ư? Đó là một cách nhưng chắc hẳn bạn không muốn rồi. Hãy đọc tiếp nhé, còn nhiều cách để tối ưu website wordpress lắm!

3. Sử dụng Plugin tạo bộ nhớ đệm (Caching Plugin)

Có rất nhiều plugin tạo bộ nhớ đệm giúp tăng tốc WordPress, nhưng mình khuyên các bạn chỉ nên sử dụng một plugin cache duy nhất và có hai lựa chọn tuyệt vời ở đây là W3 Total CacheWP Super Cache. WP Supper Cache dễ sử dụng và hiệu quả nó mang lại rất tuyệt vời, thậm chí trên nhiều dịch vụ hosting chất lượng như Hostgator, Jushost, Siteground đã tích hợp sẵn WP Super Cache trong trình cài đặt WordPress tự động. W3 Total Cache có nhiều lựa chọn cài đặt và tính năng hơn Super Cache, phù hợp với máy chủ hơn là shared hosting. Tôi thường sử dụng WP Super Cache cho trang web chạy trên Shared Hosting nên tôi sẽ hướng dẫn các bạn cài đặt, cấu hình và sử dụng WP Super Cache:

Bước 1: Cài đặt Plugin WP Super Cache

Có lẽ việc cài đặt Plugin cho Wordpress thì ai cũng biết rồi. Nếu bạn thực sự chưa biết hoặc đã quên thì xem lại ở đây: Hướng dẫn cài đặt plugin cho wordpress

Trước khi tiến hành cấu hình WP Super Cache, bạn cần chắc chắn rằng:

1 – File .htaccess đã có trong thư mục gốc của website (ngang hàng với thư mục wp-content) và CHMOD là 664 (hoặc cao hơn) để có thể ghi. Nếu chưa có, bạn có thể tự tạo và CHMOD cho file này.

2 – Bạn đã thiết lập Permalinks cho Wordpress. Tại Dashboard, vào Settings > Permalinks. Sau đó đặt Permalinks theo ý bạn rồi ấn Save Changes. Nên chọn Permalinks kiểu Post name (dạng https://dovanphuong.com/sample-post hoặc có thể thêm đuôi .html).

Cấu hình WP Super Cache:

Tại tab Easy, bạn chọn Caching On để bật cache cho website, rồi nhấn Update Status.

Hướng dẫn cấu hình WP Super Cache
Hướng dẫn cấu hình WP Super Cache

Sau đó, các bạn nhấn Test Cache ở ngay dưới để kiểm tra bộ nhớ đệm đã làm việc OK hay chưa. WP Super Cache sẽ tải trang web của bạn hai lần và so sánh mốc thời gian của trang web qua hai lần trên, nếu chúng giống nhau thì có nghĩa là bộ nhớ đệm đã được kích hoạt thành công, như hình:

Test Cache trong WP Super Cache
Test Cache trong WP Super Cache

Tab Advanced là phần thiết lập chính cho plugin này, tại đây bạn tích chọn tất cả những mục mà tác giả plugin đã để Recommended. Ngoài ra, bạn check thêm 3 lựa chọn nữa là

  • Don’t cache pages with GET parameters. (?x=y at the end of a url) – Không lưu bộ nhớ đệm cho trang kết quả tìm kiếm.
  • Clear all cache files when a post or page is published or updated. – Tự động xóa cache khi bài viết mới được đăng hoặc update.
  • Mobile device support – Nếu muốn sử dụng Cache cho các thiết bị di động.

Và nhấn Update Status để cập nhật những thay đổi cho plugin này. Bạn sẽ thấy hiện thêm ra một khoảng với tiêu đề là Mod Rewrite Rules và đó chính là những gì plugin này thêm vào file .htaccess. Kéo xuống dưới phần chữ với màu nền vàng nhạt này, click vào nút Update Mod_Rewrite Rules để thay đổi cho file .htaccess. Vì ta đã CHMOD cho file .htaccess là 664 (hoặc cao hơn), nên sau khi nhấn nút trên, các chữ sẽ được đổi thành màu xanh là OK (ghi thành công vào file .htaccess).

Kéo xuống phần Expiry Time & Garbage Collection ngay phía dưới, bạn sẽ thấy có:

  • Cache Timeout – thời gian hết hạn của cache trên Server, mặc định là 1800 giây;
  • Scheduler – tần suất thu gom những cache hết hạn trên. Ở đây bạn nên chọn là Timer, và đặt số giây cho nó, ví dụ tôi đặt là 3600.
Cấu hình Expiry Time cho WP Super Cache
Cấu hình Expiry Time cho WP Super Cache

Sau đó click nút Change Expiration ở ngay dưới để mọi thay đổi trong phần này được cập nhật lại.

Cấu hình khác cho WP Super Cache

WP Super Cache cung cấp cho chúng ta một vài tùy chọn thiết lập khác như CDN, Preload, nhưng đa phần bạn không cần chú ý tới các mục này.

Về phần CDN, để sử dụng được dịch vụ tốt nhất thì bạn phải trả phí, và nếu site của bạn không quá lớn, có thể dùng những dịch vụ miễn phí của Cloudflare, Incapsula, hay Google’s Pagespeed Service.

Mặc định WP Super Cache chỉ tạo bộ nhớ đệm cho các bài viết nào được xem. Tính năng Preload cho phép bạn tạo trước cache toàn bộ website (tất cả bài viết, pages, các files tĩnh). Bạn có thể sử dụng tính năng này khi muốn:

  • Giảm tải việc sử dụng tài nguyên cho máy chủ.
  • Áp dụng cho những trang web đã cũ, không còn được cập nhật nữa.
  • Cải thiện tốc độ website tốt nhất bằng các file tĩnh.

Hoặc một vài lý do khác, khi bạn muốn vô hiệu hóa hoàn toàn quá trình xử lý mã PHP trên máy chủ. Và tất nhiên, Website WordPress của chúng ta vẫn hoạt động bình thường.

Cấu hình Preload cho WP Super Cache
Cấu hình Preload cho WP Super Cache

Mặc định lựa chọn Refresh preload cache files có giá trị bằng 0, và nếu bạn muốn dùng tính năng này, phải nhập ít nhất là 30 (thời gian tối thiểu là 30 phút). Vì Preload sẽ cache toàn bộ site nên sẽ tốn tương đối thời gian và tài nguyên máy chủ (tùy thuộc vào site của bạn lớn hay nhỏ). Tôi thường không dùng tính năng này.

Còn tại tab Contents sẽ cho phép bạn xóa bộ nhớ đệm hoặc Delete Expired. Bạn hoàn toàn có thể xóa bộ nhớ đệm thông qua nút Delete Cache ngay trên quick bar của WordPress mà không cần phải vào tới tận đây.

Ngoài ra, tác giả plugin này cũng giới thiệu một vài plugin mà bạn có thể dùng tại tab Plugins. Nếu thấy cái nào phù hợp, hay chuyển từ Disabled sang Enabled và đừng quên nhấn nút Update ngay phía dưới để hoàn tất việc thay đổi.

4. Sử dụng CDN tăng tốc website tối đa

CDN hay Content Delivery Network là hệ thống máy chủ được đặt ở nhiều nơi khác nhau trên toàn thế giới, chứa bản sao nội dung website trong hệ thống và khi người dùng truy cập vào website, nó sẽ sử dụng các bản sao trên máy chủ gần nhất (tốc độ tốt nhất) thay vì phải tải nội dung gốc từ website. Lợi ích thấy rõ là tăng tốc độ website đáng kể, bên cạnh đó, CDN còn giúp tiết kiệm băng thông cũng như giảm tải cho host của bạn. Thật tuyệt vời phải không nào?

Để sử dụng dịch vụ CDN tốt nhất thì bạn phải trả phí, nhưng cũng có những dịch vụ CDN miễn phí khá tốt cho bạn sử dụng, tiêu biểu là Google Page Speed (tạm thời vẫn đang miễn phí, không biết bao giờ sẽ thu phí), CloudflareIncapsula (hai cái này kết hợp tăng tốc lẫn bảo mật và phân tích website). Với site nhỏ hoặc blog cá nhân thì bản Free cũng đủ bạn dùng thoải mái rồi.

5. Bật nén Gzip giúp tăng tốc WP đáng kể

Gzip là một giải pháp tuyệt vời giúp nén tất cả những file tĩnh HTML, Js, Css, Xml, Json…giúp tiết kiệm băng thông, từ đó giúp bạn tăng tốc WordPress đáng kể. Để bật nén Gzip, các bạn chèn thêm đoạn mã dưới đây vào file .htaccess trong thư mục root (ngang hàng với wp-content):

# Compress text, html, javascript, css, xml, font:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddType x-font/otf .otf
AddType x-font/ttf .ttf
AddType x-font/eot .eot
AddType x-font/woff .woff
AddType image/x-icon .ico
AddType image/png .png

6. Không lạm dụng Wordpress Plugin

Wordpress cung cấp cho bạn hàng nghìn plugin hữu ích nhưng có nhiều người lạm dụng plugin khiến cho website Wordpress như một con ngựa bị gánh trên vai hàng tấn hàng nên không thể đi nhanh được. Plugin giúp Wordpress trở nên mạnh mẽ và tuyệt vời hơn bao giờ hết, nhưng chính nó cũng khiến Wordpress trở nên “béo phì”. Việc cài đặt quá nhiều plugin hoặc cài đặt những plugin chất lượng thấp có thể làm website của bạn rơi vào “Top những website có tốc độ rùa bò”. Do đó, hạn chế càng dùng ít Plugin càng tốt – chỉ nên dùng Plugin khi thực sự cần thiết.

Bạn có thể dùng plugin P3 (Plugin Performance Profiler) để xem plugin nào đang ngốn tài nguyên nhất, từ đó gỡ bỏ plugin đó hoặc tìm giải pháp thay thế tốt hơn.

7. Luôn luôn cập nhật

Việc cập nhật Wordpress và các Plugins lên phiên bản mới nhất là rất cần thiết. Nhóm chuyên gia phát triển WP thường xuyên sửa lỗi và nâng cấp để Wordpress ngày càng trở nên tối ưu hơn, nhanh hơn, an toàn hơn. Do đó hãy luôn cập nhật Wordpress và các Plugins để giúp hệ thống duy trì sự ổn định, tránh xảy ra lỗi và tăng khả năng bảo mật.

8. Tối ưu Database

Sau một thời gian sử dụng, cơ sở dữ liệu của bạn sẽ bị phình to do có thêm nhiều dữ liệu được ghi vào, trong đó có cả “rác” nên thời gian truy vấn đến database sẽ lâu hơn gây chậm website. Bạn có thể tối ưu Wordpress MySQL database trực tiếp trong PHPMyAdmin, hoặc sử dụng các plugin WP-Optimize or WP-DBManager.

9. Tối ưu hình ảnh

Nhiều hình ảnh là một trong những nguyên nhân chủ yếu làm chậm website của bạn. Có một vài cách giúp bạn tối ưu hóa hình ảnh trong wordpress:

Trước tiên, bạn nên xác định kích thước hình ảnh tối đa cho hình ảnh thu nhỏ (thumbnail), trung bình (medium) và ảnh lớn (large). Có nghĩa là, nếu bạn tải lên một hình ảnh rộng 1024px, trong khi chiều rộng tối đa để hiển thị nội dung chỉ là 650px thì ảnh gốc (rộng 1024px) sẽ tự động được thu nhỏ xuống bằng việc sử dụng CSS. Bạn nên resize ảnh từ 1024px thành 650px sau đó mới upload lên website. Hình ảnh của bạn vẫn hiển thị tốt mà lại có dung lượng nhẹ hơn nên tốc độ tải ảnh chắc chắn nhanh hơn. Thử tưởng tượng, nếu bạn có hàng trăm bài viết với hàng trăm ảnh khác nhau, việc đó không chỉ làm giảm thời gian tải ảnh mà còn tiết kiệm băng thông đáng kể đấy! (Vào Settings -> Media để cấu hình mặc định cho kích thước ảnh thumbnail, medium và large.)

Thứ hai, nếu bạn muốn giảm dung lượng của ảnh mà không thay đổi kích thước của chúng thì Yahoo’s Smush.it sẽ là người bạn đồng hành tốt bụng. Mỗi khi bạn upload ảnh lên host thì WP Smush.It sẽ tự động nén, tối ưu hóa hình ảnh cho bạn. Còn nếu trên host đã có hình ảnh trước khi cài đặt WP Smush.It, bạn hãy vào Media, chọn tất cả hình ảnh, và Bulk Smush.It trong mục Action. Hình ảnh trên host sẽ được tối ưu.

Thứ ba, sử dụng hiệu ứng LazyLoad cho ảnh cũng giúp tăng tốc Wordpress đáng kể. LazyLoad ưu tiên tải và hiển thị nội dung văn bản trước, hình ảnh chỉ thật sự được tải và hiện lên khi nó lọt vào tầm nhìn của người dùng. Nó sẽ rất hữu ích với một trang web có nhiều hình ảnh. Đọc bài viết: Tăng tốc WordPress sử dụng hiệu ứng LazyLoad cho ảnh để hiểu hơn về Lazyload.

10. Thay thế PHP bằng HTML bất cứ nơi nào có thể

Chú ý: Trừ khi bạn biết những gì bạn đang làm, không nên cố gắng sửa code nếu bạn không chắc chắn.

Tốc độ xử lý HTML nhanh hơn rất nhiều so với PHP (nhanh hơn khoảng 20 lần). Nếu bạn có kiến thức cơ bản về cả PHP và HTML thì bạn có thể thay thế một số đoạn mã PHP trong Wordpress bằng mã HTML (trong Theme hoặc các Plugin)

Bạn chỉ nên thay đổi những gì cố định, không bao giờ thay đổi, chẳng hạn như URL của favicon, URL của file style.css,…

Xem ví dụ này:

File header.php trong thư mục giao diện thường chứa đoạn mã sau:

<title><?php bloginfo('name'); ?> - <?php bloginfo('description');?></title>
<link rel="shorcut icon" type="image/x-ico" href="<?php bloginfo('template_url'); ?>/images/favicon.ico" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url'); ?>"/>
<link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo('template_url'); ?>/print.css" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss_url'); ?>" />

Và bạn có thể thay thế mã PHP bằng HTML như sau:

<title>Tiêu đề website Đỗ Văn Phương</title>
<link rel="shorcut icon" type="image/x-ico" href="https://dovanphuong.com/wp-content/uploads/2015/11/favicon.ico" />
<link rel="stylesheet" type="text/css" media="screen" href="https://dovanphuong.com/wp-content/themes/ricky1990/style.css"/>
<link rel="stylesheet" type="text/css" media="print" href="https://dovanphuong.com/wp-content/themes/ricky1990/print.css" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="https://dovanphuong.com/feed" />

Mọi thay đổi của bạn sẽ là vô nghĩa sau khi bạn cập nhật phiên bản mới, vì vậy bạn chỉ nên sửa Theme thôi chứ đừng sửa các Plugins. Và nhớ là luôn backup trước khi sửa phòng trường hợp xấu xảy ra.

11. Xóa Revisions

Từ bản WordPress 2.6, WordPress cho phép lưu lại những lần chỉnh sửa bài viết nhằm hạn chế mất nội dung khi đang soạn thảo trong các trường hợp bị mất điện đột ngột, trình duyệt không làm việc hay máy tính có vấn đề. Tất nhiên điều này rất có ích nhưng nhiều khi bạn không cần đến nó vì bạn chẳng mấy khi gặp phải tình huống như vậy. Việc lưu lại các bản sao của bài viết với số lượng lớn sẽ làm database của bạn thêm nặng hơn. Nhất là khi những bài viết đã được đăng rồi thì bạn cần gì lưu nữa?

Mở tập tin wp-config.php nằm trong thư mục gốc WordPress của bạn và thêm đoạn mã sau:

define('AUTOSAVE_INTERVAL', 300 ); // seconds
define('WP_POST_REVISIONS', false );

Mã này sẽ vô hiệu hóa chức năng revision trong tương lai và tăng thời gian tự động lưu bản nháp của bài viết từ 60 giây lên 5 phút. Tất cả những bản sao của bài viết đã được lưu trước đây vẫn tồn tại trong database nên bạn phải xóa nó.

Cách 1: Vào PHPMyAdmin chạy lệnh sau:

DELETE FROM wp_posts WHERE post_type = "revision";

Cách 2: Sử dụng Plugin Better Delete Revision hoặc Revision Control.

Xin lưu ý rằng: Hướng dẫn này chỉ dành cho những ai đang muốn giảm kích thước cơ sở dữ liệu. Nếu bạn thường xuyên viết bài theo kiểu tranh thủ thời gian (lúc nào rảnh thì viết) chứ không phải ngồi liên tục để hoàn thành trọn vẹn bài viết thì bạn không nên vô hiệu hóa chức năng này. Mặc định Wordpress đặt là lưu 10 bản sao gần nhất, nhưng theo tôi thì bạn chỉ nên lưu 3 bản thôi cũng được. Thêm đoạn code sau vào wp-config.php:

define( 'WP_POST_REVISIONS', 3);

12. Hạn chế SPAM – hãy sử dụng Akismet

Không phải ngẫu nhiên mà Akismet được đóng gói mặc định trong Wordpress. Akismet là plugin chống spam comment rất nổi tiếng và miễn phí. Bạn nên sử dụng Akismet để chặn đứng những kẻ sử dụng phần mềm tự động gửi comment đang hành hạ máy chủ web của bạn. Hoặc tắt hẳn comment trên Wordpress bằng cách sử dụng plugins Disable Comments hoặc thay thế hệ thống comment mặc định của WP bằng hệ thống comment khác như Facebook (sử dụng plugin Facebook Comments) hoặc Disqus Comment.

13. Tắt Trackbacks & Pingbacks

Trackbacks và Pingbacks không tốt cho tốc độ trang web của bạn. Bất cứ khi nào ai đó liên kết với bạn, một trackback được tạo ra, sử dụng tài nguyên máy chủ và cơ sở dữ liệu. Vì vậy, bạn nên vô hiệu hóa trackback và pingback từ Settings > Discussion.

Tắt Trackbacks Pingbacks
Tắt Trackbacks Pingbacks

14. Sử dụng CSS Sprites

Tất cả những hình ảnh trang trí website của bạn (trong thư mục Theme) nên được gộp lại thành càng ít ảnh càng tốt, bằng cách sử dụng CSS Sprites. Ví dụ: bạn hãy vào Youtube sẽ thấy các logo, biểu tượng (icon), các nút,… hiển thị đều được lấy ra từ 1 hình ảnh lớn, bên trong chứa rất nhiều ảnh nhỏ:

Sprite Main Image
Sprite Main Image

Để làm được việc này bạn phải có kiến thức về CSS. Sử dụng SpritePad hoặc http://spritegen.website-performance.org kéo và thả các ảnh nhỏ để tạo ra 1 ảnh lớn duy nhất.

15. Sử dụng thiết kế kiểu Responsive

Một thiết kế dạng Responsive giúp website của bạn hiển thị đẹp trên các loại thiết bị khác nhau. Các hình ảnh với độ phân giải cao sẽ chỉ hiển thị trên những màn hình có độ phân giải cao (như máy tính, iPad,…) còn trên các thiết bị di động (mobile) thì sẽ sử dụng hình ảnh kích thước nhỏ, phù hợp với chiều rộng màn hình. Nói chung, có rất nhiều lợi ích quan trọng khác khiến bạn nên sử dụng một giao diện Responsive.

Responsive Theme
Responsive Theme

Các trang web responsive cũng được Google ưa thích, do đó bạn có thể hi vọng nó cũng tốt cho SEO.

16. Tối ưu hóa CSS và JS

Nhờ có CSS và Javascript mà website trở nên tuyệt vời hơn rất nhiều. Tuy nhiên những file này lại làm website bị chậm đi. Dưới đây là một số cách giúp bạn tối ưu css và js giúp cải thiện tốc độ tải trang:

16.1. Minify: sẽ giúp nén tất cả thành 1 file duy nhất, loại bỏ các khoảng trắng, ký tự thừa, hoặc kỹ thuật thay thế để làm giảm tối đa dung lượng các file js và css, từ đó giảm số lượng truy vấn tới máy chủ, nâng cao tốc độ tải trang cho WordPress. Để thực hiện kỹ thuật này, bạn có thể làm bằng tay, hoặc tốt hơn sử dụng một trong những plugin mãnh mẽ sau:

16.2. Không sử dụng @import trong CSS: có rất nhiều theme sử dụng @import những file CSS khác, điển hình là import Google Fonts hoặc import style.css từ parrent theme trong file CSS của child theme. Bạn nên loại bỏ tất cả những @import này bằng cách sử dụng những phương pháp khác.

16.3. Đưa CSS lên đầu, js xuống cuối: Thực tế, chỉ cần tải xong các file CSS là trình duyệt sẽ hiển thị website của bạn (dù chưa tải xong js). Do đó, việc đưa file CSS lên phần head và đưa các file javascript xuống trước thẻ đóng </body> sẽ làm website của bạn hiển thị nhanh hơn, tạo cho người xem cảm giác website load nhanh. Tuy nhiên, với những file javascript ảnh hưởng tới bố cục website thì bạn không nên đưa xuống dưới, bởi khi chưa load hết người dùng sẽ thấy giao diện website bị vỡ.

Bạn nên sử dụng Scripts To Footer Plugin. Plugin này sẽ di chuyển toàn bộ scripts xuống footer và giữ css ở header.

16.4. Thêm thuộc tính Defer/Async cho Javascript: Đây là kỹ thuật tải không đồng bộ, tức là các file JS sẽ không tải ngay khi trình duyệt vừa mở mà sẽ bắt đầu tải sau khi trình duyệt web đã tải xong các thành phần khác trong website. Cách thức hoạt động của hai thuộc tính này:

Cách thức hoạt động của async và defer
Cách thức hoạt động của async và defer

– Thuộc tính async sẽ cho phép mã script thực thi không đồng bộ với việc load website.
– Thuộc tính defer cho phép mã script thực thi ngay sau khi website load xong.
– Không dùng defer/async thì mã script sẽ được thực thi đồng thời với việc tải website.

Cấu trúc khi chèn thêm thuộc tính cho file js như sau:

<script type="text/javascript" src="file.js" async></script>
<script type="text/javascript" src="file.js" defer></script>

Nhờ việc sử dụng một trong hai thuộc tính trên, mã script không gây ảnh hưởng tới tốc độ load website. Thuộc tính async bạn sẽ thấy được dùng trong đoạn mã Google Analytics, hay script giúp chia sẻ mạng xã hội.

17. Tối ưu Widgets

Điều rất quan trọng nữa là bạn phải tối ưu các Widgets khi sử dụng. Chẳng hạn khi chèn các widgets của mạng xã hội như Facebook, Twitter hay Google+ là bạn sẽ phải tải các js và css từ máy chủ của họ, tất nhiên là không đáng kể nhưng vẫn gây chậm website. Sử dụng quá nhiều các Widgets có truy vấn đến cơ sở dữ liệu cũng sẽ gây chậm website. Chẳng hạn các Widgets như bài viết mới nhất, xem nhiều, được bình luận nhiều…v..v.. Vì vậy, nên lựa chọn sử dụng những widgets thật cần thiết.

Tóm lại,

Thời gian tải chậm không chỉ tạo ra một ấn tượng xấu về website của bạn với người xem mà còn không tốt cho SEO. Vì vậy, hãy áp dụng những cách trên để tạo ra trải nghiệm người dùng tốt nhất.

Hãy cho tôi biết cảm giác của bạn sau khi áp dụng những cách trên…Và nếu bạn thấy bài viết này hữu ích, đừng quên chia sẻ nhé .! 🙂

Theo dõi bài viết
Nhận thông báo
guest
0 Bình luận
Inline Feedbacks
Xem tất cả bình luận
0
Gửi bình luận của bạn về bài viết này.x