PostPin image speed and scrolling/load more issue

[sarahsprague 0]

So I'm having a couple of issues with PostPins that maybe I'm doing something wrong or maybe they're an issue with the plugin. 1) The images loading into the PostPins seem to be the full 9 megapixel image and not a thumbnail, which would make the page load much, much faster. Is there something I should go back and fix or change in the code to make them thumbnails since all of the images are coming from the featured image in the posts? 2) When using both the load more or infinite scrolling, the next batch of PostPins seems to load in a weird tile way under the first batch and then the page has overlapping PostPins. (This is true with all browsers and with different computers.) Eventually with some scrolling, they format correctly, but if scrolled too fast, they get jumbled again. Here is a screenshot: Maybe this is related to the slow image loads? Anyway, thanks for your help.

[mackenzie 12]

Sarah - Are you using Featured Images at all on your posts?

[sarahsprague 0]

Mackenzie: Most of them, not all. 90%.

[Rob 547]

Hi Sarah, If you use a feature image greater than 50K in size, each time the post loads, it's adding that plus the minimal file size to the local computer of your users/visitors. If you're adding images of 2Mb plus for multiple posts and then attempt to use a product like Post Pins, which pulls the feature image, then who ever visits your site will have a tough time loading the page. In Dashboard > Settings > Media, you must have increased the default size from 2Mb upwards and increased the size of the feature image (thumb). This is going to crash many a visitor's browser by using up available memory, resulting in people not returning. I have tons of memory and still your page takes quite a long period to load. If you test with Pingdom.com, you'll see that your site itself loads in under 1.3 seconds. The rest of what you have in the page... particularly the images, bring the load time into hundreds of seconds. Currently, it's counting at 950 seconds and going http://tools.pingdom.com/fpt/#!/pSxCB5HjN/http://sarahsprague.com/ Yes that's more than 13 minutes. No one would wait for any page to load more than 2 minutes, nevermind 13 and counting. I'd suggest editing each image. Create one for the post content area of no more than 1200px wide and one for the thumbnail no bigger than you need for a slider, but only if you use slides based on categories. If you don't, then make your thumbnails 400px square and no bigger. You really will cut load times like that. Make sure you don't make the thumb more than 250px square viewable. You'll need a graphic editor, but rest assured this is the best solution. If you look in IE, you may even see that your feature images inside posts don't resize, breaking the site. So, your solution is clear. Resize each image. Create a thumb image separately and reload.

[sarahsprague 0]

In my media settings, the thumbs are set at 150 x 150 and the max for others is 1024 X 1024. I didn't have this loading issue when it was just the typical blog style and my front page was set to have 25 posts load at a time before, the same # as the PinsPosts. Not really thrilled about the idea of going back and having to make thumbnails for a few hundred posts, especially if I don't know if it's going to solve the issue of how the "load more posts" pins are misbehaving.

[Rob 547]

Did you previously use anything to include the feature image, such as NextGen Gallery? Please understand I don't want to put you or anyone through added steps, but presently when PostPins loads, its taking forever to load the images. Last night, I had to give up after 12000+ seconds. I'm afraid PostPins is working correctly, but the image source is loading huge images. Going to any post, beyond the postpinned page, I'm seeing the images, and on viewing, it's clear the image is gigantic.

[sarahsprague 0]

Nope, just used the featured image feature in Wordpress, and all images within posts are set to be about 640x360. It's interesting your load time was that long, because I had friends in other cities/computer set ups/browsers all check on this too and while they also had long load times, they had nothing close to the length of time you said the page was taking to load. I'm going through and resizing the first 50 featured images now just so I can see if that helps with the weird overlapping tiles being loaded, but past that if it's still happening I'm going to have to give up on this feature.

[mackenzie 12]

How big are the original files? For example I adjust my images to 1000 x 800 before uploading them and then use WordPress for the Thumbnail, Medium and Large size. Are these images hosted within the same server/location as your website?

[sarahsprague 0]

So I'm about 60 featured images into redoing all the thumbnails which is helping with the load speed, but what I am finding is that if I use the "Load more posts" AJAX Postpins are repeating with each new load, no matter if it's loading 10, 15 or 25 Postpins at a time. (This doesn't happen with infinite scrolling.) Also, still having an issue with the PostPins overlapping some when loading more, especially in Chrome. Mackenzie - Featured photos all hosted on site server.

[Rob 547]

Sarah, The "Load more posts" will refresh the page and should add an additional group of postpins. Have you rechecked the Pingdom test to see if it's taking a long time still? I just ran it and now you're down to 4.66 seconds with an excellent score of 86/100 and 1Mb page load. So obviously, it's doing well.

[sarahsprague 0]

So I've gone through and redone all the featured images to be much smaller and have removed the featured images from everything else for the sake of time at the moment, and it's loading at a speed that's manageable. Rangelone - It's not really refreshing the page as it's just adding the next batch of Pinposts twice with each load more. This is true across all Firefox, Chrome, Safari and IE. If I switch to infinite scrolling, after a couple of loads it says no more pages to load when it's only about 75 posts in. It didn't do this before, so I'm having a hard time pinpointing the error. EDIT - I also just noticed that the PostPins are breaking words the in post titles into continuations ("delicious" becomes "deli-cious") depending on the browser settings which looks pretty sloppy. Anyway to change the styling so the box just adds a line?

[Danny+ 1,327]

Hi, I have just visited your website and I was unable to see any post title that were broken into continuations such as delicious into deli-cious. Has this issue been resolved? Also, if you experience any issues can you try and disable all non-PageLines plugins and see if this resolves the issue(s).

[sarahsprague 0]

Danny - No, I fooled around with the PostPin size (upped to 300 px) so you'd be less likely to encounter them and that seems to have helped (eliminated in Chrome?) but it still happens in Firefox, Safari and IE in both Macs and PC with various resolution settings. The plugins I have installed; Jetpack, Easy Recipe, Akismet, Pageline sections,Tumblrize, didn't effect the headlines and loading issues previously.

[Rob 547]

That issue is the result of a simple text wrap which can be controlled by font sizes, adding a no-wrap element to the text CSS or other ways. Now I do see the issue about the repeating posts. I use PostPins on my site and have the settings for Post Pin Loading using "Use Load Post Link (AJAX)" and the Pins Category/Posts Mode set to " *Show All* ". My Post Pins load properly; with images showing, no wrapping and no repeated posts. What exactly are your settings for those?

[sarahsprague 0]

Rangelone - Exact same settings, both under Site Defaults and Blog page.

[Danny+ 1,327]

Hi Sarah, Did you try disabling all plugins ? Did this have any effect at all ?

[sarahsprague 0]

Danny - Yes. Had no change on the behavior. Disabled: Akismet, Easy Recipe, flickrRSS, Google Reader Stats, Jetpack, Pagelines Sections, Regenerate Thumbs, Tumblrize, WP Importer, WPAudio. So, we're back at the overlapping Postpins in Chrome and Safari, and repeating PostPins with "Load More" across all browsers and infinite scroll stopping about three pages of PostPins.

[Andrew 207]

I would need to see a live link to help out with this one... There is some JS funkiness happening, probably content related, but i'd need to inspect to be sure.

[sarahsprague 0]

arpowers - I'm sorry, I don't follow. Unfortunately I don't know anything about JavaScript to provide what you're looking for. But I think I found the issue. (Or more accurately, a friend of mine looking at it with a page inspector saw what I missed.) It was loading twice. Fixed it by leaving the fields all blank in the site default settings and setting preferences in blog page. Also fixed the infinite scroll issue. Thanks everyone.

[Danny+ 1,327]

Hi Sarah, Thank you for informing us that the issue has been resolved.

[Martin Bay 20]

Why not used thumbnails as featured images images for PostPins?