Noticeable negative impact of Revolution Slider on Google PageSpeed Score

[alex_2000]

Dear Okler Team,

Based on the standard test using Google PageSpeed Insights it appears that while using the Revolution Slider it causes a very significant drop of 15%-20% in the score ranking by Google PageSpeed Insights for mobile devices score.

The slider is used with just 1 image (small sized JPEG of 140K).

The significant penalty by Google PageSpeed for mobile, seems to be due to the delays of fully loaded and rendered page caused by the slider.

Is there a way to solve that?
That would be very helpful since currently is seems to be practically impossible (from the SEO scoring point of view) to use the Revolution Slider.

Maybe there are ways to optimize the behavior of the slider on mobile devices?

Is there maybe a way to load the slider on a deferred or no-blocking way?

Thank you in advance.

Best Regards,
Alexander

---

Template Version: 8.2

[Support]

Hello Alexander,

Unfortunately the Revolution Slider is being a problem for website performance since the Google Web Vitals in the performance tests. This is because the Rev Slider is very heavy in terms of Javascript Execution. At really, thinking on performance, we are changing Porto sliders for the next version of Porto that should be released soon and will fix this performance issue.

For now, my suggestion for you is take off the Revolution Slider and recreate a similar effect/structure without the Revolution Slider. For example, if you have just one slide rotating, you do not need the revolution slider, instead of it you can create a simple section with background image and the content inside it. If you have more than one slide rotating, you can try changing the revolution slider to Owl Carousel.

In the latest version of Porto (8.2.0) we already changed almost all Revolution Slider on demos to Owl Carousel Sliders. You can see an example here:
https://www.okler.net/previews/porto/8.2.0/index-classic.html

* In the page above we use Owl Carousel instead of Revolution Slider.

We hope this helps and clarify!

We are aware about new Google Web Vitals regarding performance and making changes in the core of Porto for the next version thinking on it!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[alex_2000]

Hello Rodrigo,

Thank you for the feedback.
I indeed have one slide/image and was using the slider due to convenience/better looks.

I have tried to use the section instead of the slider (as you proposed as well) but have encountered a few problems with it.
My goal is to have a section (or slider) that has one image as background and 3-4 text animations appearing on it.
The problems I have encountered using the “section” vs using a slider:

1. When the viewport is resized the section seems to be simply “zooming” the background image instead of attempting to “re-scale” the background image.
2. When the viewport is resized the text (set by animations) is not scaled at all. Meaning that the proportion between the text on a full hd screen and higher vs a smaller viewport is lost. For instance the h1 and h2 text is not scaled proportionally on a smaller viewport.

Bringing the above 2 issues together the revolution slider seems to be handling both points, significantly better (the image and the text animation are scaled appropriately).
Plus it seems that the “section” size (height) adjusts itself based on the elements/text content and not based on the size (height) of the background image.

Possibly the appropriate scaling of the background image and the text animations on it, can be achieved by using a “section”.
Could you maybe provide guidance / snippet on how to achieve that?

Thank you in advance!

Best Regards,
Alexander

---

[Support]

Hello Alexander,

You are right, the Revolution Slider has a good scale control for the background images. But with some custom code we can have the same effect. For example a section with the HTML below:

<section class="custom-section-style-1 section border-0 m-0" style="background-image: url(img/slides/slide-bg-performance.jpg); background-size: cover; background-position: center;">...........</section>

* Note I added a custom class custom-section-style-1.

By adding the custom CSS code below at (css/custom.css) you can have the same scale of rev slider on mobile devices:

/* The section height for tablet and desktop screens */
.custom-section-style-1 {
	height: 600px;
}

/* The section height for mobile devices */
@media(max-width: 767px) {
	.custom-section-style-1 {
		height: 40vw;
	}
}

* Note the height: 40vw;, that uses the vw unit.

Regarding the size of text inside it, the template comes with responsive text size classes so you can have different text size for each screen size. For example:

<p class="text-5 text-sm-6 text-md-7 text-lg-8 text-xl-9"></p>

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[alex_2000]

Hello Rodrigo,

Thank you for the code snippets.
I have tried them out and it seems to be working correctly for the screen widths:

• Viewport 1200+ px (full sized normal screens)
• Viewport reduced to width 1200px
• Viewport reduced to width 991px

But in cases of smaller screen width a very odd not expected behavior is observed:

• Viewport reduced to width 767px – the text seems to be scaled down correctly but the container with the text seems to be partially “shifted” down/over to the other completely different section below. So it “hangs over” both sections.
• Viewport reduced to width 575px – similar problem like with 767px above but even worse, since in addition to incorrect shifting of the text to the other section, the text is not scaled / scaling is lost.

In order to fully and clearly demonstrate what happens I have made screenshots, see below:

Here is the code snippet of the section with the image and text effects, plus the section below that is visible in the screenshots (for completeness):

<div role="main" class="main">
	<section class="custom-section-style-1 section border-0 mt-0 mb-0 pb-0" style="background-image: url(img/femina/Homepage-Main-Image-2-Wide-Zoomed-x125-up.png); background-size: cover; background-position: center;">
		<div class="container pt-5 mt-5">
			<div class="row align-items-center justify-content-center pt-5 mt-5">
				<div class="col-lg-12">
					<h2 class="text-center text-color-light-custom-1 text-sm-3 text-md-6 text-lg-7 text-xl-7 alternative-font-2 mb-1 appear-animation" data-appear-animation="fadeInDown" data-appear-animation-duration="950"><em>- Individually -</em></h2>
					<h1 class="text-center text-color-light-custom-2 font-weight-bold text-sm-5 text-md-8 text-lg-9 text-xl-10 line-height-2 mb-3 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="800" data-appear-animation-duration="950">Tailored Assistance</h1>
					<h2 class="text-center text-color-light-custom-1 text-sm-3 text-md-6 text-lg-7 text-xl-7 alternative-font-2 mb-1 appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="1700" data-appear-animation-duration="950"><em>suiting your needs</em></h2>
				</div>
			</div>
		</div>
	</section>
	<section class="section section-tertiary mt-0">
		<div class="container">
			<div class="row">
				<div class="col">
					<h4 class="mb-3">Tertiary Section</h4>
					<p class="mb-0">Lorem ipsum dolor... <br>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit massa enim. Nullam id varius nunc.Lorem ipsum dolor sit amet, consectetur adipiscing elit massa enim. Nullam id varius nunc.Lorem ipsum dolor sit amet, consectetur adipiscing elit massa enim. Nullam id varius nunc.
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit massa enim. Nullam id varius nunc. Vivamus bibendum magna ex, et faucibus lacus venenatis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit massa enim. Nullam id varius nunc. Vivamus bibendum magna ex, et faucibus lacus venenatis eget.
						Lorem ipsum dolor sit amet, consectetur adipiscing elit massa enim. Nullam id varius nunc.Lorem ipsum dolor sit amet, consectetur adipiscing elit massa enim. Nullam id varius nunc.</p>
				</div>
			</div>
		</div>
	</section>

Thank you in advance!

Best Regards,
Alexander

---

[Support]

Hello Alexander,

Please try changing the HTML of section to:

<section class="custom-section-style-1 section border-0 mt-0 mb-0 pb-0 py-0" style="background-image: url(img/femina/Homepage-Main-Image-2-Wide-Zoomed-x125-up.png); background-size: cover; background-position: center;">
	<div class="container h-100">
		<div class="row align-items-center justify-content-center h-100">
			<div class="col-lg-12">
				<h2 class="text-center text-color-light-custom-1 text-sm-3 text-md-6 text-lg-7 text-xl-7 alternative-font-2 mb-1 appear-animation" data-appear-animation="fadeInDown" data-appear-animation-duration="950"><em>- Individually -</em></h2>
				<h1 class="text-center text-color-light-custom-2 font-weight-bold text-sm-5 text-md-8 text-lg-9 text-xl-10 line-height-2 mb-3 appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="800" data-appear-animation-duration="950">Tailored Assistance</h1>
				<h2 class="text-center text-color-light-custom-1 text-sm-3 text-md-6 text-lg-7 text-xl-7 alternative-font-2 mb-1 appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="1700" data-appear-animation-duration="950"><em>suiting your needs</em></h2>
			</div>
		</div>
	</div>
</section>

* Note I removed some spacement classes and added h-100 to always center the content.

Also should be a good idea add this new custom CSS for small screens:

@media(max-width: 575px) {
	.custom-section-style-1 {
		height: 100vw;
	}
}

* Note you can change these custom CSS height values to fit with your background.

We hope this helps!

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[alex_2000]

Hello Rodrigo,

Thank you for the provided snippet, the changes do solve some of the text problems.

Currently after applying your changes the following issue with the text appears:

• When the viewport is scaled to the range 765px – 576px the background images is scaled nicely but it “drifts apart” vertically. Seems that the text is scaled but the line spacing size is not scaled. It gets really bad at 591px – 576px, screenshot is below.

An additional problem that came to my attention is that – when the viewport width is set to 767px and lower the text animation effects stop working completely (none of the 3 effects in our code snippet above are working). This problem exists without the code changes as well, I guess I was so focused on the wrong scaling that I did not notice the text appearing not working. How could I fix that?

Thank you in advance and have a nice weekend!

Best Regards,
Alexander

---

[Support]

Hello Alexander,

You can control the line-height of texts in a responsive way like the text class for size. For example:

<p class="line-height-1 line-height-sm-2 line-height-md-3">Lorem ipsum dolor sit a met.</p>

This way should reduce the space between the texts vertically.

Regarding the animations issue, sorry but we couldn’t reproduce here. Can you please send a online test link with your website, so we can inspect the code and see what’s happening.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[alex_2000]

Hello Rodrigo,

Thank you again for the provided snippet, it did allow to correct the lines spacing upon responsive reaction to viewport resizing.

Regarding the issue with the animations not working if the width of the window is resized down to 767px and lower – it is not specific to our development.
If you resize the browser window (Chrome / Firefox) to 766px or less and then visit the animations page of the official Porto Template you will see that all of the animations effects are not working.
Just tested it with the official Porto demo page below and the same problem is present:
https://portotheme.com/html/porto/8.2.0/elements-animations.html

Thank you in advance and have a nice Sunday.

Best Regards,
Alexander

---

[Support]

Hello Alexander,

You can change that in the settings, for example, add this:

(js/custom.js)

$.extend(theme.PluginAnimate.defaults, {
	minWindowWidth: 0
});

Please try that and let me know if you need further assistance.

Kind Regards,

Jonas

---

[Author]

Posts