[bisq-network/bisq-website] Add Lazy Loading to images and iframes (#331)

[Riccardo Masutti]

### Why native lazy-loading?

According to HTTPArchive, **images are the most requested asset type for most websites and usually take up more bandwidth than any other resource**. At the 90th percentile, sites send about 4.7 MB of images on desktop and mobile. That's a lot of cat pictures.

Embedded iframes also use a lot of data and can harm page performance. Only loading non-critical, below-the-fold images and iframes when the user is likely to see them **improves page load times, minimizes user bandwidth, and reduces memory usage**.

### SEO Benefits
Google has indicated site speed (and as a result, page speed) is one of the signals used by its algorithm to rank pages. And research has shown that Google might be specifically measuring time to first byte as when it considers page speed. In addition, a slow page speed means that search engines can crawl fewer pages using their allocated crawl budget, and this could negatively affect your indexation.

**Page speed is also important to user experience. Pages with a longer load time tend to have higher bounce rates and lower average time on page. Longer load times have also been shown to negatively affect conversions.**

Currently, there are two ways to defer the loading of off-screen images and iframes:

- Using the Intersection Observer API
- Using scroll, resize, or orientationchange event handlers

Either option can let developers include lazy-loading functionality, and many developers have built third-party libraries to provide abstractions that are even easier to use. With lazy-loading supported directly by the browser, however, there's no need for an external library. Native lazy loading also ensures that deferred loading of images and iframes still works even if JavaScript is disabled on the client.

Starting with Chrome 76, we are able to use the new `loading` attribute to lazy-load resources without the need to write custom lazy-loading code or use a separate JavaScript library.

Demo:
![ezgif-7-61e4604beabd](https://user-images.githubusercontent.com/46527252/72471613-4a303a80-37e3-11ea-9d0d-a8f143857e6b.gif)


Source: https://web.dev/native-lazy-loading/
You can view, comment on, or merge this pull request online at:

  https://github.com/bisq-network/bisq-website/pull/331

-- Commit Summary --

  * Add lazy loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading
  * Add Lazy Loading

-- File Changes --

    M _includes/footer.html (20)
    M _includes/footer_tr.html (20)
    M _includes/homepage_content.html (78)
    M _includes/homepage_content_tr.html (78)
    M _includes/main_nav.html (2)
    M _includes/main_nav_tr.html (2)
    M _includes/os_selector_options.html (36)
    M _includes/os_selector_options_tr.html (36)
    M _layouts/post-report.html (4)
    M _layouts/post.html (2)
    M _posts/2014-08-21-bitsquare-arbitration-system.md (2)
    M _posts/2014-08-21-bitsquare-protection-mechanisms.md (2)
    M _posts/2014-12-02-concept-overview.md (2)
    M _posts/2019-03-22-how-to-set-up-bitcoin-regtest.md (18)
    M blog/index.html (2)
    M de/community.md (16)
    M de/dao.html (2)
    M de/downloads.html (4)
    M downloads.html (4)
    M es/community.md (16)
    M es/dao.html (2)
    M es/downloads.html (4)
    M fr/community.md (16)
    M fr/dao.html (2)
    M fr/downloads.html (4)
    M ja/community.md (16)
    M ja/dao.html (2)
    M ja/downloads.html (4)
    M pt-BR/community.md (18)
    M pt-BR/dao.html (2)
    M pt-BR/downloads.html (4)
    M pt-PT/community.md (16)
    M pt-PT/dao.html (2)
    M pt-PT/downloads.html (4)
    M zh-CN/community.md (16)
    M zh-CN/dao.html (2)
    M zh-CN/downloads.html (4)

-- Patch Links --

https://github.com/bisq-network/bisq-website/pull/331.patch
https://github.com/bisq-network/bisq-website/pull/331.diff

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/bisq-network/bisq-website/pull/331
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.bisq.network/pipermail/bisq-github/attachments/20200115/ef3cbc61/attachment-0001.html>