DEV Community

Cover image for What is the best industry practices when it come to conditionally loading website data?
Kenny Whyte
Kenny Whyte

Posted on

What is the best industry practices when it come to conditionally loading website data?

#webdev #help #feedback

Hello everyone,

I need some advice on the best industry practices when it comes to loading data to ensure that my website is performant.

I am currently working on a Travel blog that has a video in the Hero section. I only want this to load for large screens (desktop) and individuals with a fast internet connection. I want to make sure that the site experience can be accessible and enjoyable for everyone, no matter what internet speed they have.

Here is the blog - https://mtwblog.vercel.app/

Tech Stack
NextJS
Sanity CMS

What is the best solution to achieve this?

Any advice will be greatly appreciated.

Cheers!

Kenny ✌🏽 + ❤️

Oldest comments (1)

Collapse
 
cariehl profile image
Cooper Riehl •

It's great that you're looking for ways to make your website more accessible!

For your specific problem, I think the best solution is to use CSS media queries to modify your content based on the user's screen size. Media queries are a powerful and customizable way to change the style of your website based on information about the user's device. I highly recommend glancing at the link above, but I'll also give a brief example below.

This example shows or hides an image (<img>) based on the user's screen size, but the principles are the same for any HTML element.

Assume our HTML is in "index.html" and our CSS is in "styles.css". The <html> and <head> tags are omitted for brevity.

index.html:

<body>
  <img src="my-cool-image.png" />
</body>
Enter fullscreen mode Exit fullscreen mode

1. Add a CSS class to the desired HTML element

Here, we're adding the desktop-only class to our <img> element. We'll define this class in CSS in the next steps.

index.html:

<body>
  <img src="my-cool-image.png" class="desktop-only" />
</body>
Enter fullscreen mode Exit fullscreen mode

2. Define a media query in CSS

Media queries are represented by the @media keyword. They define a set of CSS classes that will only be applied when the user's device matches the given query.

In this example, we're using a media query to target devices with a width less than 992px (note the use of max-width in the media query). There's a whole plethora of research you can do about different device widths, but in general, this should be a good breakpoint between "mobile" and "desktop" devices.

styles.css:

@media (max-width: 991.98px) {
  /* TODO: Define how the 'desktop-only' class should appear on small screens. */
}
Enter fullscreen mode Exit fullscreen mode

3. Define the new CSS class within the media query

Now that we have our media query set up, all we have to do is define the desktop-only CSS class within our media query.

styles.css:

@media (max-width: 991.98px) {
  .desktop-only {
    /* On small screens, these elements are not displayed at all. */
    display: none;
  }
}
Enter fullscreen mode Exit fullscreen mode

If the user's device is less than 992px wide, then the desktop-only class will be applied with display: none; (that is, any element with the desktop-only class will not appear on screens less than 992px wide). On screens that are 992px wide or wider, the class will essentially do nothing, meaning the image will display as normal.

Wrapping up

And we're done! You can see our example in action here - click and drag the middle bar to resize the content area, and notice how the image disappears when the content area gets too small.

Media queries are far more powerful than this, and you could use more complex ones to (for example) change the size or scaling of an element, change an element's position, or replace an element with something else.

I hope this example was helpful! Best of luck in your web development journey!

Read next

developeralamin profile image

Deep Linking for Andriod and Apple in Next.js

Al-Amin Islam -

hasincodes profile image

My First Full-Stack Project ZeusConnect

Hasin Raiyan -

piotrkulpinski profile image

How to Build Dynamic Breadcrumbs in Remix

Piotr Kulpinski -

aneeqakhan profile image

How to Add Google Maps to Your Web App Using React

Aneeqa Khan -