Mobile Load Times

[stardigit]

Hi Jason,

While testing the Alyeska demo (themeblvd.com/demo/alyeska) on my iPhone 4s, I noticed that pages often loaded very slowly (15+ seconds), and often not at all, hanging during loading and returning a “Server Stopped Responding” error.

I ruled out any issues with my device or WiFi, then ran the W3C mobileOK checker (validator.w3.org/mobile). The W3C checker gave the site a score of 0%, noting these as the critical issues:

128 embedded external resources/HTTP requests (max recommended 20), including 18 stylesheets
Page size 779 KB (max recommended 20 KB)
Markup 57 KB (max recommended 10 KB)
Contains frame, frameset, or iframe (not recommended)

Similar issues for my Alyeska site, eplaw.starfruitdigital.com. I really prefer to stick with this theme if possible, but mobile is a priority for this site, so I will need to fix (or at least improve) the load times.

So here are my questions:

– Images (primarily slider and background) are the drivers of issues #1 and #2. I tried to fix this using #featured{display:none}, body{background-image:none} in the @media (max-width: 480px) { } section. Unfortunately, though this causes the slider and BG image to disappear on mobile, they are still loaded. Do you have a suggestion to keep these from loading on mobile?

– For #3, W3C site suggests merging CSS files into fewer files. Any problem with doing this?

– For #4, the iframes are for the video embeds in the slider. Can these be embedded without iframe?

Sorry in advance if these questions are naive, I’m still learning. Thanks!

Topic

[Jason Bobich]

Hello,

It sounds like the next logical step for you is to now setup a CDN and use a plugin like W3 Total Cache. Are you familiar with these concepts? W3 Total Cache is how you’d go about compressing all of the assets. And using a CDN service is how to reduce load times of images by dispersing them to different servers around the world (popular example of a service is Amazon S3).

http://wordpress.org/extend/plugins/w3-total-cache/

It’s an important when making a WordPress theme for public distribution that these kinds things like caching, merging of CSS and JS files, etc, are not done for you. These are things you need to control from your WordPress site as you see fit in conjunction with whatever theme you’re using and plugins you’re using.

I already cheat a little bit on this by minifying many of the assets for you in the theme. I justify this by educating people to make all of their edits to these things from a Child theme.

And also to the point about the videos being in iframes, that’s not something you can change, as this is how all the popular services like YouTube and Vimeo are doing it now. The act of embedding these videos specifically is handled interally within WordPress’s oembed system.

[stardigit]

Hi,

No, I wasn’t familiar with using a CDN (yes for cache). Thanks – I expect these things will speed up the load times a lot.

However my question remains about a way to prevent images (particluarly background and sliders) from loading. These are over 60% of my page’s size, so seems that keeping them from loading would offer the biggest improvement in load time (at least on the first load), no?

On a side note, the W3C checker found a 404 error here:  http://www.themeblvd.com/demo/alyeska/wp-content/themes/alyeska/framework/frontend/assets/images/shortcodes/notice/alert-icon.png.

[Jason Bobich]

When you say your slider, are you talking about the actual user-inputted images in the slider you’re creating? There’s no way you can stop them from being inserted without going into the PHP. Simply hiding the slider with CSS is not going to stop the images from being inserted.

But a background image? Sure that’s easy enough. Anything that’s CSS only is easy to tackle.

@media (max-width: 480px) {
	.whatever-element { 
		background-image: none;
	}
}

[stardigit]

Yes, for the body background image I have:
@media (max-width: 480px) {
body {background-image: none !important;}
}
but the W3.org Mobile OK checker says the background image is still loading. Any idea why?

[Jason Bobich]

I honestly do not have an answer for you that.

[Jason Bobich]

I wanted to add one more thing on this general topic. When you originally started this topic, you mentioned about just how slow some of the load times were on your mobile. In my experiments in the past, when I would get these big hangups (and probably what you see on the demo), it seems the cause was always from the fact of loading videos from the external sources like YouTube or Vimeo.

You should try experimenting with some pages where there are no videos in your slides. I think you’ll see that is the bulk of the hangup.

[michaelshinosky]

Thanks Jason. That was on the bug list. You answered it – I’m going to use the builder option of hiding the main slider with a video slide on Mobile and Tablets – and create a new slider for those devices.

[Author]

Replies