Add lazy loading to iframes (#4673)

2019-11-19 05:01:56 +05:30 · 2019-11-19 05:01:56 +05:30 · bf867a624a
commit bf867a624a
parent c1aaf53a40
31 changed files with 47 additions and 34 deletions
--- a/app/views/articles/_splash.html.erb
+++ b/app/views/articles/_splash.html.erb
@ -49,5 +49,5 @@
 </style>

 <div class="home-page-splash">
-  <iframe width="560" height="315" src="https://www.youtube.com/embed/f2P_ryNDFdc" frameborder="0" allowfullscreen></iframe>
+  <iframe width="560" height="315" src="https://www.youtube.com/embed/f2P_ryNDFdc" frameborder="0" allowfullscreen loading="lazy"></iframe>
 </div>
--- a/app/views/html_variants/_single_html_variant.html.erb
+++ b/app/views/html_variants/_single_html_variant.html.erb
@ -3,7 +3,7 @@
  <h3>
    <a href="/html_variants/<%= html_variant.id %>"><%= html_variant.name %></a>
  </h3>
-  <iframe src="/html_variants/<%= html_variant.id %>"></iframe>
+  <iframe src="/html_variants/<%= html_variant.id %>" loading="lazy"></iframe>
  <div class="html-variants-page-single-variant-details">
    <% if html_variant.published %>
      <span class='pill published'>published</span>
--- a/app/views/liquids/_asciinema.html.erb
+++ b/app/views/liquids/_asciinema.html.erb
@ -3,6 +3,7 @@
    scrolling="no"
    id="asciinema_<%= id %>"
    src="https://asciinema.org/a/<%= id %>/iframe"
+    loading="lazy"
    style="width:100%;height:50vh;">
  </iframe>
 </div>
--- a/app/views/liquids/_blogcast.html.erb
+++ b/app/views/liquids/_blogcast.html.erb
@ -5,5 +5,6 @@
    mozallowfullscreen="true"
    src="https://blogcast.host/embed/<%= id %>"
    style="width:100%;min-height:132px;overflow:hidden;margin:0;"
+    loading="lazy"
    webkitallowfullscreen="true"></iframe>
 </div>
--- a/app/views/liquids/_codepen.html.erb
+++ b/app/views/liquids/_codepen.html.erb
@ -4,5 +4,6 @@
  scrolling="no"
  frameborder="no"
  allowtransparency="true"
+  loading="lazy"
  style="width: 100%;">
 </iframe>
--- a/app/views/liquids/_codesandbox.html.erb
+++ b/app/views/liquids/_codesandbox.html.erb
@ -2,5 +2,6 @@
  src="<%= "https://codesandbox.io/embed/#{id}#{query}" %>"
  style="width:100%; height:calc(300px + 8vw); border:0; border-radius: 4px; overflow:hidden;"
  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+  loading="lazy"
  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin">
 </iframe>
--- a/app/views/liquids/_glitch.html.erb
+++ b/app/views/liquids/_glitch.html.erb
@ -3,5 +3,6 @@
    sandbox="allow-same-origin allow-scripts allow-forms allow-top-navigation-by-user-activation"
    src="https://glitch.com/embed/#!/embed/<%= id %>?<%= query %>"
    alt="<%= id %> on glitch"
-    style="height: 100%; width: 100%; border: 0;margin:0;padding:0"></iframe>
+    style="height: 100%; width: 100%; border: 0;margin:0;padding:0" 
+    loading="lazy"></iframe>
 </div>
--- a/app/views/liquids/_instagram.html.erb
+++ b/app/views/liquids/_instagram.html.erb
@ -5,7 +5,8 @@
    allowtransparency="true"
    frameborder="0"
    data-instgrm-payload-id="instagram-media-payload-0"
-    scrolling="no">
+    scrolling="no" 
+    loading="lazy">
  </iframe>
  <script async defer src="https://platform.instagram.com/en_US/embeds.js"></script>
 </div>
--- a/app/views/liquids/_jsfiddle.html.erb
+++ b/app/views/liquids/_jsfiddle.html.erb
@ -5,5 +5,6 @@
  scrolling="no"
  frameborder="no"
  allowfullscreen
-  allowtransparency="true">
+  allowtransparency="true"
+  loading="lazy">
 </iframe>
--- a/app/views/liquids/_kotlin.html.erb
+++ b/app/views/liquids/_kotlin.html.erb
@ -3,4 +3,5 @@
  allowtransparency="true"
  scrolling="no"
  frameborder="0"
+  loading="lazy"
 ></iframe>
--- a/app/views/liquids/_parler.html.erb
+++ b/app/views/liquids/_parler.html.erb
@ -1,5 +1,6 @@
 <iframe
  width="<%= width %>"
  height="<%= height %>"
-  src="https://api.parler.io/ss/player?url=<%= id %>">
+  src="https://api.parler.io/ss/player?url=<%= id %>" 
+  loading="lazy">
 </iframe>
--- a/app/views/liquids/_replit.html.erb
+++ b/app/views/liquids/_replit.html.erb
@ -1,3 +1,3 @@
 <div class="ltag__replit">
-  <iframe frameborder="0" height="550px" src="<%= "https://repl.it/#{id}?lite=true" %>"></iframe>
+  <iframe frameborder="0" height="550px" src="<%= "https://repl.it/#{id}?lite=true" %>" loading="lazy"></iframe>
 </div>
--- a/app/views/liquids/_slideshare.html.erb
+++ b/app/views/liquids/_slideshare.html.erb
@ -5,5 +5,6 @@
  height="<%= height %>"
  frameborder="0"
  scrolling="no"
+  loading="lazy"
  allowfullscreen>
 </iframe>
--- a/app/views/liquids/_soundcloud.html.erb
+++ b/app/views/liquids/_soundcloud.html.erb
@ -4,5 +4,5 @@
  scrolling="no"
  frameborder="no"
  allow="autoplay"
-  src="https://w.soundcloud.com/player/?url=<%= link %>&auto_play=false&color=%23000000&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true">
+  src="https://w.soundcloud.com/player/?url=<%= link %>&auto_play=false&color=%23000000&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true" loading="lazy">
 </iframe>
--- a/app/views/liquids/_speakerdeck.html.erb
+++ b/app/views/liquids/_speakerdeck.html.erb
@ -16,5 +16,6 @@
            height: 100%;
            left: 0; top: 0;"
    webkitallowfullscreen="true"
-    width="710"></iframe>
+    width="710"
+    loading="lazy"></iframe>
 </div>
--- a/app/views/liquids/_spotify.html.erb
+++ b/app/views/liquids/_spotify.html.erb
@ -5,5 +5,6 @@
  frameborder="0"
  allowtransparency="true"
  allow="encrypted-media"
-  src="<%= embed_link %>">
+  src="<%= embed_link %>"
+  loading="lazy">
 </iframe>
--- a/app/views/liquids/_stackblitz.html.erb
+++ b/app/views/liquids/_stackblitz.html.erb
@ -5,5 +5,6 @@
  scrolling="no"
  frameborder="no"
  allowfullscreen
-  allowtransparency="true">
+  allowtransparency="true"
+  loading="lazy">
 </iframe>
--- a/app/views/liquids/_vimeo.html.erb
+++ b/app/views/liquids/_vimeo.html.erb
@ -5,5 +5,6 @@
  frameborder="0"
  webkitallowfullscreen
  mozallowfullscreen
-  allowfullscreen>
+  allowfullscreen
+  loading="lazy">
 </iframe>
--- a/app/views/liquids/_youtube.html.erb
+++ b/app/views/liquids/_youtube.html.erb
@ -2,5 +2,6 @@
  width="<%= width %>"
  height="<%= height %>"
  src="https://www.youtube.com/embed/<%= id %>"
-  allowfullscreen>
+  allowfullscreen
+  loading="lazy">
 </iframe>
--- a/app/views/pages/live.html.erb
+++ b/app/views/pages/live.html.erb
@ -29,7 +29,7 @@
  <div class="live-container">
    <div class="live-component">
      <div>
-        <iframe class="live-video" src="//iframe.dacast.com/b/105417/c/465464" width="1920" height="1080" frameborder="0" scrolling="no" allow="autoplay" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
+        <iframe class="live-video" src="//iframe.dacast.com/b/105417/c/465464" width="1920" height="1080" frameborder="0" scrolling="no" allow="autoplay" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen loading="lazy"></iframe>
      </div>
      <div class="live-chat-wrapper">
        <div id="chat" class="live-chat" data-pusher-key="<%= ApplicationConfig["PUSHER_KEY"] %>" data-chat-channels="<%= @chat_channels %>" data-chat-options="<%= { showChannelsList: false, showTimestamp: false, activeChannelId: @active_channel.id }.to_json %>">
--- a/spec/fixtures/approvals/parlertag/id/accepts_a_valid_parler_url.approved.html
+++ b/spec/fixtures/approvals/parlertag/id/accepts_a_valid_parler_url.approved.html
@ -0,0 +1,7 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <body>
+    <iframe width="710" height="120" src="https://api.parler.io/ss/player?url=https://www.parler.io/audio/73240183203/d53cff009eac2ab1bc9dd8821a638823c39cbcea.7dd28611-b7fc-4cf8-9977-b6e3aaf644a1.mp3" loading="lazy">
+</iframe>
+  </body>
+</html>
--- a/spec/liquid_tags/parler_tag_spec.rb
+++ b/spec/liquid_tags/parler_tag_spec.rb
@ -11,19 +11,9 @@ RSpec.describe ParlerTag, type: :liquid_template do
      Liquid::Template.parse("{% parler #{id} %}")
    end

-    def generate_iframe(_id)
-      <<~HTML
-        <iframe
-          width="710"
-          height="120"
-          src="https://api.parler.io/ss/player?url=#{valid_id}">
-        </iframe>
-      HTML
-    end
-
    it "accepts a valid Parler URL" do
      liquid = generate_new_liquid(valid_id)
-      expect(liquid.render).to eq(generate_iframe(valid_id))
+      verify(format: :html) { liquid.render }
    end

    it "raises an error for invalid IDs" do
--- a/spec/liquid_tags/spotify_tag_spec.rb
+++ b/spec/liquid_tags/spotify_tag_spec.rb
@ -22,7 +22,8 @@ RSpec.describe SpotifyTag, type: :liquid_template do
          frameborder="0"
          allowtransparency="true"
          allow="encrypted-media"
-          src="#{parsed_uri} ">
+          src="#{parsed_uri} "
+          loading="lazy">
        </iframe>
      HTML
    end
--- a/spec/support/fixtures/approvals/codepen_liquid_tag.approved.html
+++ b/spec/support/fixtures/approvals/codepen_liquid_tag.approved.html
@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <body>
-    <iframe height="600" src="https://codepen.io/twhite96/embed/XKqrJX?height=600&amp;default-tab=result&amp;embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" style="width: 100%;">
+    <iframe height="600" src="https://codepen.io/twhite96/embed/XKqrJX?height=600&amp;default-tab=result&amp;embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy" style="width: 100%;">
 </iframe>
  </body>
 </html>
--- a/spec/support/fixtures/approvals/instagram_liquid_tag.approved.html
+++ b/spec/support/fixtures/approvals/instagram_liquid_tag.approved.html
@ -2,7 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <div class="instagram-position">
-  <iframe id="instagram-liquid-tag" src="https://www.instagram.com/p/BXgGcAUjM39/embed/captioned" allowtransparency="true" frameborder="0" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no">
+  <iframe id="instagram-liquid-tag" src="https://www.instagram.com/p/BXgGcAUjM39/embed/captioned" allowtransparency="true" frameborder="0" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no" loading="lazy">
  </iframe>
  <script async="" defer="defer" src="https://platform.instagram.com/en_US/embeds.js"></script></div>
  </body>
--- a/spec/support/fixtures/approvals/jsfiddle_liquid_tag.approved.html
+++ b/spec/support/fixtures/approvals/jsfiddle_liquid_tag.approved.html
@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <body>
-    <iframe src="http://jsfiddle.net/link2twenty/v2kx9jcd/embedded//dark" width="100%" height="600" scrolling="no" frameborder="no" allowfullscreen="" allowtransparency="true">
+    <iframe src="http://jsfiddle.net/link2twenty/v2kx9jcd/embedded//dark" width="100%" height="600" scrolling="no" frameborder="no" allowfullscreen="" allowtransparency="true" loading="lazy">
 </iframe>
  </body>
 </html>
--- a/spec/support/fixtures/approvals/kotlin_liquid_tag.approved.html
+++ b/spec/support/fixtures/approvals/kotlin_liquid_tag.approved.html
@ -1,6 +1,6 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <body>
-    <iframe src="https://play.kotlinlang.org/embed?short=owreUFFUG&amp;from&amp;to&amp;theme=darcula&amp;readOnly" allowtransparency="true" scrolling="no" frameborder="0"></iframe>
+    <iframe src="https://play.kotlinlang.org/embed?short=owreUFFUG&amp;from&amp;to&amp;theme=darcula&amp;readOnly" allowtransparency="true" scrolling="no" frameborder="0" loading="lazy"></iframe>
  </body>
 </html>
--- a/spec/support/fixtures/approvals/soundcloud_liquid_tag.approved.html
+++ b/spec/support/fixtures/approvals/soundcloud_liquid_tag.approved.html
@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <body>
-    <iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https://soundcloud.com/user-261265215/dev-to-review-episode-2&amp;auto_play=false&amp;color=%23000000&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true">
+    <iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https://soundcloud.com/user-261265215/dev-to-review-episode-2&amp;auto_play=false&amp;color=%23000000&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true" loading="lazy">
 </iframe>
  </body>
 </html>
--- a/spec/support/fixtures/approvals/youtube_liquid_tag_no_time.approved.html
+++ b/spec/support/fixtures/approvals/youtube_liquid_tag_no_time.approved.html
@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <body>
-    <iframe width="710" height="399" src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen="">
+    <iframe width="710" height="399" src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen="" loading="lazy">
 </iframe>
  </body>
 </html>
--- a/spec/support/fixtures/approvals/youtube_liquid_tag_no_time_trailing_space.approved.html
+++ b/spec/support/fixtures/approvals/youtube_liquid_tag_no_time_trailing_space.approved.html
@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <body>
-    <iframe width="710" height="399" src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen="">
+    <iframe width="710" height="399" src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen="" loading="lazy">
 </iframe>
  </body>
 </html>
--- a/spec/support/fixtures/approvals/youtube_liquid_tag_with_time.approved.html
+++ b/spec/support/fixtures/approvals/youtube_liquid_tag_with_time.approved.html
@ -1,7 +1,7 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <body>
-    <iframe width="710" height="399" src="https://www.youtube.com/embed/QASbw8_0meM?start=29546" allowfullscreen="">
+    <iframe width="710" height="399" src="https://www.youtube.com/embed/QASbw8_0meM?start=29546" allowfullscreen="" loading="lazy">
 </iframe>
  </body>
 </html>