画面内に移っている要素のみにCSSのfilterをかけたい

前提・実現したいこと

要素が多いLPでモーダルウインドウを表示した際、モーダルウインドウ以外の要素にcssでブラーをかけています。
すると、動作がとてももっさりするため、画面内に表示されている要素のみにfilterをかけたいと思っています。
一応、cssのwill-changeも試しましたが、体感では何も変わりませんでした。

発生している問題・エラーメッセージ

モーダルウインドウを開くと、諸々の動作が遅くなります。

該当のソースコード

html
1<header>
2...
3</header>
4<main>
5...
6</main>
7<footer>
8... 
9</footer>
10<button id="openModal">モーダルを開く</button>
11<aside>
12...
13  <button id="closeModal">モーダルを閉じる</button>
14</aside>

css
1header,
2main,
3footer {
4  transition: filter 0.4s;
5  will-change: filter;
6}
7
8header.opened,
9main.opened,
10footer.opened {
11  filter: blur(5px);
12}
13

js
1$(function () {
2  $("#openModal").click(function () {
3    $("header, main, footer").addClass("opened");
4    $("aside").fadeIn();
5  });
6
7  $("#closeModal").click(function () {
8    $("aside").fadeOut();
9    $("header, main, footer").removeClass("opened");
10  });
11});
12

疑問点

現状はheader、main、footerと個別にfilterをかけていますが、モーダル以外をwrapしてwrapにfilterをかけたほうが軽くなるでしょうか。
phpが絡みまくっていてwrapすると挙動に何かしら不具合が生じそうで怖いため、現状はwrapしていませんが、wrapすることで劇的に軽くなるようであればwrapも試みます。