Does Adding Extra Elements in a Page Affect Page Speed?
A website will look good if you add elements such as sliders, third-party scripts, videos, and more. When such types of elements are incorporated thoughtfully, they will improve how your content looks and help to better explain your company.
But, will they affect the speed of your website? Page speed is a critical element for your website’s success. Apart from being an important ranking factor, it is also a major usability metric.
We did a short analysis to find out if adding extra elements on a webpage actually affects page speed.
To check the factors affecting speed, we installed WordPress in our demo server and checked the speed of the website using the Hello Elementor theme. Additionally, we checked the speed of “Hello” theme with the free Elementor builder and Elementor Pro, with some simple text sections, images, sliders, and Google Maps.
To test the page load time, we used Pingdom, PageSpeed Insights, GTmetrix, and WebPageTest.
| Elements | WebPageTest | PageSpeed Insights | GTmetrix | Pingdom |
|---|---|---|---|---|
| WordPress default Twenty-twenty theme |
1.9s | Page Speed Score – 98 YSlow Score – 94 Fully Loaded Time – 2.1s Total Page Size – 270KB Requests – 9 |
Mobile Optimization – 95 Desktop Optimization – 95 |
Performance Grade – 96 Load Time – 1.2s Page Size – 58.3KB Requests – 8 |
| Hello Elementor theme – After adding one Text element from Elementor | 1.9s | Page Speed Score – 99 YSlow Score – 90 Fully Loaded Time – 1.8s Total Page Size- 252KB Requests – 26 |
Mobile Optimization – 58 Desktop Optimization – 81 |
Performance Grade – 87Load Time – 1.47s Page Size – 278.7KB Requests – 26 |
| With one Elementor pro element | 1.9s | Page Speed Score – 99 YSlow Score – 90 Fully Loaded Time – 2.4s Total Page Size- 354KB Requests – 31 |
Mobile Optimization – 66Desktop Optimization – 77 | Performance Grade – 88 Load Time – 1.65s Page Size – 387.1KB Requests – 31 |
| With dummy header | 1.9s | Page Speed Score – 98 YSlow Score – 90 Fully Loaded Time – 2.4s Total Page Size- 362KB Requests – 34 |
Mobile Optimization -44 Desktop Optimization – 87 |
Performance Grade – 87 Load Time – 1.78s Page Size – 397.7KB Requests – 34 |
| With dummy page content – 7 sections with text, 3 images, 1 banner image, and 1 iframe video | 4.5s | Page Speed Score – 83YSlow Score – 82 Fully Loaded Time – 4.2s Total Page Size- 1.53MB Requests – 57 |
Mobile Optimization -27Desktop Optimization – 64 | Performance Grade -81 Load Time -2.06s Page Size – 1.7MB Requests – 57 |
| With Slider | 4.8s | Page Speed Score – 83 YSlow Score – 82 Fully Loaded Time – 4.2s Total Page Size- 1.64MB Requests – 61 |
Mobile Optimization -20Desktop Optimization – 57 | Performance Grade -81 Load Time -2.26s Page Size – 1.8MB Requests – 61 |
| With Google Maps | 5s | Page Speed Score – 82 YSlow Score – 79 Fully Loaded Time – 5.4s Total Page Size -1.88MB Requests – 77 |
Mobile Optimization – 8 Desktop Optimization – 51 |
Performance Grade – 75 Load Time – 2.29s Page Size – 2.3MB Requests – 87 |
For the “Hello” theme with one text element from Elementor, the score for mobile is 58 and for desktop is 81. For the same page when we added about 7 text sections, 3 images, 1 banner image, and 1 iframe video, the score is 27 for mobile and 64 for desktop. You could see that based on the new sections added on the website, the page size and the requests also increase which affects the loading time.
The speed of the website entirely depends on the number of elements that are used on the website. If we limit the multiple uses of heavily loaded elements like sliders, videos, and third-party scripts like Google Maps in the pages, then we can definitely achieve a page speed of less than 4 seconds.
Sometimes, when there are certain third-party applications serving content to a website’s visitors, a failure in a single app or script from a third party can increase the web page’s load time.
Generally speaking, the larger your file sizes are and the more files you have to load on a page, the longer it will take to load in the browser. While improvements in connection speed have made it possible to load larger files in less time, it’s still important to take time to optimize your files as much as possible. You can minify your code and optimize image formats and sizes to keep your files as lean as possible.