A "responsive" question

considerthis1
(@considerthis1)

9 years, 5 months ago

Hi.

http://www.health-boundaries.com/fingernail-linesridges/

PageSpeed is once again telling me that this page isn’t loading quickly, but this time it says the problem is specifically with mobile devices.

I think I may not understand the “responsive” feature… at least not accurately.

Does it take more time for a page to respond when it has to make a 386 pixel wide image 320 pixels? than when it has to make a 350 wide image 320?

I made my images smaller, rather than optimizing them b/c the detail that makes them meaningful is nearly lost with optimizing.

But, I thought cell phones were 320 pixels wide. Now I’m learning that some are 280. Is that right?

Do you size your images to reduce loading times?

On a desktop my page takes under 3 seconds to load, according to Pingdom. But According to PageSpeed which shows mobile device times, it takes over 10 seconds on a mobile device.

I’m going to crop my pictures and size them smaller in GIMP… but I want to know what sizes I should be aiming at. Am I right in thinking that relying too much on “responsive” is the wrong approach?????

Viewing 10 replies - 1 through 10 (of 10 total)

CrouchingBruin
(@crouchingbruin)

9 years, 5 months ago

Hi, Karen:

Does it take more time for a page to respond when it has to make a 386 pixel wide image 320 pixels? than when it has to make a 350 wide image 320?

Not significantly at the sizes you’re referencing. If the user’s computer had to resize something that was 2048px across down to 320, that could noticeably take more time, but I would think most of the time on the page display would be the transfer of the image to the device, rather than the time it takes for the device’s browser to scale the image down. And that time is multiplied by the number of images that you have on the page, so a page with a larger number of images to scale is going to take longer to draw than a page with not so many images.

I made my images smaller, rather than optimizing them b/c the detail that makes them meaningful is nearly lost with optimizing.

Yes, as you’ve discovered, there’s always that balance between optimizing an image for size versus how sharp the image is. An image which has text or distinct lines in it, like your header image, will look noticeably more blurry with lower resolutions.

But, I thought cell phones were 320 pixels wide. Now I’m learning that some are 280. Is that right?

They even go smaller. you can see a list here. You obviously can’t code for every single screen width, so most designers will choose 320px since that’s the width of an iPhone, which is the most popular smart phone.

Do you size your images to reduce loading times?

I will generally reduce my image widths to 1024px, with 90% compression, since the main content area on my sites are usually 960px.

I’m going to crop my pictures and size them smaller in GIMP… but I want to know what sizes I should be aiming at. Am I right in thinking that relying too much on “responsive” is the wrong approach?????

There are probably some things that can be done to improve the load time of images, including optimizing for size. I’m not sure if I could recommend spending that much effort on it, not knowing how much of a speed improvement you would get in the long run.

Thread Starter considerthis1
(@considerthis1)

9 years, 5 months ago

Hello CrouchingBruin ~~~ 🙂

So many questions answered!

Happiness, I chose 320 for my images in the sidebar, and as a basic where they didn’t “need” to be larger.

The remaining problem, though, is that fingernail pictures page takes 7 seconds longer to load on mobile devices. So… if it’s not the extra time reducing a 380 image down to 320 or 280… what is causing mobile devices to load my Fingernail Pictures pages more slowly. More than 3 times more slowly. ?????

By the way, your help re the TOO LONG Google text ad that was interfering with page loads, now that I followed your advice, has made that problem totally disappear. Thank you SO MUCH.

Thread Starter considerthis1
(@considerthis1)

9 years, 5 months ago

Hi CrouchingBruin,
Happy Thanksgiving!

I just tested my pages, and although I thought they would properly respond now that I removed the Google ad that was too long, when I try to close my browser to the size of a small mobile device, it won’t go. It seems now to be set at the larger mobile screen size.

Some time ago I could close my browser to see how a page would look on a small mobile device.

Have you noticed that? In your pages????
CrouchingBruin
(@crouchingbruin)

9 years, 5 months ago
Hi, Karen. Happy Thanksgiving to you, too.

I think it depends on the browser. I can shrink Chrome to 320px when viewing your page, and Firefox to 93px when viewing the same page.

You may want to add this rule to your CSS:
```
#breadcrumbs1 {
   padding-left: 0;
   padding-right: 0;
}
```
The default padding for the breadcrumbs makes it stick out a little bit on narrower widths.
Thread Starter considerthis1
(@considerthis1)

9 years, 5 months ago

Hi, Thank you!!! (for the Happy Thanksgiving!)

And, thank you for this.

I have chrome but it won’t shrink to 320. I thought maybe there’d been a change to Montezuma.

Does the CSS go in Various?

After getting rid of the Google ad you identified as too wide, Google is giving me full credit for one of the Scorecard categories.

I think I’m going to have to make the pictures more narrow on my most visited page. I was going to make a mobile page for it, so the other pages could continue to have larger images. But apparently I can’t make a mobile page in my site using WordPress… Is that true?

CrouchingBruin
(@crouchingbruin)

9 years, 4 months ago

Does the CSS go in Various?

Yes, you can paste the CSS into various.css.

But apparently I can’t make a mobile page in my site using WordPress… Is that true?

So you would redirect mobile users to a different page? It can be done, there are probably plugins that allow you to do that, or you could write some JavaScript to redirect to a different page when a mobile device is detected. No reason why it couldn’t be done in WordPress. The whole idea behind a responsive layout, though, is to avoid having to create separate mobile pages/sites, because that then doubles the amount of maintenance that you have to do.

Thread Starter considerthis1
(@considerthis1)

9 years, 4 months ago

Hi CrouchingBruin,
It took me a few days to do it. I had a Scheduling Conference thing in Wells Fargo’s foreclosure, that weirded me out. Sigh. I am, once again, however, cautiously hopeful. 🙂

Okay, so, I added the rule. I haven’t tested each site yet, to see if they go small the way they used to.

But, today an old problem in this area has again arisen.

PageSpeed says: Eliminate render-blocking JavaScript and CSS in above-the-fold content

A guy on twitter who professes to Know… a lot if not ALL. says:
On the server-install version of WordPress (.org) you can definitely defer js load time.

So I called WPEssential… and the tech said he’d ask “upper tier”. He came back and said Yes, I could change the php coding…

LOL. I don’t think I could effectively change the coding b/c of the horrible error rate I have when I do things that require absolutely correct details.

What do you think? Have you done the “eliminate render-blocking java script” thing on your sites????

Karen

Thread Starter considerthis1
(@considerthis1)

9 years, 4 months ago

Just checked… No, my site still is very wide in my browser, which is Chrome.

It used to go very narrow, to the size of a small phone if I tried to compress it that much…

Sigh.

CrouchingBruin
(@crouchingbruin)

9 years, 4 months ago

What do you think? Have you done the “eliminate render-blocking java script” thing on your sites????

No, I generally don’t worry about page load speeds on my sites. The people who visit my sites come for specific information that they really can’t get anywhere else, so as long as they’re not waiting an inordinate amount of time, I don’t worry about how fast their page loads, because I know that they’ll wait. Maybe it would be different if I were selling products that they could get on another site, i.e., I was competing against other sites for visitors or customers.

I don’t seem to have a problem making Chrome narrow when I visit your site.

Thread Starter considerthis1
(@considerthis1)

9 years, 4 months ago

Good Morning CrouchingBruin,
Sigh. The technical side of websites is very nearly overwhelming.

Yesterday when the fellow on Twitter showed me a picture from my site, compressed by way of blurring background to the main image, I saw that it was identical, or nearly so, to the actual images on my most visited page.

I worked really hard redoing all those images to have as much definition as possible, and I disabled “ShmushIt” so that the full detail of the images would be retained.

But, somehow the images were “compressed”.

I don’t worry about this because of the income from my Google AdSense ads, but because if Google doesn’t like my pages it drops my pages in search results.

My pages regarding vitamin B12 are different from the majority. Sigh. For years I didn’t use AdSense despite being major poor. Mostly they advertised the kind of vitamin B12 that is least costly to produce and least effective.

Now I use AdSense and I love having an extra $30 or $50 a month. My social security is less than $700, so the income is useful. I hope to grow it.

But, my main concern is that my pages be easily found by people who could benefit from the information. When people write to me about my pages they usually say that they’d looked at a lot of pages and then found mine, and mine were actually helpful. They say they began using the information and their health improved. That kind of thing.

Is the php of my site different from the CSS files you help me with? A different man on Twitter said he was able to do everything he needed with WP by adapting the php.

Thank you for telling me my site narrows when you try it. I’m going to stop worrying about that, now. 🙂 Thank YOU.

Well, best I get to it…

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘A "responsive" question’ is closed to new replies.