技術 Day03 X Performance Analyzers feat. Lighthouse-CI

經過昨天，我們明白了效能對於前端應用的重要性，但是，我們要怎麼評估一個網站的效能呢？用感受的嗎？自己使用這個網站時還算順暢就定義為這是一個效能很好的網站嗎？當...

技術 [Day07] 瀏覽器開發工具 - 效能篇(上)

完成除錯後，接著就要幫我們開發的頁面進行效能上的檢測和優化。在現在各種裝置的普及，前端應用也愈多樣複雜，使用者對於速度也就愈要求。 為了提升使用者的體驗，開發者...

技術 [Day12] 瀏覽器開發工具 - 燈塔篇(Lighthouse)

在Day7的介紹中，我們初步認識了 Lighthouse ，在效能的檢測上可以發現問題，並且給予修改上的建議。 但 Lighthouse 其實還有其他面向的檢...

技術 DAY 24 React Native 效能優化： 使用 Flashlight 衡量應用程式效能

今天要來介紹一個很有趣的效能監測工具 Flashlight，透過 Flashlight 可以查看正式環境的 APP 效能，不只你自己開發的 APP 可以看得到，...

技術 [Day 22] 前端效能測試（二）－ 前端效能測試方法

Performance insights 欲測試網站效能，可以使用 network 的 Performance insights。其提供 DCL（DOM Con...

技術 GTmetrix 網站分析工具將會進行重大的改革和更新（2020 年），更多的【測試地點】選擇和用 Lighthouse metrics 準則

GTmetrix 的代表 Ian Pham 透露，讓大家知道 GTmetrix 即將發生的重大變化。他們正在改造平台，並用 Lighthouse 指標取代 P...

技術 Day 26 - 例子 - Lighthouse整合到CI

目錄 目錄 摘要 什麼是Lighthouse 步驟 前置準備 在repo安裝Lighthouse CI的Github APP 設定L...

技術 Day 20: 30天打造SaaS產品前端篇 - 第20天React架構盤點與實踐驗證

前情提要 經過前面 19 天的開發，我們已經建立了一個完整的現代化前端 SaaS 應用。今天是 30 天挑戰的 2/3 里程碑，讓我們來看這 20 天打造的 R...

技術 Day 24 網站效能檢查（Lighthouse）+ 改善

可以在正式上線的網頁中，按 F12 > Lighthouse，讓他對網頁進行效能檢查。檢查結果會有以下分類： 1. Performance 效能...