

你必須很努力

Day29 - 透過 PageSpeed Insights 了解網站速度優化

你必須很努力

Day29 - 透過 PageSpeed Insights 了解網站速度優化

13th鐵人賽

 2021/10/12

字數統計: 333閱讀時間: 1 min

前言

若想進行網站速度優化，Google 有提供 PageSpeed Insights 與 Think with Google 這兩項工具可供參考

說明

使用方式非常的簡單，將想要測試的網址，輸入在 Google 提供的網站中進行測試即可

PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/

試著把 Google 提供的網址輸入進去看看...

以下為行動版的分數

以下為電腦版的分數

實際跑完顯示的詳細資訊

發現同樣的網址，連續測試時，每次的分數不完全一樣，當參考即可

---

比較您的行動網站載入速度 - Think with Google

https://www.thinkwithgoogle.com/intl/zh-tw/feature/testmysite/

試著把 Google 提供的網址輸入進去看看...

實際跑完顯示的詳細資訊

頁面的左上角可以「取得完整報表」

小結

跑出來的結果，可以當作參考，在自行評估是否要調整

也可以看下自己公司、競爭對手的網站的分數如何，分數只是分數，不能代表什麼，當作茶餘飯後閒聊即可

---

鐵人賽文章連結：https://ithelp.ithome.com.tw/articles/10276008
medium 文章連結：https://link.medium.com/CVmaqyOb0jb
本文同步發布於 小菜的 Blog https://riverye.com/

備註：之後文章修改更新，以個人部落格為主

原文連結：https://riverye.com/2021/10/12/Day29-透過-PageSpeed-Insights-了解網站速度優化/

發表日期：2021-10-12

更新日期：2022-12-21

• Next Post
  Day30 - 終於完賽的心得感言
• Previous Post
  Day28 - 如何埋 GA (Google Analytics)

Powered by River

CATALOG

1. 1. 前言
2. 2. 說明
   1. 2.1. PageSpeed Insights
      1. 2.1.1. 試著把 Google 提供的網址輸入進去看看...
      2. 2.1.2. 實際跑完顯示的詳細資訊
   2. 2.2. 比較您的行動網站載入速度 - Think with Google
      1. 2.2.1. 試著把 Google 提供的網址輸入進去看看...
      2. 2.2.2. 實際跑完顯示的詳細資訊
3. 3. 小結



• Archive
• Tag
• Cate

Total : 120



2023

• 08/15如何在 Ubuntu Server 用 mailcow 建置郵件伺服器
• 07/29Ubuntu Server 安裝教學

2022

• 12/31如何使用 Postman 測試 API
• 12/20如何擷取電腦、手機的封包 (圖文教學)
• 12/17在 Ruby 中用 Tor 打 API：如何隱藏真實 IP
• 01/31用 Ruby on Rails 幫 Excel 檔案加密、解密和欄位加上超連結、修改字形色彩
• 01/30用 Ruby 將訊息傳到 LINE 群組 (LINE Notify API)

2021

• 10/13Day30 - 終於完賽的心得感言
• 10/12Day29 - 透過 PageSpeed Insights 了解網站速度優化
• 10/11Day28 - 如何埋 GA (Google Analytics)
• 10/10Day27 - 如何讓 Google 搜尋到你的網站
• 10/09Day26 - 用 Ruby on Rails 寫分析股票的技術指標
• 10/08Day25 - 透過 Rake 自動下載處理臺灣證券交易所的資料
• 10/07Day24 - 將臺灣證券交易所的除權除息計算結果表存入 DB
• 10/06Day23 - 將臺灣證券交易所的每日收盤行情存入 DB
• 10/05Day22 - 用 Ruby on Rails 處理臺灣證券交易所資料-DB 設計
• 10/04Day21 - 用 Ruby on Rails 抓臺灣證券交易所資料-除權除息計算結果表
• 10/03Day20 - 用 Ruby on Rails 抓臺灣證券交易所資料-每日收盤行情
• 10/03禱告事項
• 10/02Day19 - 匯入 excel-測試篇
• 10/01Day18 - 匯入 excel-應用篇
• 09/30Day17 - 匯出 excel-測試篇
• 09/29Day16 - 匯出 excel-應用篇
• 09/28Day15 - 匯出(下載) PDF
• 09/27Day14 - PDF 加浮水印
• 09/26Day13 - PDF 加密、解密的處理
• 09/25Day12 - 解析圖片中的 QR Code 資料
• 09/24Day11 - Gem-rqrcode 或 barby 產 QR Code
• 09/23Day10 - 如何用手機連 Ruby on Rails Local 開發中的專案
• 09/22Day09 - Gem-jwt 介紹與應用
• 09/21Day08 - Gem-sidekiq-grouping 允許單個 sidekiq 處理多個相似(一樣)的 jobs
• 09/20Day07 - Gem-sidekiq-limit_fetch 限制 sidekiq queue 執行數量
• 09/19Day06 - 監控 Sidekiq 有無正常運作(或執行超過多久)
• 09/18Day05 - Gem-paranoia 軟刪除介紹與應用
• 09/17Day04 - Gem-activerecord-import 批次建立介紹與應用
• 09/16Day03 - Gem-strip_attributes 介紹與應用
• 09/15Day02 - 修改 Rails console edit 編輯模式
• 09/14Day01 - 鐵人賽我又來囉

2020

• 10/13在 Windows 10 底下的 Ubuntu 18.04 LTS 執行 Ruby on Rails 的 RSpec Capybara 能顯示 Chrome 瀏覽器 (selenium-webdriver) 跑 E2E 測試
• 10/05Day30 - 不免俗一定要來一下的完賽心得
• 10/04Day29 - Ruby 中的 Struct 與 OpenStruct
• 10/03Day28 - Ruby on Rails 中串 Slack 通知
• 10/02Day27 - Ruby on Rails 中使用 Foreman 打包所有要啟動的 server
• 10/01Day26 - Ruby on Rails 中使用 FFmpeg 處理影音轉檔、合併、上字幕
• 09/30Day25 - Ruby on Rails 中的 Sidekiq 的介紹與應用
• 09/29Day24 - Ruby on Rails 中的 Resque 的介紹與應用
• 09/28Day23 - Ruby on Rails 中的 Redis 的介紹與應用
• 09/27Day22 - Ruby on Rails 中的 Race Condition
• 09/26Day21 - Ruby on Rails 中常見的 N+1 與解法
• 09/25Day20 - Ruby on Rails 測試篇 - Cucumber (內文有範例教如何寫中文測試)
• 09/24Day19 - Ruby on Rails 測試篇 - RSpec
• 09/23Day18 - Ruby on Rails 中的 Logger 紀錄的介紹與應用
• 09/22Day17 - Ruby on Rails 中的 awesome_print 讓你的 console 更好閱讀
• 09/21Day16 - Ruby on Rails 中的風格管理套件 RuboCop
• 09/20Day15 - 如何看自己打出去的 request 完整資訊，以 PostBin 和 Webhook.site 為例
• 09/19Day14 - 在 Ruby 中使用 Benchmark 比較哪個方法比較快
• 09/18Day13 - 一些 Git 指令
• 09/17Day12 - 一些 Linux 套件 - 7-7 - 不實用篇 (cowsay、cmatrix)
• 09/16Day11 - 一些 Linux 套件 - 6-7 - 實用篇 (fzf、tldr)
• 09/15Day10 - 一些常用 Linux 指令 - 5-7 (lsof、dig、curl、nc、nice、cpulimit)
• 09/14Day09 - 一些常用 Linux 指令 - 4-7 (grep、rg、luit、iconv、cal、date)
• 09/13Day08 - 一些常用 Linux 指令 - 3-7 (cat、tac、head、tail、vi、sed)
• 09/12Day07 - 一些常用 Linux 指令 - 2-7 (ps、top、htop、free、df、du、kill)
• 09/11Day06 - 一些常用 Linux 指令 - 1-7 - 基礎篇 (exit、pwd、ls、cd、touch、mkdir、rm、cp、scp、mv、sudo、man、help、clear、which、find)
• 09/10Day05 - Mac、Chrome、iTerm2、Visual Studio Code 上常用的快捷鍵
• 09/09Day04 - Mac 上常用的軟體 (iTerm2、Dash、Alfred、Spectacle、Kap、GIPHY Capture)
• 09/08Day03 - Chrome 的小技巧 - 內建 URL 轉 QRcode
• 09/07Day02 - Chrome 的小技巧 - 內建截圖功能
• 09/06Day01 - 不免俗一定要來一下的參賽宣言
• 07/11如何讓 GitHub 每個 pull request (PR) 有預設模板
• 03/11從排斥寫程式到轉職成為工程師

2019

• 11/25Ruby on Rails 中的 IRB、Pry、rails console 差別
• 11/22Ubuntu sudo 免輸入密碼 no password 設定
• 11/19透過 Freenom 幫 Heroku 網址做 Cloudflare 的設定(Domain 買起來!!)
• 11/18如何在 GitHub 設定 Travis CI，以 Ruby on Rails 專案為例。
• 11/15Ruby 中的 Block、Proc、Lambda 是什麼？
• 11/10修改 Ubuntu 終端機的標題顯示(只顯示當前路徑 + Git branch)
• 11/09Hexo 踩到的雷(導覽列及站內搜尋功能)
• 11/08有趣的 4 題白板題
• 11/07來個三題 LeetCode easy 吧
• 11/03修復 BIOS Boot Sequence 找不到 Windows 10
• 10/27如何在不重灌的情況下修復 Ubuntu OS
• 10/23從無到有的 Blog 建置教學 (含 domain 購買轉址)
• 10/12Windows 10 安裝 Ruby + Rails + Node.js + Git + postgresql
• 10/09Day30-完賽是這種感覺啊
• 10/08Day29 - Codewars 刷題
• 10/07Day28 - Codewars 刷題
• 10/06Day27 - Codewars 刷題
• 10/06從 Hello World 開始
• 10/05Day26 - Codewars 刷題
• 10/04Day25 - Codewars 刷題
• 10/03Day24 - Codewars 刷題
• 10/02Day23 - Codewars 刷題
• 10/01Day22 - Codewars 刷題
• 09/30Day21 - Codewars 刷題
• 09/29Day20 - Codewars 刷題
• 09/28Day19 - Codewars 刷題
• 09/27Day18 - Codewars 刷題
• 09/26Day17 - Codewars 刷題
• 09/25Day16 - Codewars 刷題
• 09/24Day15 - Codewars 刷題
• 09/23Day14 - Codewars 刷題
• 09/22Day13 - Codewars 刷題
• 09/21刷題的標題好難想 (沒梗了 XD)
• 09/20刷題難度逐漸增強
• 09/19完成 1 / 3 鐵人賽，調整刷題步調繼續前進
• 09/18連續刷題看 7 分鐘能刷幾題 Codewars
• 09/17壓線前逼自己刷一題 Codewars
• 09/16刷一週題目了，有變強一些嗎?
• 09/15Rails 中的 Gemfile 檔案的內容
• 09/15週末來塊蛋糕吧~ Codewars - Which are in?
• 09/14Rails 在建立表單的時候，form_for 跟 form_with 有什麼不同？
• 09/14Ruby 裡的 self 是什麼意思
• 09/14在 Rails 裡的 spring 指令是做什麼的？
• 09/14要刷 1 題還是 2 題呢? 小孩子才做選擇，我全都要!!
• 09/13用 TDD 刷 Codewars - Reverse words
• 09/12換刷 Codewars - Find the next perfect square!
• 09/11從經典 LeetCode 開始吧 - Two Sum
• 09/10初生之犢不畏虎-參賽動機
• 07/29Ruby 世界裡的字串與符號是什麼?

抓包軟體 網路封包擷取 Charles 13th鐵人賽 12th鐵人賽 11th鐵人賽 Hexo 導覽列 站內搜尋 Ubuntu mailcow Postman API Ruby Tor Rails gemfile form_with IRB Pry rails console string object self Block Proc Lambda Node.js Git postgresql sudo no password Ruby on Rails Excel xlsx 禱告 curl LINE Notify Leetcode 刷題 BIOS Boot UEFI Windows 10 terminal git branch spring Travis CI GitHub RSpec Windows Capybara selenium-webdriver 預設模板 轉職 工程師 軟體工程師 部落格 Blog domain method keyword arguments block Cloudflare Freenom Heroku Domain



缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是archer根目录）执行以下命令：
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: true
    tags: true

教學文 鐵人賽 踩到的雷 Rails Ruby 環境建置 環境修復 心得文 網頁



