文章專區

SEO與搜尋行銷相關

清除前幾行內容中的禁止轉譯 JavaScript 和 CSS│部分快速轉譯技術

   本站先前由測量速工具 Page Speed Tools 禁止轉譯 JavaScript 和 CSS-改善網站速度提升介紹過的在行動裝置普及前,以往精美多樣化的網站所使用的JavaScript 和 CSS 特效程式較為複雜與龐大,因行動裝置的普及與限制載入,漸漸成了網站的弊端。

 
  因而衍伸出了改善JavaScript 和 CSS 載入限制的"部分快速轉譯技術",能夠在保留站台原始效果的情況下,調整網站在讀取瀏覽時的優先存取項目與技術,本次將針對實際細部改善技術進行介紹。
 
從範例的網站中,我們能瞭解 Page Speed Tools 明確的告知了我們網頁含有那 4 項禁止轉譯 CSS 資源,對網頁的轉譯作業造成延遲。
原本是方便連結、呼叫使用的特效卻造成了網站的連結延遲,所以,以下我們也將針對這部分項目進行改善範例說明。
 
以往大部分的設計師在開發網站的時候,會習慣將CSS打包成單一檔案,再根據頁面的使用需求進行外連來達到畫面乾淨並方便呼叫管理的應用,透過 Page Speed Tools 的告知,我們從範例網站的首頁載入程式碼確認了造成延遲的 CSS 外部連結位置。
 
以第一項 CSS:css/reset.css 為例,我們可以將原本外連的 CSS 資源進行"複製"加入首頁程式碼變成預設的風格設定。
 
將原先的 css/reset.css 的連結設定進行移除(本站為示範所以此部分使用隱藏方式呈現),把前一步驟所"複製"的 CSS 風格以 <style>  </style> 包裹進行貼上設定後儲存。
 
經過以上更換設定的方式,我們再使用 Page Speed Tools 的分析,便能發現在轉譯作業造成的延遲有所改善。透過這樣的"部分快速轉譯技術"我們便能在保留站台原始效果的情況下改善延遲效果。