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

rwsorensen

Well-known member
Registered
Joined
Mar 12, 2014
Messages
115
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?
 

RDO Servers

Well-known member
Registered
Joined
Apr 3, 2015
Messages
1,027
Points
83
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
Registered
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
Registered
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

Member
Registered
Joined
Jul 26, 2015
Messages
51
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

Member
Registered
Joined
Jul 17, 2015
Messages
23
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.
 

media89

Member
Joined
Aug 12, 2015
Messages
25
Points
0
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

Member
Registered
Joined
Nov 17, 2015
Messages
21
Points
0
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

Member
Registered
Joined
Aug 10, 2015
Messages
16
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
Registered
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

Member
Registered
Joined
Jul 26, 2015
Messages
51
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

Well-known member
Registered
Joined
Apr 3, 2015
Messages
1,027
Points
83
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

Member
Registered
Joined
Sep 8, 2015
Messages
23
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

Member
Joined
May 27, 2015
Messages
43
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

Member
Registered
Joined
Jul 17, 2015
Messages
23
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.
 

rf-harris

Member
Joined
Oct 26, 2015
Messages
29
Points
0
Get a better hosting plan, a hosting plan with multiple IPs should help.
 

RDO Servers

Well-known member
Registered
Joined
Apr 3, 2015
Messages
1,027
Points
83
RDO Servers
Having a web hosting plan with multiple IP address, will have no affect on the loading speed of your website.
 
Newer Threads
Replies
5
Views
3,254
Replies
4
Views
2,295
Replies
7
Views
2,788
Recommended Threads
Replies
2
Views
1,427
Replies
8
Views
3,562
Replies
8
Views
5,200

Latest Hosting OffersNew Reviews

Sponsors

Tag Cloud

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