如何提高網站速度?什麼是next-gen格式的圖片?

專案管理師 Ili Wang

2020-04-30
    內容大綱

滿常收到客戶在上線後,反應自己的網站過慢,一進去客戶的網站一看,阿呀!全部都是大圖呢!

而通常也不知道到底犯了什麼錯誤所導致,以及從何改起?這時通常我們都會透過Google PageSpeed Insights,先大概看一下所列出來的圖片,當作"參考",讓你比較快的知道要從哪裡改善,應該絕大部分的用戶都會看到以下資料:提供next-gen格式的圖片

這時候就會有疑問了,什麼是next-gen格式的圖片?

白話來講,就是這三種圖片格式:JPEG2000、JPEG XR、Web P,以下簡單做介紹:

 

1.JPEG2000

JPEG2000是由聯合圖像專家小組創建和維護,通常被認為是未來取代JPEG的下一代圖像壓縮標準,副檔名大多是為.jp2,雖然JPEG 2000在技術上有一定的優勢,但普遍仍是較少使用的圖像文件。

與JPEG相較,JPEG 2000比較明顯的優點就是沒有JPEG壓縮中的馬賽克失真效果,主要為模糊失真。但在低壓縮比情形下(比如壓縮比小於10:1),JPEG圖像質量還是會比JPEG 2000要好,因此JPEG 2000適用在壓縮比較高的情形下,優勢才會明顯。

 

2.JPEG XR

JPEG XR由Microsoft開發,屬於Windows Media家族的一部分,用於替換JPEG2000,增加HDR支援。微軟公司宣稱JPEG XR「使用與JPEG算法相當的計算量與內存消耗可以得到明顯的與JPEG 2000相當的圖像品質。在有損壓縮的情況下可以得到明顯比JPEG好的品質並且文件大小減小一半」。不過仍然是較少使用的圖像文件格式。

 

3.Web P

Web P則由Google推出。跟JPEG採用同樣的壓縮技術,根據Google較早的測試,WebP的無失真壓縮比網路上找到的PNG檔少了45%的檔案大小,即使這些PNG檔在使用pngcrushPNGOUT處理過,WebP還是可以減少28%的檔案大小。也因為是Google本身自行推出,因此在主流瀏覽器Google Chrome是支援的,相對於前兩者來說,會較方便。

 

以上這些圖檔格式的壓縮效率雖然優於PNG或JPEG,能夠減少數據用量,較快的完成下載。但由於next-gen格式的圖片尚未這麼普遍,有些瀏覽器甚至未能支援,也可能因為高壓縮而導致圖片大大失真、色偏,因此這個只是改善方式之一,也能先從將網站內的PNG先轉為JPEG就好,除非圖片真的需要使用透明背景才有必要用PNG。

 

接下來再將JPEG圖檔壓縮、調整解析度,可參考以下兩篇文章的作法:

圖片讀取太久,使用者抱怨流量都被吃光了-解析度篇

圖片讀取太久,使用者抱怨流量都被吃光了-壓縮篇

 

總體而言,可以先從以下方式做好圖片的管理:

1. 若非需要使用透明背景,將圖檔儲存為JPEG格式

2. 圖片尺寸寬不超過1920px,以適當尺寸大小儲存,並且設定於72dpi即可

3. 壓縮檔案大小確保在1M以下

 

在管理網站圖片,可以依據上述重點來製作與上傳圖片,這樣子就可以為網站釋出更多流量,並且提升網站的效能哦!


專案管理師 Ili Wang

2020-04-24

圖片讀取太久,使用者抱怨流量都被吃光了-解析度篇

    內容大綱

當你在使用架設自己的網站時,有想過為什麼自己的網站讀取速度為什麼會比別人慢上一截嗎?

看看這圖片讀取數量及圖片大小,光是要下載完這些圖片就花了將近26秒的時間,圖片大小也來到了100多MB,這樣網站讀取速度想當然是非常的慢。但別擔心,現在就教你如何壓縮圖片,及剪裁在網站上圖片該有的尺寸。

現在先抓張圖片給大家做示範,此圖片有經過馬賽克處理,先來看看這張圖片的錯誤示範,第一個問題就是圖片的解析度太大了,由於多數人的螢幕解析度都在1920x1080,就算圖片的解析度再大,使用者的螢幕解析度沒跟上的話,那他還是只能看到1920x1080的解析度,而且人眼的辨識率也不會那麼清楚,不如犧牲點解析度來換取更曉得圖片大小,這樣對於使用者會有更好的使用體驗。

那這邊就推薦大家一個好用的圖片解析度調整的網站, iLoveIMG
網址:
https://www.iloveimg.com/zh-tw/resize-image

這網站方便的地方就在於,同時包含了各種圖片處理的工具,例如:壓縮圖片、調整解析度、圖片剪裁及轉換格式等等,而今天要用的就是調整解析度。

那下方就是一張8MB的圖片,解析度是3666x5446,剛剛也說明了大多數人電腦螢幕的解析度落在1920x1080附近,那為什麼我這邊設定的圖片解析度是727x1080,而不是1920x2852呢?

這邊的話就要看你的網站是甚麼取向了,你看一張圖片是希望一張圖片完整地呈現在螢幕上,但解析度稍微差一點;還是希望看一張圖片要一直上下滑動才能看到完整的圖片,但解析度比較好,那這邊就是取決於個人的使用習慣了,而圖片大小也就是在這地方會有巨大的落差了。

看看這檔案大小的落差,727x1080只需要348KB,而原始大小的圖片卻要8MB,差了20倍的大小,如果一頁10張這樣落差的圖片,那從原本可能80MB大小的頁面就大幅縮減成3.4MB左右,網站的速度自然就會快上許多。


專案管理師 Ili Wang

2020-04-24

圖片讀取太久,使用者抱怨流量都被吃光了-壓縮篇

    內容大綱

上次已經處理了圖片解析度的問題,但感覺圖片的大小還是有點大,放了10張350KB的圖片還是有3.5MB的大小,對於網速比較慢的使用者來講就是很嚴重的卡頓,所以我們還是要再想辦法把圖片再次的壓縮。

jpg圖片的壓縮通常會伴隨著失真的風險,通常使用的壓縮率都是80%上下,80%的壓縮率提供了不錯的壓縮空間及不明顯的圖片失真,既可以保持圖片的美觀,又可以提高網路的速度。

那這邊就推薦大家一個好用的圖片壓縮的網站,iLoveIMG
網址:
https://www.iloveimg.com/zh-tw/compress-image/compress-jpg

 

沒錯,今天要介紹的還是iLoveIMG,這次使用的功能是iLoveIMG的壓縮單個圖片文檔,雖然是寫壓縮單個圖片,但還是可以同時壓縮至少15張圖片,能壓縮的圖片種類包含了JPG、PNG及GIF。這邊我們就直接上傳剛剛的圖片吧!

壓縮完成後會告訴你圖片的大小壓縮比例,像剛剛接近350KB的圖片現在被壓縮到剩17KB,大幅度的縮小了95%的空間。

下面再來看看圖片的解析度,除了被打上馬賽克的上半身以外,腳的部分跟原本幾乎看不出差別,這圖片壓縮的技術是不是很厲害呢!!


專案管理師 Ili Wang

2020-04-16

Wordpress很優秀,但是它不應該成為你的購物車系統

    內容大綱

首先我要說的是WordPress是個很好的系統,畢竟全世界一堆人在用,但是它的基底是Blog,直到之前出了Woocommerce,搖身一變居然成為了購物車。

 

由於我們公司本身就是做網站架設和開發,初期就有客戶說一定要用WordPress,直到近幾年,我們其實都沒有在使用這套系統,那就來說說我的經驗談吧!

 

 

1.WordPress真正能掌握的人很少

我有看過一些很猛的網站,是用WordPress下去做的,比如相片書的編輯系統,那時候看了真的傻眼,功能很多,也很完善,但是你要知道,在網路的世界能真正掌握WordPress的公司或是人材,真的是佔非常少數,表面上你看到的功能,可能都只是他用下載回來的套件而已,這意思就是說,除非你真的找到了能100%掌握WordPress的公司或是專業人材,不然我認為用WordPress開發購物車系統風險很高。

 

2.成也套件、敗也套件

WordPress我個人很喜歡的就是他套件一堆,要啥功能基本上網路上找一下,點一下就OK了,但是在我這系統開發商眼中,這種其實超級危險,因為我們就有愈過很多很多案例,怎麼查詢Mail寄信資料的時候,發現會亂寄信、後台登入的時候有時候轉超級慢、進入網頁的時候偶發性被轉址到其他網站!最後查出來的原因就是套件裡面有被開後門...反正信不信隨你,至少這是我的經驗。意思就是你的資料庫或是客戶的交易資料,隨時都可能被取走...這樣你敢做購物車?甚至匯款的帳號被改了也是有可能,不要小看購物車的資安層級,如果今天有人拿你網站的購物資料去對你的客戶進行詐騙,這是對整個公司的信譽問題,請不要想得太簡單,但是如果你是個人,又不在意資安,那方便快速的WordPress絕對是你的首選。

 

那也許有人會說,反正我不要安裝套件就好了,其實也是,但是那是從你個人角度思考,但是有些套件就是會安裝到,他有可能一開始是正常的,但是更新的時候,萬一你發貨時後台登入的帳密權限沒設定好,你的基層員工或是工讀生,一登進去,看到有個好煩的套件要更新之類的?一直卡在畫面上,每次登入都有,那你覺得他多久會點下去更新?

 

3.多國語言系統根本是個坑

這個原因其實是我們最後絕對不碰WordPress的最大原因,沒錯,你在網路上搜尋WordPress的多國語言,套件一定有,你也是安裝的上去,但是問題來了,你現在又安裝了套件A、套件B、套件C、套件D然後你原本的多國語言系統會支援嗎?就算會支援,呈現出來的是不是真得是你要的...,所以多國語言,是你在考慮WordPress的一大考量項目。

 

4.載入速度,一下廣告你一定爆炸

WordPress過去幾年,速度一直是個笑話,雖然近期有改善,但是載入的東西實在是太多,真心覺得恐怖。通常我會這樣跟客戶說,軟體面,你一個人使用和50個人使用,差距一下就出來了,也許你平常看網站,喔~開起來3秒差不多,但是當你今天跟行銷公司投廣告,不用多,一季15萬好了,這時候你的網站開始有流量,搞不好50個人同時進來,恭喜你,網站開始轉圈圈,你的行銷預算真的就是直接丟水溝,結果還怪行銷公司怎麼下廣告沒訂單,然後行銷公司會給你報表,說我們有導流量到你的網站,然後...就沒然後惹!


相關資訊

其它資訊