Hiding website sections to improve page load speed

[Matt231]

Question: I have used the CSS command display: none; to hide certain sections of my site for mobile view in the hopes it would improve page load times, but given that I can still see in the source code, does it mean it doesn't make any different to page load times? If not, is there a way to have mobile load quicker with some coding?

 

[VBService]

I have used the CSS command display: none; to hide certain sections of my site for mobile view in the hopes it would improve page load times,

Using display: none in css does hide elements visually on the page, but it doesn't necessarily improve page load times. The elements are still being loaded and processed by the browser, they are just not displayed.

For example consider actions like this:
1. Use @media queries in your css to apply specific styles for different screen sizes.

@media only screen and (max-width: 600px) {
    /* Styles for mobile devices */
}

2. Implement lazy loading for images and other non-essential resources. Lazy loading delays the loading of certain elements until they are about to come into the user's viewport.

<img src="image.jpg" loading="lazy" alt="Description">

3. Compress and optimize your images to reduce their file size without compromising quality. Tools like ImageOptim, TinyPNG, or online services can help with image optimization.
4. Minify your css and javascript files to reduce their size. You can also combine multiple files into one to minimize the number of http requests.
5. Utilize a CDN (Content Delivery Network) to distribute your static assets (like images, stylesheets, and scripts) across multiple servers worldwide. This can improve the loading speed for users in different geographical locations.
6. Minimize the number of http requests made by your webpage. This can be achieved by reducing the number of scripts, stylesheets, and other resources.
7. Implement proper caching strategies to reduce the need for repeated downloads of the same resources. Use cache headers to control how long the browser should keep resources in its cache.

also
1. PageSpeed Insights is a tool by Google that analyzes the content of a web page and provides suggestions to make it faster. It gives separate scores for mobile and desktop performance and offers actionable recommendations.
2. Lighthouse is an open-source, automated tool for improving the quality of web pages. You can use it in the Chrome DevTools panel, from the command line, or as a Node module. Lighthouse can audit your website in various categories, including performance, accessibility, SEO, and more.

 

[VBService]

BTW, an example of one way where using display: none does the job better:
[ working code on-line ]

<div class="container">
  <div class="text-box brown">
    Έχω χρησιμοποιήσει την εντολή CSS <b>display: none;</b> να αποκρύψω ορισμένες ενότητες του ιστότοπού μου για προβολή από κινητά με την ελπίδα ότι θα βελτίωνε τους χρόνους φόρτωσης της σελίδας ...
  </div>
  <div class="text-box green hide">
    I have used the CSS command <b>display: none;</b> to hide certain sections of my site for mobile view in the hopes it would improve page load times ...
  </div>
  <button class="brown">Translate</button>
</div>

<style>
  .container {
    position: relative;
    margin: 2rem;
    width: 340px; height: 150px;
    box-sizing: border-box;
  }
  .text-box {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    padding: .75rem 2rem 0rem;
    border: .45rem double;
    border-radius: .5rem;
    box-sizing: border-box;
  }
  .text-box::before {
    position: absolute;
    top: -4.1rem; left: -.5rem;
    font-family: Arial;
    content: "\201C";
    font-size: 350px;
    color: hsl(0 100% 10% / .15);
    z-index: -1;
  }
  button {
    position: absolute;
    bottom: -.55rem; left: 2.2rem;
    border-radius: .5rem;
    cursor: pointer;
    font-weight: bold;
    line-height: 1.35;
    width: 5rem;
    text-align: center;
    z-index: 99;
  }
  .brown {
    border-color: hsl(33 100% 30% / .3);
    background-color: hsl(33 100% 40% / .45);
  }
  .green {
    border-color: hsl(136 100% 30% / .3);
    background-color: hsl(136 100% 40% / .45);
  }
  .hide {
    display: none;
  }
</style>

<script>
  const container = document.querySelector('.container'),
        text_boxes = container.querySelectorAll('.text-box'),
        button = container.querySelector('button');

  button.addEventListener('click', function() {
    this.textContent = (this.textContent == 'Translate') ? 'Orginal':'Translate';
    this.classList.toggle('green');
    text_boxes[0].classList.toggle('hide');
    text_boxes[1].classList.toggle('hide');
  });
</script>