網站優化

檢測網網是否有問題：
1、https://website.grader.com/

一、網路速度優化
1、優化圖像

• 圖像做適當的縮放
• 網站免費測試平台 Google’s PageSpeed Insights, Website Grader, and GTMetrix

2、瀏覽器緩存

• 啟用瀏覽器緩存，分成用戶端瀏覽器和伺服器端之緩存設置

3、啟動壓縮

• 從伺服器端端設置

4、優化你的CSS代碼

• 你的 CSS 代碼載入之前人們看到您的網站。時間越長，下載你的 CSS，他們等待的時間越長。
• 在CSS是否有多餘的 CSS 代碼沒用到或空白
• 可使用 csscompresssor.com 做檢查

5、Script  載入問題

• 很多網站會將 Script 放在  Head 內，這表示先載入後，才會執行內容 (Body) 顯示，故決解方式：
• 可以將 Script 放在內容之後。
• 在載入外部連結其標韱，加入defer (推遲) 或 async (非同步)屬性，

Both defer and async are very useful, but make sure you understand the difference before you use them:

• Async tags load the scripts while the rest of the page loads, but this means scripts can be loaded out of order. Basically, lighter files load first. This might be fine for some scripts, but can be disastrous for others.
• The defer attribute loads your scripts after your content has finished loading. It also runs the scripts in order. Just make sure your scripts run so late without breaking your site.

For example, you can take your original script

<script type=”text/javascript” src=”/path/filename.js”></script>

And add the little code to ensure it loads when you want it.

<script type=”text/javascript” src=”/path/filename.js” defer></script>
<script type=”text/javascript” src=”/path/filename.js” async></script>

二、如何減少您的網站的 HTTP Request
1、檢查你的網站目前使用多少 HTTP Request
使用Google Chrome >  Developer > Developer Tools 或按 F12

從左下角，可以看到共62 Http Request

2、刪除不需要的圖像
3、縮小圖像的檔案大小
4、使用 JavaScript 非同步
5、將 CSS 檔案合併在一起