Diary and other user provided content frequently includes rather large external
images, which slows down page loading. We could force lazy loading of these
assets by adding a loading="lazy" attribute to img tags, as described here:
https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
The change is rather small, but I'm not sure if this doesn't cause unwanted
side effects. Does anyone have any opinions on this topic?
```ruby
diff --git a/config/initializers/sanitize.rb b/config/initializers/sanitize.rb
index c9d6a5dbac..f8f2b784d9 100644
--- a/config/initializers/sanitize.rb
+++ b/config/initializers/sanitize.rb
@@ -2,6 +2,10 @@ Sanitize::Config::OSM = Sanitize::Config.merge(
Sanitize::Config::RELAXED,
:elements => Sanitize::Config::RELAXED[:elements] - %w[div style],
:remove_contents => %w[script style],
+ :attributes => Sanitize::Config.merge(
+ Sanitize::Config::RELAXED[:attributes],
+ "img" => Sanitize::Config::RELAXED[:attributes]["img"] + ["loading"]
+ ),
:transformers => lambda do |env|
style = env[:node]["style"] || ""
@@ -24,5 +28,7 @@ Sanitize::Config::OSM = Sanitize::Config.merge(
env[:node]["rel"] = rel.split.select { |r| r == "me"
}.append("nofollow", "noopener", "noreferrer").sort.join(" ")
end
+
+ env[:node]["loading"] = "lazy" if env[:node_name] == "img"
end
)
```
--
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/5601
You are receiving this because you are subscribed to this thread.
Message ID: <openstreetmap/openstreetmap-website/issues/5...@github.com>_______________________________________________
rails-dev mailing list
rails-dev@openstreetmap.org
https://lists.openstreetmap.org/listinfo/rails-dev
