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

rwsorensen

WMS Marketplace Seller
Joined
Mar 12, 2014
Messages
193
Points
18
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

New member
Joined
Jan 22, 2015
Messages
743
Points
0
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

New member
Joined
Apr 3, 2015
Messages
770
Points
0
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

New member
Joined
Apr 28, 2015
Messages
4
Points
0
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

New member
Joined
Apr 28, 2015
Messages
4
Points
0
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

New member
Joined
Jul 26, 2015
Messages
55
Points
0
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

New member
Joined
Jul 17, 2015
Messages
28
Points
0
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

New member
Joined
Aug 10, 2015
Messages
18
Points
0
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

New member
Joined
Sep 17, 2015
Messages
8
Points
0
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

New member
Joined
Jul 26, 2015
Messages
55
Points
0
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

New member
Joined
Apr 3, 2015
Messages
770
Points
0
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

New member
Joined
Sep 8, 2015
Messages
26
Points
0
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

New member
Joined
May 27, 2015
Messages
46
Points
0
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

New member
Joined
Jul 17, 2015
Messages
28
Points
0
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.
 
Newer threads
Replies
5
Views
2,816
Replies
4
Views
3,149
Replies
7
Views
4,031
Recommended threads
Replies
0
Views
1,979
Replies
4
Views
2,832
Replies
6
Views
3,716
Replies
4
Views
2,981

Referral contests

Referral link for :

Sponsors

Popular tags

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top