Untitled

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>BLUR TEST</title>
    <style type="text/css">
        html, body {
            overflow: hidden;
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            background-color: #000;
        }
        #blur {
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('https://media.tenor.co/images/a9e88640de8aa6c08a44d45a2e758961/raw');
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center;

            /* PERFORMANCE ISSUE HERE: */
            -webkit-filter: blur(100px);
            -moz-filter: blur(100px);
            -o-filter: blur(100px);
            -ms-filter: blur(100px);
            filter: blur(100px);

            }

        #noblur {
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 50%;
            background-image: url('https://media.tenor.co/images/a9e88640de8aa6c08a44d45a2e758961/raw');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>

    <div id="blur"></div>
    <div id="noblur"></div>

</body>
</html>