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 ✌🏽 + ❤️
Top comments (1)
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:
1. Add a CSS class to the desired HTML element
Here, we're adding the
desktop-onlyclass to our<img>element. We'll define this class in CSS in the next steps.index.html:
2. Define a media query in CSS
Media queries are represented by the
@mediakeyword. 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-widthin 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:
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-onlyCSS class within our media query.styles.css:
If the user's device is less than 992px wide, then the
desktop-onlyclass will be applied withdisplay: none;(that is, any element with thedesktop-onlyclass 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!