theme-check 0.9.1 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a114e025e51ad2a09395b4ae0dca33e9417942a76ed781fdd639e7d7d1b35928
-  data.tar.gz: ff3c7f9b43f5ccae262cd22c8547d308a71e214cdd7f924208c25122624a48dc
+  metadata.gz: 2b606fffc2525680e6d47cf1d45b3fbdd514c79cf426dfd28baaec20e1cc083f
+  data.tar.gz: f0b9e3b0da8f41ae48e11d91ff1ccd780e0ed6cc5b8ba80694c3cd70a33e04a0
 SHA512:
-  metadata.gz: 3e4ead0f1d63cc68dfbaff6dd5462f08b9008c04dd87fae9499875cf967e501c68327adec0ac3c1f253bbdbf1343d14ddeb63fe58b4c9f4cb24f494315898d70
-  data.tar.gz: 62baa63bcf203d2bd0a7894787011f23d363cb6192920ac67c2ce0dfbe89f382c461a3d5a989c23234e5e1a9db7bfd9d10c4801bca121c1993a082b58887705d
+  metadata.gz: 23ce6e8b332e57cf523db93cf14ca9c948e569703633d5b82f106e95e66dd613ab30fa448226cf4f624b24da2675179220e7fc9fe206bfa9521f722c74356ba2
+  data.tar.gz: 22e2469eba1fc8aca4e881cfc5d0ad5ea7c16a057cdba6327310906099497b72d18dbef2d4f69d328528d6801f0abb91fac78a692f68387f7378d2c8fd3986dd

data/CHANGELOG.md

@@ -1,4 +1,9 @@
 
+v0.10.0 / 2021-06-08
+==================
+
+  * Add ImgLazyLoading check for recommending loading="lazy" attribute
+
 v0.9.1 / 2021-06-04
 ==================
 

data/config/default.yml

@@ -137,3 +137,7 @@ AssetUrlFilters:
 ContentForHeaderModification:
   enabled: true
   ignore: []
+
+ImgLazyLoading:
+  enabled: true
+  ignore: []

data/docs/checks/img_lazy_loading.md

@@ -0,0 +1,61 @@
+# Lazy loading image tags (`ImgLazyLoading`)
+
+Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times.
+
+Lazy loading can occur on different moments in the application, but it typically happens on some user interactions such as scrolling and navigation.
+
+Very often, webpages contain many images that contribute to data-usage and how fast a page can load. Most of those images are off-screen (non-critical), requiring user interaction (an example being scroll) in order to view them.
+
+_Quoted from [MDN - Lazy loading][mdn]_
+
+## Check Details
+
+This check is aimed at defering loading non-critical images.
+
+:-1: Examples of **incorrect** code for this check:
+
+```liquid
+<img src="a.jpg">
+
+<!-- Replaces lazysize.js -->
+<img src="a.jpg" class="lazyload">
+
+<!-- `auto` is deprecated -->
+<img src="a.jpg" loading="auto">
+```
+
+:+1: Examples of **correct** code for this check:
+
+```liquid
+<img src="a.jpg" loading="lazy">
+
+<!-- `eager` is also accepted, but prefer `lazy` -->
+<img src="a.jpg" loading="eager">
+```
+
+## Check Options
+
+The default configuration for this check is the following:
+
+```yaml
+ImgLazyLoading:
+  enabled: true
+```
+
+## When Not To Use It
+
+If you don't want to defer loading of images, then it's safe to disable this rule.
+
+## Version
+
+This check has been introduced in Theme Check 0.10.0.
+
+## Resources
+
+- [Rule Source][codesource]
+- [Documentation Source][docsource]
+- [MDN - Lazy loading][mdn]
+
+[codesource]: /lib/theme_check/checks/img_lazy_loading.rb
+[docsource]: /docs/checks/img_lazy_loading.md
+[mdn]: https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

data/lib/theme_check/checks/img_lazy_loading.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+module ThemeCheck
+  class ImgLazyLoading < HtmlCheck
+    severity :suggestion
+    categories :html, :performance
+    doc docs_url(__FILE__)
+
+    ACCEPTED_LOADING_VALUES = %w[lazy eager]
+
+    def on_img(node)
+      loading = node.attributes["loading"]&.value&.downcase
+      return if ACCEPTED_LOADING_VALUES.include?(loading)
+
+      class_list = node.attributes["class"]&.value&.split(" ")
+
+      if class_list&.include?("lazyload")
+        add_offense("Use the native loading=\"lazy\" attribute instead of lazysizes", node: node)
+      elsif loading == "auto"
+        add_offense("Prefer loading=\"lazy\" to defer loading of images", node: node)
+      else
+        add_offense("Add a loading=\"lazy\" attribute to defer loading of images", node: node)
+      end
+    end
+  end
+end

data/lib/theme_check/version.rb

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 module ThemeCheck
-  VERSION = "0.9.1"
+  VERSION = "0.10.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: theme-check
 version: !ruby/object:Gem::Version
-  version: 0.9.1
+  version: 0.10.0
 platform: ruby
 authors:
 - Marc-André Cournoyer
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2021-06-04 00:00:00.000000000 Z
+date: 2021-06-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: liquid
@@ -77,6 +77,7 @@ files:
 - docs/checks/convert_include_to_render.md
 - docs/checks/default_locale.md
 - docs/checks/deprecated_filter.md
+- docs/checks/img_lazy_loading.md
 - docs/checks/img_width_and_height.md
 - docs/checks/liquid_tag.md
 - docs/checks/matching_schema_translations.md
@@ -117,6 +118,7 @@ files:
 - lib/theme_check/checks/convert_include_to_render.rb
 - lib/theme_check/checks/default_locale.rb
 - lib/theme_check/checks/deprecated_filter.rb
+- lib/theme_check/checks/img_lazy_loading.rb
 - lib/theme_check/checks/img_width_and_height.rb
 - lib/theme_check/checks/liquid_tag.rb
 - lib/theme_check/checks/matching_schema_translations.rb