SpeedVitals 免費網站性能分析工具,最佳化網站使用體驗

SpeedVitals 免費網站性能分析工具,最佳化網站使用體驗

身為網站管理者經常會去改動網頁各項參數,或是調整看得到的版型設計等相關細節,在搜尋引擎即將開始提高網站使用體驗核心指標(Core Web Vitals)佔比之際,需要開始最佳化網站使用者體驗,有助於讓網站在搜尋結果獲得更多的曝光機會。大多數情況會使用 Google PageSpeed Insights 去進行測試評分,但它給的建議較少,搭配 GTmetrix 可以獲得更多的分析結果,不過 GTmetrix 有每日可免費使用次數限制,接下來的服務是免費替代方案。

Wicked Backgrounds 製作漂亮的波浪狀背景圖,適用於網站、簡報設計

Wicked Backgrounds 製作漂亮的波浪狀背景圖,適用於網站、簡報設計

之前介紹過一些線上背景產生器,例如 Cool Backgrounds 內建五種背景類型,可以製作三角幾何圖形、科技粒子效果、CSS 漸層背景、漸層地形圖不同色彩組合,如果想產生簡單但又有點活潑的圖案,帶有漸層色的波浪背景圖是個不錯的選擇,例如 Svg WaveGet WavesSVG Waves 都是波浪圖產生器,功能相近,使用者能調整波峰數、高度、顏色或形狀變化等等。

Fast or Slow 免費網站測速工具,從全球 18 個位置測量網頁效能速度

Fast or Slow 免費網站測速工具,從全球 18 個位置測量網頁效能速度

如果想測試網站或部落格開啟速度,可不是只有在自己瀏覽器以開發人員工具檢查而已,用感覺的方法一定不準確,而且網站開啟速度也會受到各種因素影響,其中又以地理距離最為顯著,在不同國家地區存取網站的各種資源可能會有不同的反應速度或表現,甚至某些檔案在一些區域難以開啟等等,這都要使用網站測速服務才能做到,例如之前推薦過的「16 個免費網站測速工具,分析網頁效能表現」就有很好用的選項。

VISIWIG 整合免費圖示、背景圖和紋理效果,一鍵複製 CSS、SVG 程式碼

VISIWIG 整合免費圖示、背景圖和紋理效果,一鍵複製 CSS、SVG 程式碼

這幾年有不少背景圖案製作工具,都可以在線上預覽、客制化圖形細節,最終產生 CSS 和 SVG 格式,甚至在不用下載任何檔案的情況下直接複製程式碼,加入網頁就會獲得非常好的效果,兼具品質和效能,也不會拖慢網頁速度。例如之前我厭過的 Hero Patterns 快速產生重複圖案 CSS 背景;CSS Background Patterns 也能製作各種純色彩背景圖,如果需要背景圖也能試試看接下來要介紹的服務。

Printables 可列印免費手機模型草稿紙,以更清晰的思路開發應用程式

Printables 可列印免費手機模型草稿紙,以更清晰的思路開發應用程式

雖然沒有親身參與過手機應用程式專案,但可以想見在開發前期應該會有一段繪製草稿的過程,將各種想法經過討論轉為可視化應用程式草圖,才能夠繼續接下來的調整,這時候就必須把應用程式畫面畫出來。最近看到一個有助於應用程式開發的免費資源,提供許多手機模型模版,只要將它下載、列印出來就變成草稿紙,直接在紙上繪製更方便。

Google Fonts 推出 Material Icons 免費圖示字型,收錄兩千個圖案五種樣式

Google Fonts 推出 Material Icons 免費圖示字型,收錄兩千個圖案五種樣式

五年前 Google I/O 大會 Google 釋出數百個 Material Icons 免費圖示,這些圖案不僅會應用到自家產品開發,也將它開放原始碼放到 GitHub 網站上讓使用者免費下載使用,可自由使用於個人或商業用途。時至今日已累積超過 2000 多種不同圖案,並有五種樣式可供選擇,這些圖案對於在傳達一些概念或想法上尤其重要,特別是在數位環境使用者介面更是無所不在。

SVG Waves 免費波浪圖產生器,互動式介面即時產生圖案原始碼

SVG Waves 免費波浪圖產生器,互動式介面即時產生圖案原始碼

這幾年看過一些波浪狀、具有弧度的圖形設計,可能運用在網頁、應用程式或文件,這些圖案可以利用產生器製作,像是之前介紹過的 Get WavesSvg Wave 都能在瀏覽器上建立出符合自己需求的波浪圖,無論波浪類型、波峰數量、層數、高度、顏色密度等等,有些還能搭配上漸層色效果,如果要尋找波浪圖的話就不需以繪圖軟體自行繪製,類似產生器很多,能打造出相當個人化的圖形。

Cool Backgrounds 免費背景製作工具,內建五種效果可自訂顏色

Cool Backgrounds 免費背景製作工具,內建五種效果可自訂顏色

根據 Cool Backgrounds 開發者研究,在發佈網頁或文章前最困難的步驟之一是找到合適背景圖片,好的圖片不僅能凸顯整篇內容質感,也可獲得更多使用者注意。我之前推薦不少免費背景產生器,依照使用者需求快速製作出很活潑、色彩鮮豔的背景,例如 Svg Wave 產生波浪狀背景圖案(在很多網站都能看到);Hero Patterns 製作好看的重複平鋪式背景,而且只要將 CSS 語法帶入就能套用。

Iconpie 上傳圖片自動產生各種網頁及應用程式專用的圖示尺寸

Iconpie 上傳圖片自動產生各種網頁及應用程式專用的圖示尺寸

無論是開發網站、網頁服務或是一般手機應用程式,一定都會用到圖示,這在網站上通常被稱為網頁圖示(Favicon),應用程式也會因裝置需要不一樣的圖示大小,雖然轉換圖片大小是很簡單的事,但我們不一定確切知道需要什麼樣的尺寸或格式,有一些工具可以快速解決問題,像是 Favic-o-Matic 就能協助使用者製作出各種尺寸的網站圖示,而且也提供對應的程式碼非常有用。

Formito 免費網站圖示 Favicon 產生器,以文字或表情符號線上製作圖案

Formito 免費網站圖示 Favicon 產生器,以文字或表情符號線上製作圖案

如果有開發或經營網站的經驗,一定知道網站圖示(Favicon)是相當重要的一個環節,這個圖案除了顯示於書籤列表,在開啟網頁時也會出現在瀏覽器分頁標籤左側,對於識別網站來說有一定程度效果,特別是很多人習慣同時打開許多分頁,在這種情況下圖示就成為快速切換特定分頁的方式。一開始就建議選擇具有代表性、容易被記住的圖案或顏色,通常會以 LOGO 或是字母搭配特定顏色加強記憶。