I am using the bxslider jQuery plugin as a welcome banner with a overlay (see image below for illustration.)This is however causing render block and cannot figure out how I can improve my code to eliminate the bxslider from being a render block.My code is as follows:(Html) <header class=text-center name=home>  <div class=intro-text>    <ul class=bxslider>  <li style=background-image: url('<?php get_theme_url(); ?>/img/Image1.jpg');>        <div class=slide-overlay>            <div class=v-align>            <h1 class=wow zoomIn>Header</h1>    <p class=wow fadeInDown data-wow-delay=600ms>LOREM IPSUM...</p>            <a href=#about-section class=btn btn-default btn-lg page-scroll wow fadeInDown data-wow-delay=1000ms>Find Out More</a>             </div>        </div>  </li>  <li style=background-image: url('<?php get_theme_url(); ?>/img/Image2.jpg');></li>  <li style=background-image: url('<?php get_theme_url(); ?>/img/img3.jpg');></li></ul>    </div></header>(CSS).bxslider .img-bg{width:100%;z-index:0;}.bxslider .slide-overlay{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;z-index:1;background:rgba(35, 46, 58, .4);color:#fff;}.v-align{overflow:auto;position:relative;top:50%;transform:perspective(1px) translateY(-50%);}.bxslider, .bxslider li{height:100% !important;}.bxslider li{background-color:rgb(29, 27, 27);background-repeat:no-repeat;background-position:center center;background-size:cover;}(js)$(document).ready(function() {        $('.bxslider').bxSlider({            auto: true,            autoHover: true,            speed: 800,            pager: false        });});
Eliminate render block on my bxslider
javascript;performance;jquery;memory optimization