Just a quick one I wanted to get out there in case you are, like me, using [Hugo](/post/2020/05/hugo-extended/) to power a blog. Apparently, in 2017, the default [behavior changed](https://discourse.gohugo.io/t/full-text-rss-feed/8368/3) from using the `.Content` to the `.Summary` variable in the default [rss.xml](https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/_default/rss.xml).
**Update, 12 March 2021**: This article officially became obsolete! Just use `loading="lazy"` - a lot less complicated and already decent browser support. Yay for upgrades!
What's the big deal? I had no idea, until I started using a proper RSS reader today - the open source [NetNewsWire](https://ranchero.com/netnewswire/) for Mac. This is what your RSS feed will look like:
The above screenshot might mislead you into thinking I simply captured only a part - I did not. That's the `.Summary`, right there. Since reading all "the news" in one place sounds intriguing, and I'd like other visitors to enjoy my _full_ blog posts in these tools too, I'd have to change the default behavior. That can be easily done by copy-pasting the default into `layouts/_default/rss.xml` and altering it to your liking - such as swapping `.Summary` for `.Content`.
However, that brings us to to problem number two.
## Lazy loading and RSS Feeds
Recently, after trying to maximize my [Lighthouse](https://developers.google.com/web/tools/lighthouse/) score, especially on performance levels, I implemented [lazysizes](https://github.com/aFarkas/lazysizes), a simple solution to lazy load `<img/>` tags, thereby reducing the critical path for a single page to load. That requires a custom `render-image.html` (only available when using the Goldmark Markdown renderer) in `_default/_markup/` that looks like this:
Do not forget the `<noscript/>` tag in case JavaScript is disabled or the visitor will not see any images![^tip] Same goes for the RSS feed: your `index.xml` that NetNewsWire loads will see an image tag, but not a `src` attribute. To fix that, I replaced the content, like so:
[^tip]: Try it your for yourself by disabling JS in your browser. Your blog should be accessible to anyone - no CSS, no JS, [accessibility options](/post/2020/06/designing-with-accessibility-in-mind/) - try to include everyone.
I know the documentation mentions `render-image.rss.xml` as a separate RSS renderer, but it [as reported](https://discourse.gohugo.io/t/how-does-render-image-rss-xml-work/29935) before, it currently does not work (v0.79.1).
**Update, 9 Jan. 2021**: It seems that the RSS reader [Feedly](https://feedly.com/) processes `<noscript/>` tags, resulting in two displayed images instead of one. Another `replaceRE` to replace the tag fixes that, although it's starting to get messy...
I still wasn't satisfied. Some blog posts use a "big image" (or "featured image" masthead), that is part of the article header, and is currently not shown in the RSS reader. After inspecting the RSS specifications, it seems that a `<img/>` tag in the description is the only way to do it (provided a `CDATA` wrapper is present), as opposed to twitter cards that have a dedicated tag for this. So, the above description tag was extended, and now looks like this:
Scrolling down also reveals properly loaded images, hooray! Do not forget to add feed metadata to the `<header/>` tag so that NetNewsWire can automatically detect the location of your RSS feed:
