Lazy Loading 的重要：

Lazy Loading 就是「懶惰的載入」。

目前 Lazy loading 都是用在圖檔，所以，Lazy Loading 就是：「懶惰的只載入網頁中看的到的部分圖檔」。有什麼用呢？有大用，而且很重要，它可以：

• 避免網頁 reflow
• 加快網頁載入

什麼是網頁的 reflow

我想很多人都有看過一些網站，當網頁往下 scroll 時，就開始會有新的圖檔出現，但是，圖都是飛「插」進來的，所以，網頁的文字部分就被擠下去，這很討厭，使用者看到一半，字就不見了，體驗真的很差，這就是 reflow 問題。

我們當然可以讓網頁一次顯示所有的圖，這樣就不會有 reflow 的問題，只是，圖檔，通常都是網頁中最佔頻寬的大怪物，所以，沒有人會這麼做，事實上，很多現代的瀏覽器也只會先載入看得到的圖，例入：Google Chrome。

所以，網頁上，所有的圖，都最好都能 Lazy Loading？

對，而且 Lazy Loading 使用簡單，要享受 Lazy Loading 快速，又不希望網頁 reflow，只要在 IMG tag 上加兩個參數：

1. 圖片的大小，及
2. 加上 loading="lazy" attribute

如下：

<img src="https://abc.com/1.png" width="400" height="225" loading="lazy">
image_tag(img_src, size: "400x225", loading: "lazy" )

上面第二行就是 Rails 的寫法，夠簡單吧，只是，我想你可能馬上就想到一個大問題，如果你的圖是外部的，就不會知道圖片的大小尺寸，對不起，要用 Lazy Loading 一定要有圖片大小，這...... 

Lazy Loading 的限制：一定要知道圖片大小

要知道外部圖片的大小，你可能會想說，那就去 parsing 這外部網頁，讀取 <img> 中的 width & height，但是，人家網頁上不一定有啊，所以，實務上，真正能用的方法，好像就只能是真的把圖讀進來，可是，如果每次產生網頁，都要讀一遍外部的圖，那不只把老闆嚇死，你的用戶也跑光，因為讀圖超慢⋯⋯ 所以？死路一條？

更可怕的是，不只是要知道外部圖片的大小很慢，就算圖在你自己的 server，要知道，也只能去讀取它，也是超慢。

所以，就是死路一條？ 等等，我提供一個解法，也許不完美，但是堪用！

用 Rails Cache ＋ FastImage Gem：

FastImage 這個 gem 功能很少，就只會做兩件事：讀取圖片的大小及檔案格式，但是，它做的很快，超快，剛好就是我們要的，快速的知道外部圖片的大小。

自己寫？不要傻了，讀取外部圖片是很麻煩的，很多網站的圖是深埋在數層的 redirect 中，有些還有讀取次數 threshold 限制，總之，花時間寫不值得，FastImage 很值得一試，就相信它吧，它也很簡單，讀得到就讀，讀失敗就傳回 nil，我把這個 gem 的連接放在最後的參考中。

讀好了後，就把這段碼 cache 起來，也就是說，如果這個外部的 url 不變，就不用再讀取了，一般來說，這樣很夠用了，因為如果圖檔的 url 及名稱都不變，圖檔通常就是沒變，當然，這是假設，不可能百分之百，但是我覺得很夠用了。

如常，廢話少說，上碼：

<% cache ["img_lazy", img_src ] do %>
  <% img_size = FastImage.size(img_src) %>
  <%  if img_size.present?
        s_size = img_size[0].to_s + 'x' + img_size[1].to_s
      else
        s_size = ""
      end %>
  <%= image_tag(img_src, size: s_size, loading: "lazy" ) %>
<% end %>

這段碼應該不用再說明了，故意寫得不精簡，這樣才好讀好懂，我自己做紀錄，也希望能幫到需要的人。

會花時間做 Lazy Loading，除了要提供客戶好體驗外，我想也是為了 PageSpeed Insights，至少我是，因為它會抱怨：

Defer offscreen images

結果如何？很棒，改完後，這個抱怨就沒了，而且，在這麼多的優化 PageSpeed 得分的過程中，改 lazy loading 的得分進步最多，我有一個網頁，一次竟然進步七分！

就這樣，希望有幫助。

參考：

sdsykes/fastimage — FastImage finds the size or type of an image given its uri by fetching as little as needed.
GitHub