: How to make content load faster for mobile on a responsive design site? So, I have a responsive design site. Studies say that for mobile devices we need to show a bit less content (graphics
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?
More posts by @Bethany197
3 Comments
Sorted by latest first Latest Oldest Best
I detect mobile browsing using server-side PHP and serve CSS, images and ui pattern for the device in landscape & portrait...
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.
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.