How to make content load faster on a responsive design site?

rwsorensen · Apr 28, 2015

Hey there,
On my responsive site if I set elements in CSS with property display:none for displaying on mobile, it will not show these blocks but it still is taking time to download from page content.
I'd like to know are there any ways on how to make content load faster on a responsive design?

Nytshade · Apr 28, 2015

You can try using Google PageSpeed Tools, these tools will help you optimize the performance of your website. You'll get some good practices you can apply to improve your site and PageSpeed optimization tools can help you automate the process.

I know that's pretty basic but it might help

RDO Servers · Apr 28, 2015

Also try the Pingdom page speed tool. It will should all if your requests, time/file size for each, which are loading asychronoulsy etc.

sip · Apr 28, 2015

Asynchronous loading is the important bit. load what you need for the page to show then load any js etc after it has rendered.

If you want to specifically get into only loading items that are required rather than hiding via css then perhaps some viewport size queries in cached php to only actually load the ones which are reuqired. then if the viewport size change you can load these dynamically?
or asyn load different section using php to determine the order first and once all your page rendering is loaded you could load the bits that are not currently required but might be if they change the viewport size for example?

lots of options. but would probably not outweigh just using nginx and / or varnish to deliver the site in the firts place with microcaching enabled you should get very nice loadspeeds on a basic vps for most types of sites.

I have had sub 1 second speeds on a magento site just using nginx. hoping to bring that down further with varnish at some point.

sip · Apr 28, 2015

You would use javascript to get the viewport size. this is the size of the screen currently viewing your site.
then utilising these bits of information you could use the variable within php to say

{ if $viewport > 800 then load this bit of code which shows the sidebar}

etc.

you would add the viewport js to the top of the page and then the ajax loading of other bits to call php after it. so that way the php is only triggered to load the content if it should in fact be added to the page.

this approach however might end up increasing loading times in some cases because it will be a lot more processing on php to determine which bits are loaded.

I think i would just go with a faster server setup.

PluginForage · Jul 26, 2015

Optimize your images. Try consolidating all your CSS into one file and minifi it. That way only one request to the server is required and less kilobytes involved. Do the same with your javascript files. Put what javascript/jQuery calls you can in the footer so your page will already be loaded before the javascript libraries get loaded.

Use a CDN to deliver jQuery. This way if somebody has visited a site that used a jQuery CDN, they have that cached in their browser already and won't need it again from your site.

acquisto · Aug 2, 2015

Use this silmple steps:
1.Consider implementing a content delivery network (CDN).
2.Implement new image formats to reduce the size of your images.
3.Cache, cache, cache.
4.Evaluate your plugins.
5.Combine images into CSS sprites.
6.Enable HTTP keep-alive response headers.
7.Enable compression.
8.Use expires headers.
9.Minify JavaScript and CSS.
10.Review your hosting provider and package.

johnny_r · Aug 11, 2015

I think the previous posters gave really good ideas. What is coming to my mind is the mobile first strategy. If you develop the mobile version first, it's a lot easier to keep the site fast and lightweight. It's always harder to reduce a big desktop site to a super mobile friendly design

PluginForage · Aug 12, 2015

Combine and minify your css. Combine and minify your javascript. Place your jQuery call in the footer so it loads last. Optimize images for the web.

RDO Servers · Aug 12, 2015

Everyone above has given good advice on things you can do that can help the loading speed of a site.

However, no one can tell the OP what he should do to help his site. First, you have to analyze the website you're trying to speed up. Every site is different, and what helps one, may not help another.

Sure, bundling and minifying css/javascript can help the page loading time. However if your css/javascript is small, or loading them bundled will take more time than loading them asynchronously, then this will not help his site.

WOrking on speeding up a site should start with analysing the website. Otherwise you can spend hours doing optimization tasks, but not benefit your site at all.

ypson · Sep 8, 2015

RDO Servers, it is assumed that analyzing the site is the starting point, isn't it?

In any case, my take it to minimize requests sent to the server and async loading of resources that are not critical.

kian.j · Sep 8, 2015

Maybe the content you have on your website (images and the rest) is just too heavy and you need to make it 'lighter'.
Responsive design is must nowadays, and despite the fact that sometimes it's hard to make it happen, it definitely is worth the fight.

acquisto · Oct 17, 2015

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.

rf-harris · Dec 16, 2015

Get a better hosting plan, a hosting plan with multiple IPs should help.

How to make content load faster on a responsive design site?

Well-known member

Well-known member

Well-known member

New member

New member

Member

Member

Member

Member

Well-known member

Member

Member

Member

Member

Sponsors

Tag Cloud