Jump to content
brightonkeller

Optimize page speed, choosing layout method, and device compatability

Recommended Posts

brightonkeller

hi there again!

 

Ok, so there's this issue that I've been dealing with for a very long time, but I can't quite figure out how to solve the issue. To put it simple, I want pretty and high-quality images, but I also want a super fast site. 

 

When doing a google page speed test, the number one issue is "serving scaled images." Currently, I have my pagelines setting set to respond to the browser (%) and full-width section. I typically try and save ALL My images in photoshop (save for web & devices) in either PNG or JPG with a width of 800 or LESS. My content area (including sidebar and content) is 1032 pixels and my content column is set at 816px.

 

Is 800 too wide of an image for optimal page speed? Even so though, why is the web browser having to "Scale" the image, when there is plenty of content area. Should I change the setting? I figured the % full width combo would be best for making my blog easily viewable on multiple devices, screens, and what have you. 

 

I would really like to get a handle on this issue. If you have any suggestions for the best options, please let me know. If this means I have to go back and re-size all 800+ images on my blog then so be it. I just want the best reader experience.

Share this post


Link to post
Share on other sites
Rob

Hi Brighton,

 

With images, you should consider that there's at least 60px worth of padding and margins within the content area.  So when you're loading an image of 800px in an 816px wide area is going to cause problems, particularly in IE.

 

Internet Explorer doesn't do image scaling the same way that other browsers do it.  So, looking at your site in IE shows quite a mess as you'll see in the attachment below.

 

I'd recommend resizing the images down by at least 60px width in Photoshop and replacing them.

 

Next, as lovely as your site is, you may want to consider using modals for your images or, a photo gallery within the posts.

 

Another consideration is that you could significantly reduce load time by publishing one image only in your excerpt on the homepage or just the thumbnail (even better) and let your visitors go to the full post to see the rest of the images and content.  You can make a thumbnail any size using two things:

Dashboard > Settings > Media and a plugin called Regenerate Thumbnails. That would give you the effect of the title, a nice large image and a short text blurb to entice readers to the full article.

 

The benefit of this is visitors would be more likely to scroll down to see what else is there.

 

post-6-0-81356100-1362342801_thumb.jpg


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
brightonkeller

yeah i've noticed the IE issues. 

 

but what about the fact that i have it set on %? should i change my layout mode? 

Share this post


Link to post
Share on other sites
brightonkeller

and regarding the thumbnail idea, I've considered this....it's just that I know it can be done. I know that there are other people who do exactly what I do (having a ton of images) but their sites are faster. I would like to avoid having to redirect my readers to another page to read an individual post if possible 

Share this post


Link to post
Share on other sites
Rob

No, you won't need to change the layout.  The percent is fine, just adjust the images themselves down by 60px, not the scaling.

 

As I mentioned, IE doesn't cope with scaling, so it bleeds the images under the sidebar.

 

If you want to include the images full size, that's fine, of course.  The site loads in 3.84 seconds as it is, which is not bad.  While 2 seconds or less is optimal, your site still loads faster than 42% of other sites.

 

Remember that by resizing the images in Photoshop and replacing these extra-large ones with images that should fit the full-width of the content are, you'll still shave off quite a bit of memory.

 

CDN too, will help in your case, because of the large number of large-sized images.

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×