WordPress – Cách tối ưu web lên 99 điểm trên di động PageSpeed Insights

Google vừa ra chuẩn đánh giá tốc độ đáp ứng của web mới khiến mọi người lao đao, chuẩn lần này coi bộ khá nặng nề, nhất là trên di động, mà bản thân trải nghiệm thấy hiện tại có trên 80% người sử dụng thiết bị di động, 10% sử dụng máy tính bảng, còn lại là trên máy bàn hoặc laptop vì vậy tối ưu trên di động gần như là điều tiên quyết ai cũng đang hướng tới.
Với những trang web lớn thì việc tối ưu đã diễn ra rất lâu rồi, vì sao ư, họ phải đi trước thời đại, cái gì cũng phải tốt nhất để sau này lớn mạnh thì không phải làm gì nhiều nữa, vì vậy những website cần tối ưu thường là những web mới làm, hoặc những web sài 1 thời gian nó trở nên chậm chạp và phải tối ưu để nó nhanh hơn, tăng trải nghiệm người dùng.

Bản thân là một Coder nên những vấn đề cơ bản bao trùm việc tối ưu mình xin tóm gọn như sau :
1)Tối ưu hoá hình ảnh.
2)Tối ưu hoá css,js.
3)Tối ưu code.
4)Sử dụng Cache và Preload.
5)Sử dụng Hosting hay VPS(máy chủ ảo) tốt.
6)Bật nén trong Hosting(VPS) hoặc Sử dụng CDN.

Mình xin đi vào chi tiết từng vấn đề, nếu các bạn gặp trục trặc ở vấn đề nào thì vui lòng để lại bình luận, trong khả năng mình sẽ trả lời.

1) Tối ưu hoá hình ảnh :

Hầu hết các website đều có hình ảnh chưa tối ưu, thường thì mình sẽ dùng công cụ gtmetrix để check xem hình nào chưa được tối ưu, mình sẽ làm như hướng dẫn của nó, bản thân gtmetrix sẽ tạo ra 1 ảnh đã tối ưu để mình tải về và quăng lên lại, việc này đơn giản và ai cũng có thể làm được.

Còn vấn đề nữa là gtmetrix hay báo “Serve scaled images”, có nghĩa là một ảnh nào đó nên để đúng kích thước của nó, không dùng ảnh có kích thước lớn hơn rồi bóp nhỏ lại để hiển thị, ví dụ ảnh đó chỉ cần 90×90 nhưng lại dùng ảnh kích thước 200×200 để hiển thị, nhưng vậy code nó phải mất thêm thời gian bóp nhỏ ảnh rồi mới hiển thị gây hao tài nguyên và cũng không cần thiết, gặp lỗi này thì cứ tải ảnh cần scaled( bóp lại) về, sau đó dùng photoshop hoặc trang web hoặc plugins(chỉ dùng cho mã nguồn wordpress) để bóp nhỏ kích thước và quăng lên lại, khuyến nghị nên dùng File Zilla để tải về và quăng ảnh lên.

2) Tối ưu hoá css,js:

Đa phần web nào cũng có file css và js, thường thì để load nhanh hơn người ta sẽ dùng cách minify(quá trình này loại bỏ các khoảng trắng của các ký tự trống, ký tự dòng mới, ghi chú và ký tự ngoặc nhọn khỏi mã nguồn của bạn) cho css, js. Với việc có quá nhiều file css và file js, người ta sau khi minify thì thường nối chúng lại để tăng tốc độ tải cho website.

Có rất nhiều website giúp bạn minify file css và js có thể hỗ trợ bạn việc này.
Lưu ý : việc làm này có thể gây vỡ giao diện, hãy luôn có 1 bản backup và sử dụng File Zilla để an toàn hơn.

3) Tối ưu code :

Hiện nay có rất nhiều mã nguồn khác nhau, mỗi mã nguồn lại chứa đựng vô số theme khác nhau, việc tối ưu code sẽ khó khăn hơn rất nhiều, vì vậy, khi thiết kế 1 website bạn nên chú ý đến việc nó sử dụng theme gì, có dễ dàng tối ưu không, cộng đồng hỗ trợ lớn không, có update thường xuyên không, v.v.v…

4) Sử dụng Cache và Preload

Dù bạn sử dụng mã nguồn nào bạn cũng cần phải tạo cache cho web, việc này thì hầu như web nào cũng phải tạo ra, mục đích là để khách truy cập lần đầu tiên web sẽ thực thi bình thường, kể từ lần thứ 2 thì khách truy cập đúng link đó thì nó sẽ thực thi nhanh hơn vì sử dụng lại file đã tạo ra dạng html nên máy chủ không phải xử lý như lần đầu tiên nữa, việc này vừa giúp tăng tốc tải trang vừa giúp cho việc sử dụng thấp nhất tài nguyên của Hosting(VPS).

Với đợt cập nhật Google PageSpeed Insight lần này, Google ưu tiên những web có sử dụng hàm “preload” trong code, nếu bạn muốn cải thiện tốc độ trên di động trên 90 điểm thì không thể bỏ qua việc này , với từ khoá “Preloading content with rel=”preload”+tên_mã_nguồn” mong là các bạn có thể tìm kiếm được thứ bạn cần.

5) Sử dụng Hosting hay VPS(máy chủ ảo) tốt.

Việc này cũng rất quan trọng, nó đảm bảo cho bạn có sự ổn định, trong SEO nó càng quan trọng hơn nữa. Nếu điều kiện kinh tế cho phép hãy mua 1 VPS để phục vụ cho sự ổn định của máy chủ vì SEO là công việc lâu dài, nên thời gian uptime càng cao càng tốt, lý tưởng nhất là 99,99%, thế thì làm sao để đánh giá 1 Hosting hay 1 VPS tốt. Bạn coi thử hosting của bạn có những điều này không nhé:
+ Sự ổn định, chưa thấy hoặc không thấy nó rơi vào tình trạng “Waiting for {tên_web_site}” quá lâu, ngay gốc trái màn hình, nếu bạn thấy nó cứ Waiting hoài, hoặc vô lâu nó đơ và trắng trang hoặc lỗi gì đó bằng Tiếng Anh hoặc tiếng Việt mà không phải giao diện của bạn thì bạn nên cân nhắc thay đổi Hosting (VPS) khác. Mình sử dụng VPS của Linode thấy nó rất ổn định và đảm bảo những gì mình cần.
+Sử dụng SSD
+Dùng NGINX
+Chạy hệ điều hành Centos
+Sử dụng Maria Database
Với Hosting thì chưa có nhà cung cấp nào ở Việt Nam cho mình cảm giác an tâm cả.
Còn với VPS thì Vultr tỏ ra nhanh vượt trội nhưng nó không ổn định, trải nghiệm dùng thử thì mình thấy như vậy.
Nhiều bạn với chi phí thấp nhưng vẫn muốn sử dụng VPS thì có thể góp mua chung để sài hay hơn là sử dụng Hosting Share.
Để kiểm tra VPS có ok không các bạn đăng nhập SSH trong VPS và dùng lệnh này :

curl -Lso- topdev.vn | bash

Có những thông số bạn cần lưu ý để nhận biết 1 VPS tốt :
+Loại ảo hoá tốt nhất là KVM & Cloud OpenStack, các loại ảo hoá khác như OpenVZ, XEN không nên sử dụng.
+Tốc độ trung bình( Average) : cần trên 400 MB/s
+Read IOPS : trên 35k mới gọi là ổn.
+Write IOPS : trên 20k mới gọi là ổn.

6) Bật nén trong Hosting(VPS) hoặc Sử dụng CDN

Khi bạn truy cập vào site của bạn, một request sẽ được gửi tới server để chuyển file xuống. Những file này càng lớn, càng mất nhiều thời gian để tải. Bằng cách nén trang web của bạn và CSS trước khi gửi chúng qua cho trình duyệt sẽ giảm thời gian tải xuống đáng kể vì files sẽ nhỏ hơn.Vì vậy kết quả cuối cùng sau khi gzip nén file, kích thước của trang và CSS có thể giảm tới 60-70%.
Với từng Web Server riệng thì việc bật Gzip cũng khác nhau, có thể kể đến các web server như Apache chúng ta phải chỉnh file .htaccess, với Nginx chúng ta chỉnh file php.ini, với các Web Server khác chúng ta có thể tham khảo anh Google.
Nếu việc bật Gzip khó khăn với bạn, bạn có thể sử dụng CDN, điển hình CDN miễn phí của Cloudflare có thể giúp bạn việc này, với những website có nhiều lượng truy cập từ nhiều nước khác nhau việc sử dụng CDN gần như bắt buộc.

Tham khảo thêm các vị trí tuyển dụng WordPress lương cao

***Tối ưu hoá mã nguồn WordPress :

Với mã nguồn được các SEOER tin tưởng thì việc tối ưu cũng trở nên bức thiết khi web ngày một chậm hơn. Cũng với những công đoạn trên, các bạn nên làm theo từng bước 1 ở trên để có được kết quả tốt nhất.
Một vấn đề tồn đọng mà hầu hết các bạn đang gặp phải là lỗi do không nén những file có nguồn gốc từ live chat của facebook và các ứng dụng như comment facebook hay Chúng tôi trên Facebook, Facebook sử dụng ngôn ngữ lập trình riêng trên nền tảng javascript “ReactJS” nên lúc cần phải truy xuất thì phải tham khảo rất nhiều file *.js để trả về kết quả, việc này là không cần thiết, điều cần nhất là inbox vào hộp thư fanpage facebook mà không phải sử dụng plugins, đơn giản nhất là chèn 1 ảnh có biểu tượng chat facebook và link tới hộp thư FanPage dạng m.me/duong-dan-fanpage-facebook và dùng css cố định ảnh đó chạy theo khi mình cuộn trang. Nó như sau :

<div style="position: fixed; cursor: pointer; width: 50px; height: 50px; top: 50%; left: auto; right: 5px; bottom: 0;">
<a href="https://m.me/duong_dan_fanpage">
<img class="alignnone wp-image-145 size-full" src="https://tenmien.com/…/u…/2018/11/ten-anh-bieu-tuong-chat.png" alt="" width="50" height="50" />
</a>
</div>

Dán vào file funtions.php hoặc 1 widget nào đó mà nó luôn hiển thị ở toàn trang ,nhớ thay đường dẫn fanpage và đường dẫn ảnh nhé, bác nào kỹ thì thêm thuộc tính nofollow cho ảnh và mở 1 tab mới cho link fanpage !
Với các nút tương tác khác như gọi trên mobile hay chat qua Zalo cũng tương tự, nên code bằng html và css, không sử dụng plugins nếu không thực sự cần thiết để tối ưu hoá tốc độ của WordPress. Một đoạn code để các bạn tham khảo :
code html:

<div class="phone">
<a href="#">
<div class="quick-alo-ph-circle"></div>
<div class="quick-alo-ph-circle-fill"></div>
<div class="quick-alo-ph-img-circle"></div>
</a>
</div>

code css :

* {
box-sizing: border-box;
}
.quick-alo-phone .quick-alo-show {
visibility: visible;
}
.quick-alo-phone {
position: fixed;
visibility: hidden;
background-color: transparent;
height: 200px;
width: 82px;
height: 64px;
right: 150px;
top: 60%;
cursor: pointer;
z-index: 200000 !important;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
transition: visibility .5s;
}
.quick-alo-phone .quick-alo-green .quick-alo-ph-circle {
border-color: #00A1FF;
opacity: 0.5;
}
.quick-alo-ph-circle {
position: fixed;
width: 160px;
height: 160px;
top: 50px;
left: 50px;
border: 2px solid #00A1FF;
background-color: transparent;
border-radius: 100%;
opacity: .1;
animation: quick-alo-circle-anim 1.2s infinite ease-in-out;
transition: all .5s;
transform-origin: 50% 50%;
}
.quick-alo-phone .quick-alo-green .quick-alo-ph-circle-fill {
background-color: rgb(246, 202, 98);
opacity: .75 !important;
}
.quick-alo-ph-circle-fill {
position: fixed;
width: 100px;
height: 100px;
top: 80px;
left: 80px;
background-color: rgba(0, 161, 255, 0.5);
border-radius: 100%;
border: 2px solid transparent;
opacity: .1;
animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
transition: all .5s;
transform-origin: 50% 50%;
}
.quick-alo-phone.quick-alo-green .quick-alo-ph-img-circle {
background-color: #00A1FF;
}
.quick-alo-ph-img-circle {
position: fixed;
width: 60px;
height: 60px;
top: 100px;
left: 100px;
background: #00A1FF url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABrklEQVRYR82XjTEEQRCFX0dABlwEiAARkAEyIAJEoERACETARUAIJwIyeOqptfbm5qeP3lpTdVVXVzPd3/R0v+4zTLxsYv/4XwAkrwDsV6JyZmaLyKj1ESB5AOCpYfzazAQZttYFuDWz8zDvwE8OkNwF8NIwvjCz2SgAMkqSDuOzyDxYqgKSrwB2GhBKxHsHqGtLCiDDJ42Tj2Z27LLu2JQCnAK4a5x7M7Nth23XlhRgE8B74+SemempQtaKEpKsPUPo++sGOYCSIIU7zwJ05ficSLLkV6H/CIn7wEi2GRVkOVwFixEoREE/hz9DsR2TVKkp2zeSsI9bBUNnJNV4bhIA5cFhVCk2B5JCWVYhSEopjwAob6qa4QGQOKkqcj1iJSdIpmoqWEHIhr7Ph1BNgC4haxAPAC7UITPOc1UrCOXR12TlAnBAyKhAdHvPUg4pIn6AAYQc1ebG8QC+LXfD66XHU2HP7yKQlKhGODWu1gCTY/g7wCAaendNyltrRCQOIAERjCc/ejV1V4H3dp2ES4jU1vVJpXxpogoHSEE7oOEIp9G+/3c1OkArcpMDfAIqL6EhVS6JOAAAAABJRU5ErkJggg==") no-repeat center center;
border-radius: 100%;
border: 2px solid transparent;
opacity: .99;
animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
transform-origin: 50% 50%;
}
.quick-alo-phone .quick-alo-green .quick-alo-hover .quick-alo-ph-img-circle,
.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-img-circle {
background-color: #ff0101;
}

@-moz-keyframes quick-alo-circle-anim {
0% {
-moz-transform: rotate(0) scale(.5) skew(1deg);
opacity: .1;
-moz-opacity: .1;
-webkit-opacity: .1;
-o-opacity: .1
}
30% {
-moz-transform: rotate(0) scale(.7) skew(1deg);
opacity: .5;
-moz-opacity: .5;
-webkit-opacity: .5;
-o-opacity: .5
}
100% {
-moz-transform: rotate(0) scale(1) skew(1deg);
opacity: .6;
-moz-opacity: .6;
-webkit-opacity: .6;
-o-opacity: .1
}
}
@-webkit-keyframes quick-alo-circle-anim {
0% {
-webkit-transform: rotate(0) scale(.5) skew(1deg);
-webkit-opacity: .1
}
30% {
-webkit-transform: rotate(0) scale(.7) skew(1deg);
-webkit-opacity: .5
}
100% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
-webkit-opacity: .1
}
}
@-o-keyframes quick-alo-circle-anim {
0% {
-o-transform: rotate(0) kscale(.5) skew(1deg);
-o-opacity: .1
}
30% {
-o-transform: rotate(0) scale(.7) skew(1deg);
-o-opacity: .5
}
100% {
-o-transform: rotate(0) scale(1) skew(1deg);
-o-opacity: .1
}
}
@-moz-keyframes quick-alo-circle-fill-anim {
0% {
-moz-transform: rotate(0) scale(.7) skew(1deg);
opacity: .2
}
50% {
-moz-transform: rotate(0) -moz-scale(1) skew(1deg);
opacity: .2
}
100% {
-moz-transform: rotate(0) scale(.7) skew(1deg);
opacity: .2
}
}
@-webkit-keyframes quick-alo-circle-fill-anim {
0% {
-webkit-transform: rotate(0) scale(.7) skew(1deg);
opacity: .2
}
50% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
opacity: .2
}
100% {
-webkit-transform: rotate(0) scale(.7) skew(1deg);
opacity: .2
}
}
@-o-keyframes quick-alo-circle-fill-anim {
0% {
-o-transform: rotate(0) scale(.7) skew(1deg);
opacity: .2
}
50% {
-o-transform: rotate(0) scale(1) skew(1deg);
opacity: .2
}
100% {
-o-transform: rotate(0) scale(.7) skew(1deg);
opacity: .2
}
}
@-moz-keyframes quick-alo-circle-img-anim {
0% {
transform: rotate(0) scale(1) skew(1deg)
}
10% {
-moz-transform: rotate(-25deg) scale(1) skew(1deg)
}
20% {
-moz-transform: rotate(25deg) scale(1) skew(1deg)
}
30% {
-moz-transform: rotate(-25deg) scale(1) skew(1deg)
}
40% {
-moz-transform: rotate(25deg) scale(1) skew(1deg)
}
50% {
-moz-transform: rotate(0) scale(1) skew(1deg)
}
100% {
-moz-transform: rotate(0) scale(1) skew(1deg)
}
}
@-webkit-keyframes quick-alo-circle-img-anim {
0% {
-webkit-transform: rotate(0) scale(1) skew(1deg)
}
10% {
-webkit-transform: rotate(-25deg) scale(1) skew(1deg)
}
20% {
-webkit-transform: rotate(25deg) scale(1) skew(1deg)
}
30% {
-webkit-transform: rotate(-25deg) scale(1) skew(1deg)
}
40% {
-webkit-transform: rotate(25deg) scale(1) skew(1deg)
}
50% {
-webkit-transform: rotate(0) scale(1) skew(1deg)
}
100% {
-webkit-transform: rotate(0) scale(1) skew(1deg)
}
}
@-o-keyframes quick-alo-circle-img-anim {
0% {
-o-transform: rotate(0) scale(1) skew(1deg)
}
10% {
-o-transform: rotate(-25deg) scale(1) skew(1deg)
}
20% {
-o-transform: rotate(25deg) scale(1) skew(1deg)
}
30% {
-o-transform: rotate(-25deg) scale(1) skew(1deg)
}
40% {
-o-transform: rotate(25deg) scale(1) skew(1deg)
}
50% {
-o-transform: rotate(0) scale(1) skew(1deg)
}
100% {
-o-transform: rotate(0) scale(1) skew(1deg)
}
}
@-moz-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none
}
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none
}
}
@-o-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none
}
}

Việc tối ưu file css và js của website với wordpress chúng ta nên sử dụng plugins cache, với những gì kể trên thì plugins cache đó phải đảm bảo các tiêu chí sau :
+Có chức năng Preload
+Minify và nối file js,css
+Lazy Load ảnh và khung iframe
+Nhẹ nhàng
+Tạo cache riêng cho giao diện mobile (cực quan trọng)
+Tối ưu Database
+Disable Emojis
+Hỗ trợ CDN
Tuỳ vào mỗi người sẽ có cách chọn lựa khác nhau, với bản thân thì mình sử dụng Plugins WP Fastest Cache bản Premium để cache, nó chứa các ưu điểm trên và tương thích hầu hết các theme của WordPress.
***************************************************
Câu hỏi : Nếu tôi muốn đạt được 99/100 điểm PSI trên di động sử dụng wordpress, đơn giản nhất tôi sẽ làm gì ?
Trả lời : Bạn chỉ cần cài giao diện Astra phiên bản miễn phí, kết hợp plugins WP Fastest Cache bản Premium ,không sử dụng Page Buider để tuỳ biến trang chủ,dùng VPS tối thiểu 2GB ram, bật CDN từ Clouflare và phải sử dụng chứng SSL có phí, không lên được 99 điểm bán vốn mình ngay và luôn.
P/S : Không phải cứ PSI cao thì website nó tốt ,nó chẳng nói lên điều gì cả, chỉ cần website tải nhanh là được, người phán xét website của bạn suy cho cùng là người dùng, họ là người phán quyết cuối cùng chứ không phải PSI !