Responsive Website & SEO

Marketing
1

Hi everyone ,

I’m currently in the process of optimizing my portfolio subsite. It lives on a subdomain , it’s one page in size and it contains almost no text.
However it has 40+ of images and their alt tags each having a small description. Google has already indexed the images and I am slowly climbing up it’s ranking.

However the speed chapter is suffering - the load time is ~5 seconds and that’s kind of a deterrent. Thanks to my usage of a CDN I can’t use Adaptive Images .

My first though is to use the CSS media queries and serve a sized image based on the user’s resolution. Right now the images adapt but their size is often ~40 KB for small ones and ~200 KB for the large ones. This would boost speed significantly , especially for mobile users but it would rob me of those all important ALT attributes that Google loves so much.

The only way to alleviate the disappearance of the ALT attributes is to replace them with TITLE attributes . However after doing some of research it seems that Google ignores them because black hats tend to abuse them. Does anyone have any white hat solution to this ? I mean with the ALT tags one and the images in the background then Google would have next to nothing to index :frowning:

My second idea I would go for is putting the images together in several sprites. This would cut the number of requests to just a few and also shave off another second or so. However the same problems would rise with a even higher risk that Google would be unable to understand something out of the images.

My 3rd idea is to use a preloader just like Google’s own app store. So while the images are loading a small circle is spinning keeping the user on the page (hopefully). With some extra JS I could have the spinner show up only when the user should have a image in sight but doesn’t. This would probably keep the user happy but the speed is still sluggish , Google punishes me for slow speed and I’m not sure if the Google Bot would be able to index my images.

My 4th idea is to use JS to create the IMG tags on the fly . This would allow me to adapt the images for the user’s resolution. This methods looks pretty good on paper but I’m not sure if I should go for it since for it to be effective I would require me to violate the code separation principle. Plust it does nothing for speed.

My 5th and final idea is to use JS or PHP to measure pingtime . Ping is closely connected to Internet speed so if the user would have a good pings such as a good desktop or Google Bot then the website would be served as is and if not a special version would be served with sprites , preloaded and sized images. The biggest downside is that it’s script heavy and good old Google might consider it cloaking which would be a disaster in terms of SEO.

I am known to my peers and clients for making websites that load in less than a second and the portfolio ruins that a bit but then again having no SEO might hurt me more in the long run. Please advise - the more detailed your replies will be the better :smiley:

Thank you for your time . I really appreciate the effort.

2

This is a big issue on the web. My preferred solution is a really simple one:
http://blog.netvlies.nl/design-interactie/retina-revolution/

In essence, what you do is set the dimensions of the image very large, but then drastically reduce the image quality. Once the image is resized (via CSS or HTML or both) it looks nice and crisp (and works great on retina screens too).

3

I am currently experimenting with this technique and it gives me some very interesting results. I believe that by combining this technique with serving sized images via JS or CSS (still experimenting) , SPDY and an improved CDN I can push down the loading time to under 2 seconds.

Thank you very much for your answer. If you would like to formulate an opinion on any of the points I have posted that would also be helpful :slight_smile:

4

After more experimentation and comparison I arrived to this conclusions :

You can reduce the size by up to 50%

Writing in the image will always suffer no matter how much you try to preserve them

Although the overall quality stays the same there is a noticeable drop in how sharp the image feels but his is only for PC screens not for phones and tablets

5

Hm, that’s a good point, although I’m not a big fan of that anyway. Better to have any text as real text IMHO.

There is so much happening around images at the moment—including proposed new HTML elements—that it’s hard to say where things will end up. I would be inclined to stick with inline images with alt attributes, personally, rather than try to use titles, which probably will have issues in various devices.

Or you could just use captions instead, perhaps along with the <figure> element.

6

True but you can’t take way the text from logos and website templates.