Videos, frames and content parts settingsAccelerator for WordPress

Without optimizations, video and other frames are loaded immediately with the page that decreases the page’s load speed.

settings-Frames

Lazy load#

  • Enable

    Enables this mode for iframe elements.

    • Own algorithm

      Don’t use native loading="lazy" attribute.

      • Show adapted placeholder for YouTube videos

      It will place a special light content with video preview and Play button in YouTube style.

      • Show adapted placeholder for Vimeo videos

      It will place a special light content with video preview and Play button in Vimeo style.

Corrections for lazy loading scripts#

Here are the corrections for content parts can be enabled. Some content parts don’t look the same as after loading non-critical scripts. So, it allows to try fix them at first loading stage. The similar approach is also available for styles.

  • Background videos of Elementor

    Adjusting elements matching .//*[contains(concat(" ",normalize-space(@class)," ")," elementor-element ")][@data-settings] .//*[contains(@class,"elementor-background-video-container")][1] XPath selector.

  • Videos of Feeds for YouTube plugin

    Adjusting elements matching a.sby_video_thumbnail CSS selector.

  • Slider of Airtech Plumber theme

    Adjusting elements matching [data-bdt-slideshow] CSS selector.

  • Switcher of Airtech Plumber theme

    Adjusting elements matching .bdt-switcher-item-content-inner:first-child CSS selector.

  • Animations of Elementor

    Adjusting elements matching .elementor-element[data-settings*="\"animation\":"] CSS selector.

    Note. There are related styles correction settings.

  • Split animation of Elementor

    Adjusting elements matching .elementor-element[data-settings*="\"ui_animate_split\":"] CSS selector.

  • Animation of TRX Addons for Elementor

    Adjusting elements matching .elementor-element[class*=elementor-widget-trx_][data-settings*="\"animation\":"] CSS selector.

  • Slideshow with backgrounds of Elementor

    Adjusting elements matching section.elementor-section[data-settings] CSS selector that have background_slideshow_gallery property.

  • Videos of Elementor

    Adjusting elements matching div.elementor-widget-video[data-settings] CSS selector.

  • Tabs of Elementor

    Adjusting elements matching .elementor-tabs CSS selector.

  • Accordion of Elementor

    Adjusting elements matching .elementor-accordion[role="tablist"] CSS selector.

  • Advanced Tabs of Elementor

    Adjusting elements matching .eael-advance-tabs CSS selector.

  • Navigation Menu of Elementor

    Adjusting elements matching .elementor-widget-nav-menu[data-settings] CSS selector.

  • Premium Navigation Menu of Elementor

    Adjusting elements matching .elementor-widget-premium-nav-menu[data-settings] CSS selector.

  • Sticky elements of Elementor

    Adjusting elements matching .elementor-top-section[data-settings*="sticky"] CSS selector.

  • Gallery Widget of Elementor

    Adjusting elements matching .elementor-widget-gallery[data-settings] CSS selector.

  • Image Carousel Widget of Elementor

    Adjusting elements matching .elementor-widget-image-carousel[data-settings] CSS selector.

  • AVO Showcase Widget of Elementor

    Adjusting elements matching .elementor-widget-avo-showcase CSS selector.

  • Appearing animation of Qi Addons for Elementor

    Adjusting elements matching .qodef-qi--has-appear CSS selector.

  • Lazy items of Porto theme

    Adjusting elements matching .skeleton-loading and .skeleton-body CSS selectors.

  • Responsive of Astra theme

    Adjusting elements matching body script#astra-theme-js-js-extra CSS selector.

  • Backgrounds of FlatSome theme

    Adjusting elements matching body.flatsome .bg.fill.bg-fill CSS selector.

  • Animation of FlatSome theme

    Adjusting elements matching .//body[contains(concat(normalize-space(@class)," "),"flatsome ")]//*[@data-animate] XPath selector.

  • Slideshow of UIkit

    Adjusting elements matching .uk-slideshow-items CSS selector.
    Note. If height of slider is wrong it is needed to add some CSS corrections in the related settings (see value of height propertiy at .uk-slideshow-items element).

  • Background image of UIkit

    Adjusting elements matching [uk-img][data-src] CSS selector.

  • Animation of UIkit

    Adjusting elements matching [uk-scrollspy-class] CSS selector.

  • Grid of UIkit

    Adjusting elements matching [uk-grid] CSS selector.

  • Modal of UIkit

    Adjusting elements matching [uk-modal] CSS selector.

  • Height Viewport of UIkit

    Adjusting elements matching [uk-height-viewport] CSS selector.

  • Navigation Bar of UIkit

    Adjusting elements matching .uk-navbar CSS selector.

  • Header of Yoo theme

    Adjusting elements matching .tm-page .tm-header-mobile, .tm-page .tm-header CSS selector.

    Note. There are related styles correction settings.

  • Background video of Avada theme

    Adjusting elements matching .fusion-background-video-wrapper > iframe CSS selector.

  • Equal Height Columns of Avada theme

    Adjusting elements matching .fusion-fullwidth.fusion-equal-height-columns CSS selector.

  • Animation of Avada theme

    Adjusting elements matching .fusion-animated[data-animationtype] CSS selector.

  • Animation of Thrive theme

    Adjusting elements matching .tve_ea_thrive_animation CSS selector.

  • Responsive of Phlox theme

    Adjusting elements matching body.theme-phlox [data-switch-width] CSS selector.

  • Animation of Phlox theme

    Adjusting elements matching .aux-appear-watch-animation CSS selector.

  • Smart Slider

    Adjusting elements matching [@data-slide-public-id="1"] .n2-ss-layer[class*=' n-uc-'] CSS selector.
    Note. There are related styles correction settings.

  • Thumbnail of tagDiv

    Adjusting elements matching .td-thumb-css[data-type="css_image"] CSS selector.

  • Image Comparison Widget of ElementsKit

    Adjusting elements matching .elementskit-image-comparison CSS selector.

  • Carousel of Happy Elementor Addons

    Adjusting elements matching .ha-carousel[data-settings] CSS selector.

  • Photonic Photo Gallery

    Adjusting elements matching a.photonic-lb CSS selector.

    Note. There are related styles correction settings.

  • Mobile Menu from Jet

    Adjusting elements matching .jet-mobile-menu[data-menu-options] CSS selector.

  • Multi View from Divi

    Adjusting elements matching [data-et-multi-view] CSS selector.

  • Image’s Multi View from Divi (legacy)

    Adjusting elements matching .et_pb_module.et_pb_image > [data-et-multi-view] CSS selector.

  • Text’s Multi View from Divi (legacy)

    Adjusting elements matching .et_pb_module.et_pb_text > [data-et-multi-view] CSS selector.

  • Slider’s Multi View from Divi (legacy)

    Adjusting elements matching .et_pb_module.et_pb_slider > [data-et-multi-view] CSS selector.

  • Slider from Divi

    Adjusting elements matching .et_pb_module.et_pb_slider CSS selector.

  • Full Width Header’s Multi View from Divi

    Adjusting elements matching .et_pb_module.et_pb_fullwidth_header CSS selector.

  • Video-box from Divi

    Adjusting elements matching .et_pb_video_box > iframe CSS selector.

  • Video-background from Divi

    Adjusting elements matching .et_pb_section_video_bg > video CSS selector.

  • Video-frame from Divi

    Adjusting elements matching .et_pb_module :not(.et_pb_video_box) iframe CSS selector.

  • Gallery from Divi

    Adjusting elements matching .dsm-gallery CSS selector.

  • Lazy styles loading from Divi

    Adjusting elements matching body script:contains("/et-divi-dynamic-") CSS selector.

  • Animation of Bricks

    Adjusting elements matching body[class*=bricks] [data-interactions*=animationType] CSS selector.

  • Cinematic scroll image animation from Scrollsequence

    Adjusting elements matching scrollsequence section.scrollsequence-wrap .scrollsequence-page CSS selector.

  • Images source set from MK

    Adjusting elements matching [data-mk-image-src-set] CSS selector.

  • Price Filter from Woodmart

    Adjusting elements matching .woocommerce.widget_price_filter CSS selector.

  • Product Filter by WBW

    Adjusting elements matching .wpfMainWrapper CSS selector.

  • WPStories

    Adjusting elements matching .js-wpstories-serialized CSS selector.

  • Tag Groups from TaxoPress

    Adjusting elements matching .tag-groups-cloud[id^="tag-groups-cloud-tabs-"] CSS selector.

  • Simple Menu of Essential Addons

    Adjusting elements matching .elementor-widget-eael-simple-menu CSS selector.

  • Animated text of Royal Addons for Elementor

    Adjusting elements matching .wpr-anim-text CSS selector.

  • Tabs of Shortcodes Ultimate

    Adjusting elements matching .su-tabs CSS selector.

  • Animation of Ultimate for WPBakery

    Adjusting elements matching .wpb_animate_when_almost_visible CSS selector.

  • Background of Ultimate for WPBakery

    Adjusting elements matching upb_bg_img CSS selector.

    Note. There are related styles correction settings.

  • Responsive of Ultimate

    Adjusting elements matching .ult-responsive,.ult-spacer CSS selector.

  • Heading of Ultimate

    Adjusting elements matching .uvc-heading CSS selector.

  • Animation of The7 theme

    Adjusting elements matching body.the7-ver- . animate-element CSS selector.

  • Mobile header of The7 theme

    Adjusting elements matching body.the7-ver-:not(.responsive-off) .masthead CSS selector.

  • Background image of Merimag theme

    Adjusting elements matching .merimag-lazy-image CSS selector.

  • Loading elements of MyDecor theme

    Adjusting elements matching body.theme-mydecor :is(.images, .ts-product .content-wrapper, .ts-logo-slider-wrapper, .related-posts, .woocommerce .product figure, .blogs article a.gallery, .ts-blogs-wrapper, .ts-testimonial-wrapper .items, .ts-twitter-slider .items, .ts-portfolio-wrapper, .ts-product-category-wrapper .content-wrapper, .thumbnails-container, .column-products, .ts-team-members *, .ts-instagram-wrapper, .elementor-section).loading CSS selector.

  • Lazy styles loading from themes by PremiumPress

    Adjusting elements matching body script#premiumpress-js ~ noscript#deferred-styles CSS selector.

  • Image of Minimog theme

    Adjusting elements matching .minimog-lazy-image img CSS selector.

  • Background image of Tilda

    Adjusting elements matching .t-bgimg[data-original] CSS selector.

  • Background video of Vide for jQuery

    Adjusting elements matching [data-vide-bg] CSS selector.

  • Sales Countdown Timer from Sctr

    Adjusting elements matching .woo-sctr-countdown-timer-wrap CSS selector.

  • Hurry Scarcity and Urgency Countdown Timer

    Adjusting elements matching .hurrytimer-campaign CSS selector.

  • Tabs of Royal Addons for Elementor

    Adjusting elements matching .wpr-tabs CSS selector.

  • Tabs of WooCommerce

    Adjusting elements matching .woocommerce-tabs.wc-tabs-wrapper CSS selector.

  • Once animation of Page Builder Blocks of GreenShift

    Adjusting elements matching [data-aos-once] CSS selector.

  • Animation of Page Builder Blocks of GreenShift

    Adjusting elements matching [data-aos] CSS selector. Maybe will be required to add content replacement @<body[^>]+()>@ with like data-aos-easing="ease" data-aos-duration="1200" data-aos-delay="0".

Exclusions#

Element tags that are matching the specified XPath selectors will not be processed. It can be added multiple selectors at once by placing each on new line.

Note: For tags iframe prefix ajs can be used to force load original sources before loading main scripts. E.g. ajs:.//iframe[contains(@src,'google.com/maps/embed')].

Leave a Reply