[Series]Google Pagespeed Insight: tối ưu hoá hình ảnh của website

[Series]Google Pagespeed Insight: tối ưu hoá hình ảnh của website

Why?

Google Pagespeed Insight là dịch vụ đánh giá tốc độ website của Google, và nó cũng có 1 ý nghĩa nhất định đối với SEO trên Google: điểm Pagespeed càng  cao càng tốt. Trong các tiêu chí đánh giá của Google thì dung lượng ảnh là 1 tiêu chí rất quan trọng: ảnh có dung lượng lớn khiến user mất thời gian để tải ảnh, tăng chi phí băng thông. Với các thiết bị di động sử dụng mạng 3G tốc độ chậm thì  rất cần tối ưu hoá ảnh.

Ở bài này, chúng ta sẽ tiến hành bước tối ưu hoá hình ảnh trên 1 website/server bằng cách nén ảnh mà không gây mất mát: dung lượng ảnh có thể được nén từ 10 ~ 50% mà không đổi kích thước, chất lượng hầu như không thay đổi. Server sử dụng là CentOS/ Amazon server

 

Ảnh trước và sau khi nén

Ảnh trước khi nén, 75,628 bytes

Ảnh sau khi nén, 19,996 bytes (nhỏ hơn 73%)

 

 

 

 

 

 

Tối ưu hoá ảnh JPG

Để nén ảnh JPG, ta sử dụng jpegoptim

Cài đặt các gói thư viện cần thiết

sudo yum -y install libjpeg
sudo yum -y install libjpeg-turbo-devel

Download gói jpegoptim về và build

cd /tmp
mkdir jpegoptim
cd jpegoptim
wget http://www.kokkonen.net/tjko/src/jpegoptim-1.3.0.tar.gz
zcat jpegoptim-1.3.0.tar.gz | tar xf -
cd jpegoptim-1.3.0
./configure
make
make strip
make install

Câu lệnh đến nén ảnh

jpegoptim [ options ] [ filenames ]

Để nén ảnh .jpg trong 1 folder có tên là  img

jpegoptim img/*.jpg

Tiến hành nén toàn bộ ảnh ở folder hiện tại và folder con

find . -iregex '.*\.\(jpg\|JPG\|jpeg\|JPG\)' -type f -exec /usr/local/bin/jpegoptim {} ';'

Tiến hành nén toàn bộ ảnh trên server

find / -iregex '.*\.\(jpg\|JPG\|jpeg\|JPG\)' -type f -exec /usr/local/bin/jpegoptim {} ';'

※ Lưu ý thao tác nén ảnh này có thể kéo dài và rất tốn tài nguyên CPU, nên thực hiện khi lượng truy cập ít.

Tối ưu hoá ảnh PNG

Ta sử dụng thư viện PNGQuant .

Sau khi cài đặt, ta có nhiều phương án nén ảnh

Nén toàn bộ ảnh trong folder hiện tại

pngquant -ext .png -force 256 *.png

Nén toàn bộ ảnh trong folder con, sâu tới tầng thứ 3

pngquant *.png */*.png */*/*.png

Nén toàn bộ ảnh ở thư mục hiện tại và thư mục con

find . -name '*.png' -exec pngquant --ext .png --force 256 {} \;