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

[rwsorensen]

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]

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]

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]

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.

 

[rwsorensen]

rwsorensen

This may be advanced techniques or I didn't understand your meanings. Could you give me any extra info or examples about those?

 

[sip]

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]

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]

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.

 

[media89]

media89

Follow this advice, it will make your site's speed much faster, if you do all the points.

But first test your page speed at Google Page Speed test, just to see whats up, then implement this points.

 

[malikshahid3232]

malikshahid3232

Both acquisto and media89 advice is right. More over you can test your website on gtmetrix dot com and follow things need to be improved to make your site load faster.

 

[johnny_r]

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

 

[starfishratings]

starfishratings

Exactly. Build the page mobile-first and try using Chromes bandwidth simulator with a low setting so you can experience what your site is like in the real world situations where on mobile you might not always have 3 or 4G.

Server-side page processing is the only way to avoid elements downloading, like the OP says. But is can lead to a large maintenance effort so balance the effort against the savings, especially on a large site.

 

[PluginForage]

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]

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]

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]

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]

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]

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

 

[RDO Servers]

RDO Servers

Having a web hosting plan with multiple IP address, will have no affect on the loading speed of your website.