Connect with us

Kiến Thức Về Wordpress

15 Lời khuyên giúp tăng tốc Website sử dụng mã nguồn WordPress | Tối Ưu SEO

Nhân. Nguyễn

Đăng

-

Bạn có thể tìm kiếm qua : Google | Cốc Cốc | Bing với chủ đề này của Mạng Quảng Cáo Trực Tuyến

WordPress là một mã nguồn mở được sử dụng nhiều nhất hiện nay với hơn 77 triệu website đang sử dụng chiếm 59,5 tổng số website. Tuy nhiên sử dụng WordPress phải biết cách tối ưu thì mới có được tốc độ tốt nhất, nếu không thì web load rất chậm, phải 5-8s mới xong. Khách hàng không thể chờ và họ sẽ thoát khỏi trang web của bạn ngay.

Dạo này có rất nhiều người sử dụng theme free do mình chia sẻ, Nhưng không biết tối ưu tốc độ load trang cho website của họ. Họ hay đặt câu hỏi tới mình ” Làm sao để tối ưu website cho nó load nhanh vậy anh, website của em load chậm như rùa vậy“. Với mình thì mình hay loại bỏ một số thứ không cần thiết và tối ưu lại để nó nhẹ hơn. Dưới đây là các cách làm mà mình sưu tầm và áp dụng thành công cho web của mình và của khách hàng của mình, nay xin chia sẻ lại vs anh em nào chưa biết. Nếu bạn cần kiểm tra dự án của mình thì có thể vào đây xem nhé Kho giao diện website

1. Đầu tiên luôn là việc chọn Hosting hoặc VPS chất lượng

Làm việc gì thì cũng nên bắt đầu từ gốc rễ trước, tối ưu WordPress cũng vậy. Hosting/VPS là một trong những yếu tố then chốt quyết định tới tốc độ website. Mình tin tưởng sử dụng VPS Vultr, đây là nhà cung cấp hàng đầu hiện nay còn hosting thì có Hawk Host(có location HongKong và Singapore cho tốc độ tốt nhất về Việt Nam), Stable Host(nhược điểm ko có location châu á). Giá hosting giờ cũng rất rẻ rồi chỉ từ khoảng 3$/tháng thậm chí nếu bạn mua đúng đợt khuyến mãi giá chỉ hơn 1$/tháng. Hoặc một thằng này nữa Hostinger.vn dành cho các bạn nào chưa biết tiếng anh mà cần sp tiếng việt bên này có giá lại rẻ cho các anh em cần để test dự án…

2. Sử dụng Cache và CDN

Khi sử dụng WordPress thì cache là điều bắt buộc nếu không sẽ tốn tài nguyên và website load rất chậm. Hiện nay có một số Plugin Cache rất tốt như Super Cache, WP Fastest Cache, W3 Total Cache(chỉ nên sử dụng cho môi trường máy chủ). Tuy nhiên, mình thích sử dụng một 1 plugin cache trả phí khác là Wp-Rocket, cá nhân mình đánh giá đây là plugin cache mạnh mẽ nhất. Bạn cũng có thể sử dụng thử bản miễn phí trước tại đây
Nếu hosting bạn sử dụng đặt ở xa (ko đặt tại VN hay Hongkong) thì nên sử dụng CDN(nếu chưa biết bạn lên gg tìm hiểu nhé). Hiện nay dịch vụ CDN miễn phí tốt nhất là Cloudflare

3. Sử dụng plugin Nén và gộp Javascript, CSS

Đây là một yếu tố rất quan trọng và vì nếu không nén thì sẽ mất rất nhiều HTTP Request tới server để tải dữ liệu về làm chậm tốc độ của trang web lại. Một plugin rất tốt mà mình cũng đang dùng đó là Auto Optimize. nếu bạn không muốn sử dụng Plugin thì có thể nén file luôn tại ứng dụng nén file của mình tại đây Công cụ nén file HTML, CSS, JS

4. Giảm dung lượng ảnh trước khi upload và sử dụng Lazy Load

Ảnh là một trong những thành phần nặng nhất của Website chiếm tới 60% thời gian tải trang, do đó nếu bạn tối ưu ảnh tốt thì tốc độ sẽ cải thiện rất đáng kế. Mình thì thường dùng phần mềm Caesium để giảm dung lượng hình ảnh sau đó mới upload lên WordPress và dùng thêm plugin WP-Smush để tối ưu. 
Một lưu ý dành cho các bạn! Đừng nén ảnh quá nhỏ bởi vì như thế sẽ làm cho ảnh không được đẹp nó sẽ phản tác dung đối với người dùng
Lazy Load cũng là một kĩ thuật rất hay nếu website của bạn có nhiều ảnh, chỉ khi người dùng kéo tới đâu ảnh mới được tải giúp giảm rất nhiều HTTP Request và tăng tốc độ tải trang của WordPress, bạn có thể dùng plugin a3 Lazy Load rất tốt, trước đây mình không dùng Lazy Load vì nó không tải ảnh khi người dùng mới vào website, chỉ khi kéo xuống nó mới bắt đầu tải làm xấu hết cả cảnh quan của web nhưng từ khi biết đến a3 Lazy Load thì mình đã dùng lại vì nó hỗ trợ rất nhiều hình thức Lazy Load nhưng nói chúng bạn cứ dùng đi rồi biết.

5. Tối ưu Database

Mỗi khi truy cập website, WordPress cần phải kết nối vào Database để lấy dữ liệu do đó tối ưu Database cho sạch sẽ là điều rất cần thiết, một plugin rất nổi tiếng đó là WP-Optimize, cài đặt xong bạn vào WP-Optimize ở menu bên trái nhấn Process thực hiện việc tối ưu Database, nên làm việc này thường xuyên khoảng 1 tuần/lần hoặc nếu bạn lười thì thiết lập trong cài đặt của plugin để nó tự là.
Nếu sử dụng Wp-rocket rồi thì ko cần, wp-rocket có tính năng tối ưu database.

6. Xoá bớt plugin không sử dụng

Sử dụng quá nhiều plugin chính là yếu tố khiến website của bạn chậm đi do đó nếu WordPress của bạn dùng quá nhiều plugin thì cân nhắc xoá bớt đi, cái nào cần thiết hãy dùng. Bạn có thể dùng plugin P3 Plugin Performance Profiler để phân tích xem plugin nào nặng nhất tốn nhiều thời gian để tải nhất thì cho đi sớm là vừa hoăc thay thế các plugin khác nhẹ hơn.

7. Gõ bở Query String khỏi URL

Một vài plugin cache hay hệ thống cache sẽ không cache các file tĩnh nếu URL có chưa query string dạng như style.css?v=3.6”. Khi bạn test tốc độ WordPress bằng GTmetrix, công cụ này có thông báo cho bạn biết về query string, bạn có thể kiểm tra nếu tốt rồi thì thôi còn không thì phải gỡ bỏ query string khỏi URL của các file tĩnh để không cản trở việc Cache. Để làm việc này có 3 cách

  1. Dùng W3 Total Cache ( bạn cứ cấu hình như trên là đã gỡ bỏ query string rồi
  2. Dùng plugin Remove Query Strings From Static Resources
  3. Thêm đoạn code sau vào cuối file fuction.php của theme (nếu không muốn dùng plugin), nhớ thêm vào trước dấu kết thúc của php ?>
//Go bo Query Strings
function _remove_script_version( $src ){
$parts = explode( '?ver', $src );
return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

8. Vô hiệu hoá tính năng Force Rewrite Titles trong plugin Yoast SEO

Yoast SEO thì gần như trang web WordPress nào bây giờ cũng dùng rồi vì nó plugin rất tốt lại miễn phí nhưng có một tính năng mà mọi người thường bật lên khi cấu hình Yoast đó là Force Rewrite Titles.Chính tác giả của plugin này cũng xác nhận tính năng này sẽ làm website của ban chậm thêm vài chục miligiây, do đó hãy vô hiệu hoá nó đi.

Bạn vào SEO > Titles & Meta và bỏ chọn Force Rewrite Titles Cái này thì từ phiên bản hỗ trợ tiếng việt thì không còn nữa. Nếu bạn nào vẫn dùng phiên bản cũ sẽ có.

9. Tắt Pingback và Trackback

Pingback Trackback sẽ thông báo cho bạn khi bất kì trang web nào có đặt link website của bạn là website của họ nhưng mình thấy nó không cần thiết và làm giảm hiệu năng của WordPress nên bạn hãy vào phần Cài đặt > Thảo luân và bỏ tích chọn ở dòng sau: Allow link notifications from other blogs (pingbacks and trackbacks) on new articles hoặc Cho phép liên kết các thông báo từ các blog khác (pingbacks và trackbacks) trên các bài viết mới nếu là tiếng việt

10. Giữ WordPress được cập nhật

Mỗi bản cập nhật của WordPress đều đem đến những cải thiện về hiệu tăng, tốc độ và bảo mật hay các tính năng mới nên bạn hãy tập thói quen cập nhật WordPress lên phiên bản mới nhất ngay sau khi nó ra mắt.

11. Cản trở Image HotLinking

Giả sử mình đang cần một cái ảnh lên blog mà vô tình thấy trên website của bạn nó mình sẽ copy link đó về website của mình và từ đó mỗi khi người dùng truy cập vào trang web của mình ảnh này sẽ được lấy từ website của bạn. Việc này vô tình làm tốn băng thông, hiệu năng máy chủ, đấy là còn chưa kể đến là website của mình có lưu lượng truy cập cao thì bạn sẽ thiệt hải rất nhiều nên tốt nhất vô hiệu hoá việc này lại. Để ngăn cản Image HotLinking, bạn thêm đoạn code sau:

Thêm vào file .haccess nếu dùng Apache

RewriteEngine on
RewriteCond %{HTTP_REFERER} !=""
RewriteCond %{HTTP_REFERER} !^https?://([^/]*)?example\.com/ [NC]
RewriteRule \.(jpe?g|gif|png)$ - [F,NC]
Thêm vào file cấu hình domain nếu dùng NGINX( thay crazytut.com thành tên miền của bạn)
location ~ .(gif|png|jpe?g)$ {
valid_referers none blocked crazytut.com *.crazytut.com;
if ($invalid_referer) {
return 403;
}

12. Thay thế các đoạn code PHP không cần thiết bằng HTML

Nếu bạn dùng theme WordPress mà không phải tự code thì sẽ rất hay gặp trường hợp này, mình xin lấy ví dụ như sau:

<!DOCTYPE html>;
<html <?php language_attributes(); ?>; prefix="og: http://ogp.me/ns#">;
<head>;
<meta charset="<?php bloginfo( 'charset' ); ?>" />

Đoạn code bên trên là mình tìm thấy trong file header của WordPress theme, các bạn có thể thấy có 2 đoạn code php ở trong đó, mỗi khi người dùng truy cập server phải xử lí 2 đoạn php này để trả lại cho người dùng tốn thêm thời gian trong khi chúng ta hoàn toàn có thể thay thế nó bằng đoạn code HTML sau, vừa giảm tả server vừa tăng tốc độ WordPress:

<!DOCTYPE html>
<html lang="vi" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<head>
<meta charset="UTF-8">

13. Loại bỏ Emoji để tăng tốc độ load

Emoji giúp các bài viết, bình luận trở nên sinh động hơn, thể hiện được cảm xúc của người viết. Tuy nhiên, không phải trang nào cũng cần dùng tới Emoji, đặc biệt là các website thương mại điện tử, web doanh nghiệp… Thêm vào đó, những icon này được load trực tiếp từ server của WordPress.org, chúng có kích thước thực khá lớn (chứ không phải nhỏ như bạn thấy hiển thị trên web), không được nén để tối ưu dung lượng nên làm tốc độ load web chậm đi kha khá. Trong trường hợp bạn cảm thấy Emoji không thực sự cần thiết, tốt nhất là nên vô hiệu hóa nó đi để tiết kiệm một phần không gian HTML giúp blog/ website load nhanh hơn.
Để loại bỏ hoàn toàn Emoji khỏi WordPress, các bạn chỉ cần chèn code sau đây vào file functions.php của theme hoặc child theme đang dùng.

/**
* Disable the emoji's
*/
function disable_emojis() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' ); 
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); 
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
add_action( 'init', 'disable_emojis' );
/**
* Filter function used to remove the tinymce emoji plugin.
*
* @param array $plugins 
* @return array Difference betwen the two arrays
*/
function disable_emojis_tinymce( $plugins ) {
if ( is_array( $plugins ) ) {
return array_diff( $plugins, array( 'wpemoji' ) );
} else {
return array();
}
}

14. Vấn đề tập tin admin-ajax.php gây chậm

Kể từ phiên bản Wp 3.6 WordPress Heartbeat API được giới thiệu để cho phép giao tiếp giữa trình duyệt và máy chủ. WordPress Heartbeat API sử dụng tập tin admin-ajax.php để chạy AJAX gọi từ trình duyệt web. Đôi khi chúng ta kiếm tra thấy thời gian tải của tập tin này rất lớn gây chậm trang. Để giải quyết vấn đề này bạn cài Plugin heartbeat control sau đó cấu hình lại là được.

15. Tải chậm JavaScript

Nếu bạn đã từng kiểm tra thử tốc độ load blog/ website của mình với công cụ Google PageSpeed Insights thì chắc hẳn đã ít nhất một lần nhìn thấy cảnh báo “Eliminate render-blocking JavaScript and CSS in above-the-fold content” (Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên) rồi phải không nào? Điều này có nghĩa là trình duyệt web sẽ tải các file .js và .css (dùng để hiển thị giao diện) trước khi hoàn tất việc tải phần text (chữ). Nó làm cho quá trình hiển thị phần text bị chậm đi. Và Google thì không thích điều đó.

Tải không đồng bộ (Asynchronous) là gì?
Hiểu một cách đơn giản, kỹ thuật tải không đồng bộ sẽ yêu cầu trình duyệt hoàn tất việc tải phần text (chữ) trước khi tải JavaScript để bổ sung tính năng hoặc các hiệu ứng “hoa lá” đi kèm. Nó trái ngược với kỹ thuật tải đồng bộ (Synchronous) khi mà các thành phần của trang web được tải đồng thời.

Tải không đồng bộ JavaScript mà không cần dùng plugin

Tất cả những gì mà các bạn cần làm là thêm đoạn code sau đây vào file functions.php của theme hoặc child theme mà bạn đang sử dụng.

//* Asynchronous JS without plugin
function async_js($tag){
$scripts_to_async = array('script-1.js', 'script-2.js', 'script-3.js', 'script-4.js', 'script-5.js');
foreach($scripts_to_async as $async_script){
if(true == strpos($tag, $async_script ) )
return str_replace( ' src', ' async="async" src', $tag ); 
}
return $tag;
}
add_filter( 'script_loader_tag', 'async_js', 10 );

Lưu ý: Thay script-1.jsscript-2.js… bằng tên các JavaScript tương ứng trên website của bạn. Nếu số lượng script ít hơn, các bạn có thể xóa bớt đi và ngược lại.
Ví dụ nếu file JavaScript của mình có đường dẫn là adwordlive.com/wp-includes/js/jquery/jquery-migrate.min.js thì điền /wp-includes/js/jquery/jquery-migrate.min.js

Trên đây là 15 phần mình đã tìm hiểu trên mạng và những kinh nghiệm tối ưu tốc đọ load cho khách hàng của mình. Mong được mọi người đóng góp.

Tôi viết để lưu trữ và chia sẻ cho bạn đọc những gì tôi học và hiểu được về lập trình và kinh nghiệm của tôi sau những năm tôi đi làm. Vậy nên nhiều bài rất ngắn các bạn đừng trách móc. Xin cảm ơn đã ủng hộ. Kênh Youtube của Nhân Nguyễn

Đọc Tiếp Bài Viết
Quảng Cáo
Nhấn Để Bình Luận

Leave a Reply

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Kiến Thức Về Wordpress

Cách khắc phục khi quên mật khẩu admin trong WordPress

Nhân. Nguyễn

Đăng

-

2 tuần rồi mình chưa viết bài nào vì bận làm mấy dự án cho khách hàng. Hôm nay mới rảnh một tí, và cũng để khắc phục cho một số khách hàng hỏi mình. “Làm thế nào để khắc phục khi quên mật khẩu admin trong WordPress. Tôi đã làm mọi cách mà không được.

Nếu bạn không thể lấy lại mật khẩu admin của website mình qua Email vì một số lý do nào đó thì có 1 cách này nữa dành cho bạn

Yêu Cầu bạn cần phải quản trị Hosting và có thể truy cập vào được Cơ Sở Dữ Liệu

Lấy lại mật khẩu admin cho website WordPress bằng việc thao tác với Cơ Sở Dữ Liệu

Đầu tiên, hãy truy cập vào Phpmyadmin >Tìm tới Database của bạn > Tiếp tục tìm tới bảng wp_user hoặc đằng trước _ là user là được như hình dưới nhé

Bảng User trong Cơ sở dữ liệu của WordPress

Chọn bảng wp_user nó sẽ hiện ra bảng User như hình dưới

Tìm đến tài khoản bạn cần lấy mật khẩu sau đó ấn edit ( sửa ). Sau đó nó hiện ra một bảng mới bạn chỉ cần tìm chú ý đến hàng user_pas tìm đến ô Hàm chọn MD5 > Phần giá trị bạn nhập mật khẩu của bạn vào đó rồi ấn Hoàn thành

Xong rồi đó. Chúc bạn thành công

Đọc Tiếp Bài Viết

Kiến Thức Về Wordpress

Giới thiệu về WordPress Action Hook | Thiết kế web WordPres

Nhân. Nguyễn

Đăng

-

action hook wordpress

Nếu bạn đang phát triển của Theme hoặc plugin WordPress nào đó. Bạn sẽ luôn gặp phải nhu cầu tận dụng hệ thống Hook Action WordPress.

Trên thực tế, một trong những rào cản lớn nhất đối với việc sử dụng Theme Framework  hoặc tạo plugin. Họ phụ thuộc rất nhiều vào Action Hook để hoạt động đúng.

Bạn có thể xem qua bài : Toàn tập về Action Hook

Vì vậy chúng ta cần tìm hiểu, WordPress Action Hook là gì?

Action Hook về cơ bản là giữ chỗ. Bất cứ một Action hook được đặt, nó sẽ thực thi đoạn code nào đã được móc nối vào đó.

Bạn có thể bắt gặp một số Action hook mặc định của WordPress có trong hầu hết các theme. Bạn có thể tìm wp_headvà wp_footerchỉ trong theme có sẵn và hầu hết mọi người không nhận ra đây là những action hook . Chúng chỉ đơn giản là các trình giữ chỗ mà các plugin có thể sử dụng để chèn mã vào phần <head>, <footer> của theme. Thông thường, họ sử dụng các action hook này để chèn những thứ như CSShoặc mã Analytics. Họ tạo ra một hàm tạo code, và sau đó móc hook hàm đó thành  wp_head hoặc wp_footer.

Action Hook WordPress dùng cho nhà phát triển chèn code vào các vị trí cụ thể trong Theme WordPress

Tại sao Action Hook WordPress là cần thiết

Giống như bất kỳ phần mềm lớn nào khác, WordPress luôn được cập nhật. Cứ vài tháng một phiên bản mới được phát hành.

Giả sử rằng action hook không tồn tại. Nhưng bạn muốn thay đổi hoặc mở rộng một số chức năng của WordPress. Để làm điều này, bạn phải sửa đổi các tệp WordPress cốt lõi. Và khi bạn cần nâng cấp, bạn sẽ phải thực hiện nâng cấp và mất tất cả các sửa đổi

Nhưng nếu bạn sử dụng các Action Hook WordPress để sửa đổi cách thức hoạt động của WordPress. Bạn có thể nâng cấp khi biết rằng các sửa đổi của bạn nằm trong một tệp riêng biệt. Khi đó bạn chỉ cần ghi đè trong quá trình nâng cấp.

Làm thế nào để Action Hook làm việc?

Trở lại với ví dụ về wp_headvà wp_footer action, chúng ta hãy giả sử rằng bạn muốn chèn một số CSStrong bạn <head> trong phần theme của bạn để bạn có thể ghi đè lên các CSS đã có.

Điều đầu tiên bạn cần làm là tạo một Function Code. Vì các Action Hook chỉ cho phép các hàm được nối hook với chúng.

function insert_some_css() {
	echo <<<CSS
<style type="text/css">
	a {
		color: #08FF00; /* green */
		text-decoration: none;
	}
	a:hover {
		color: #FF0000; /* red */
		text-decoration: underline;
	}
</style>
	CSS;
}

Vì vậy, một khi bạn đã xây dựng được các function của mình, đã đến lúc Function Hook vào wp_head :

add_action ('wp_head', 'insert_some_css');

Bất cứ khi nào wp_head xuất hiện trong Theme của bạn, hãy thực thi Function  insert_some_css .

Bạn có thể xem phần cuối cùng tôi viết như thế này:

add_action('wp_head', 'insert_some_css');
function insert_some_css() {
	echo <<<CSS
<style type="text/css">
	a {
		color: #08FF00; /* green */
		text-decoration: none;
	}
	a:hover {
		color: #FF0000; /* red */
		text-decoration: underline;
	}
</style>
	CSS;
}

Bạn cần làm là tìm một Action Hook mà bạn muốn sử dụng để xuất một số code. Tạo một function action hook đó bằng cách sử dụng add_action giống như ở trên.

Như mọi khi, hãy chắc chắn rằng bất kỳ code PHP cũng cần có thẻ đóng PHP. Nếu không nó sẽ không thực thi.

Tạo Action Hook của riêng bạn

Mặc dù WordPress cung cấp cho bạn rất nhiều Hoock Action. Bạn cũng có thể tự tạo cho Theme hoặc plugin của bạn các Action Hook riêng

Bạn có thể sử dụng đoạn code dưới đây:

<? php do_action ('my_action_hook_name'); ?>

Bạn chỉ cần thay đổi my_action_hook_namethành một tên của bạn

Các nguồn khác trên móc hành động

Đọc Tiếp Bài Viết



[]
1 Step 1
Previous
Next

Chủ Đề Nổi Bật

Được Quan Tâm Nhiều Trong Tháng