7

So, I have a responsive design site. Studies say that for mobile devices we need to show a bit less content (graphics and such), and that we need to make sites load quicker for mobiles.

If I set some page elements in css to display:none for mobile, it won't show these blocks, but it doesn't mean that content in these blocks won't be taking time to download. So we end up hiding but still serving.

On a responsive site, how do I hide blocks of page elements and not serve their content to mobile users to speed page load time?

Improve this question
2
  • check your site's load speed without css and javascript. that'll be the real load speed. use Google page speed to get an indication of how and what to optimise.
    – Abu Nooh
    Jun 29, 2014 at 0:48
  • 1
    Your comment is off topic, I know how to test speed. I don't know how to speed loading site contents for mobiles...
    – CamSpy
    Jun 29, 2014 at 21:11

3 Answers 3

Reset to default
4

If a block of content is hidden with CSS, the browser still needs to download the HTML inside that element. All browsers except Opera download the images, too. (In fact, since Opera has switched to Webkit it likely downloads hidden images now.)

One of the best ways to reduce load in mobile browsers is to use background images in CSS (e.g. sprites) where possible, then use mobile-first responsive design. This means making the standard CSS work for mobiles, then using media queries to target larger screens, rather than vice-versa. Put the smaller images in the standard CSS, then switch out for the larger ones in the large-screen media queries.

Media queries work in all modern browsers including IE9+. IE8 and below have less than 6% share globally so showing those users the mobile site isn't a big problem in my opinion.

If old-IE support is important in your situation, you can still use media queries for only the images. For example, design the desktop site as normal but with lower-res images that will load faster on mobile. Then use one media query for the responsive mobile layout, and another media query targeting larger screens to swap out the images for better version.

Improve this answer
6
  • 1
    Not a good idea to just optimise for new browsers as most people still use older versions of browsers including ie
    – Abu Nooh
    Jun 29, 2014 at 0:50
  • 1
    @AbuNooh Actually media queries are supported by the browsers of over 90% of visitors, however I have added an alternate solution and more explanation to my answer.
    – DisgruntledGoat
    Jun 29, 2014 at 22:03
  • @DisgruntledGoat if I want to use thumbnails of photos (I have 60 thumbs on page), if I put them all into sprites, it is still around 200-300kb to download for mobiles and then another 300-400kb to download for desktops... And then the SEO issues for thumbs as sprites... What would you suggest in such situation?
    – CamSpy
    Jun 30, 2014 at 11:44
  • @CamSpy Yes, thumbnails are often better kept as separate images (if only for ease of development). One of the best solutions in your case would be to lazy-load images. See here for some discussion on SEO.
    – DisgruntledGoat
    Jun 30, 2014 at 13:57
  • 1
    Fun to know: An element with a bacgground-image set to display:none doesn't load the image (at least last time I checked)
    – Martijn
    Jul 1, 2014 at 7:47
1

Optimising for mobile is almost the same as desktop as you easily aiming to serve as little as possible in the least possible size. Because of mobiles lower screen resolutions desktop resolution images are not required and you can look at adaptive images which means it'll serve a different resolution image depending what device you are on. This can be done by using a cdn that supports adaptive images, JS Adaptive Images or a framework such as Zurb Foundation that supports this.

For everything else I recommend you check out ideas to speed up page loading as well as many other speed related questions on Pro Webmasters.

Improve this answer
4
  • 1
    Wait, what? Maybe I've not been paying attention but I don't think display:none has any affect on downloads.
    – Rob
    Jun 29, 2014 at 0:19
  • It would seem that your right with Desktops browsers but I'm half sure that newer versions of mobile browsers when using media queries combined with display:none then these elements are ignored. Until I can test this I've removed the block about not downloading ;)
    – Simon Hayter
    Jun 29, 2014 at 10:27
  • @bybe You can test on this page: quirksmode.org/css/displayimg.html I checked in the latest mobile Safari and the images are downloaded.
    – DisgruntledGoat
    Jun 29, 2014 at 22:05
  • Yep, reason I edited my answer and left adaptive images which is a very effective method.
    – Simon Hayter
    Jun 30, 2014 at 5:19
0

I detect mobile browsing using server-side PHP and serve CSS, images and ui pattern for the device in landscape & portrait...

Improve this answer
1
  • do you mind to share this solution?
    – CamSpy
    Jul 1, 2014 at 7:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.