Conditional Loading For Responsive Designs
A selection of useful resources and my notes on conditional loading for responsive designs. www.css-takeaway.com
- What's absolutely required in order to render the page initially? The rest of the content and components can wait.
- Hidden content, images below the fold, and interactions that come after initial page rendering are other ideal candidates.
- Post-loaded scripts should be viewed as a progressive enhancement - without them the page should still work.
- It's important to reduce the number of http requests for site performance.
- On pages with lots of images, it may be that some are not critical to the page and don't need to be loaded up front.
- This allows the core elements of our site to load quickly, while other stuff is loaded in the background.
- There's no way to prevent (some) browsers from downloading an image without removing it from the HTML completely.
- If the images are crucial to context then they probably aren't the ideal candidate for delayed loading.
- If they are just a visual enhancement, it's probably ok if some users don't see them to benefit the majority of other users.
- We can use HTML5 data attributes to store references to peripheral assets (e.g.
- This articles shows how this can be done using jQuery.
- We can go a step further and only load the extra assets once the user takes an action, for example loading as the user scrolls.
- Highlights some examples where content can be classified as 'nice-to-have', but not core to the page.
- To ensure the peripheral content (provided via third-party services) doesn't delay loading of core content, Ajax is used to request the content once the core information has already loaded - LAZY LOADING
- The lazy loading is also wrapped in a condition to check if the viewport has sufficient space to accommodate the peripheral content.
- Judging what content to include is no longer a binary choice - is it on the page or not.
- Prioritising content as part of a mobile first approach may also introduce a extra dimension - include some content if the user's circumstances warrant it.
- The mobile-first approach forces you to really focus on the core content of your page.
- When media queries are applied for larger viewports, and more space becomes available, we can load in the 'nice-to-have' content using Ajax functionality.
- Before doing so, we should first run a test to check if the viewport is wide enough to accommodate subsidiary content - CONDITIONAL DELAYED LOADING.
ifstatement to check the viewport width and if space is available loads in additional content using Ajax.
- The additional content is retrieved from a thrid-party service so the function is called at the bottom of the document once the document has loaded.
- To ensure users on small screen devices still have access to this content, a simple hyperlink is available by default, which is then replaced with the enhanced content if and when the conditional content is loaded.
- This article provides some example code for this approach.
- This doesn't feel clean and goes against principles of DRY having the pixel number repeated in both JS and CSS.
- May be even worse if CSS media queries make use of
- This article demonstrates code that could be used to check for the presence of a style change executed within a media query, instead of viewport width.
- That way the only dimesnion value declared is in the CSS media query. If this is changed, the JS would still work as long as the style is matched.
- For e.g. our JS can check if our
floatproperty. If so, we have columns in our layout and want to go ahead and display the periperhal content, in theory.
- Technique to lazy load nonessential content without introducing access barriersusing an "Ajax-include" pattern.
- This enhanced certain links on a page by including a fragment of content from a URL related to their linked resource.
- This pattern uses HTML5
data-attributes to store a URL reference to an external HTML fragment.
- Highlights an issue that if multiple instances of this pattern occur on a page, there can be performance issues (too many requests) with the time taken to enhance the core experience and get the enhanced content onto the screen.
- Offers an advanced version of this pattern that bundles all content includes together into a single request.
- This uses a server-side script to accept all URLs in one request, and return the contents of each in a single response.
- Demonstrates use of
data-attributes to store image source data.
data-attributes and generating
iframecode on the fly.
floatfeels a bit risky, other CSS properties may offer a better alternative...
- Discusses a number of suggestions from commenters, but due to various hiccups arrives at a solution using generated content, and provides example code.
- In this example generated content is applied via
display:noneused to ensure it is never visible.
- The end result is that we maintain a seperation between style and behaviour and an alternative property to
- Quick idea about making mediaqueries not only apply styles according to certain criteria being met, but also loading the resources needed on demand.
- This allows us only to load assests if media conditions are met, for e.g. is our screen width bigger than x.
- Also demonstrates how this can be combined with HTML5
class, evaluate their mediaqueries and change the
data-attributes back to real ones.
- This approach could be used to conditionally load higher resolution images for larger viewports by storing the high res
data-attribute and swapping out if
macthMediaconditions are met.
- This article provides example code.
- A possible downside to this is that we are declaring values in both our CSS and JS again.
- Offers some reasons to think twice before adopting an approach as discussed above that uses
matchMediato load specifically CSS files.
- Browsers already do a lot to optimise the download of these assets so there may be better performance gains to be had elsewhere.
matchMediaabove may still be of use in other scenarios such as responsive images...