异步加载图像

Closed. This question is off-topic. It is not currently accepting answers.
                </div>
            </div>
        </div>
                <hr class="my12 outline-none baw0 bb bc-powder-2">
            <div class="grid fw-nowrap fc-black-600">
                    <div class="grid--cell mr8">
                        <svg aria-hidden="true" class="svg-icon iconLightbulb" width="18" height="18" viewbox="0 0 18 18"><path d="M9.5.5a.5.5 0 0 0-1 0v.25a.5.5 0 0 0 1 0V.5zm5.6 2.1a.5.5 0 0 0-.7-.7l-.25.25a.5.5 0 0 0 .7.7l.25-.25zM1 7.5c0-.28.22-.5.5-.5H2a.5.5 0 0 1 0 1h-.5a.5.5 0 0 1-.5-.5zm14.5 0c0-.28.22-.5.5-.5h.5a.5.5 0 0 1 0 1H16a.5.5 0 0 1-.5-.5zM2.9 1.9c.2-.2.5-.2.7 0l.25.25a.5.5 0 1 1-.7.7L2.9 2.6a.5.5 0 0 1 0-.7z" fill-opacity=".4"></path><path opacity=".4" d="M7 16h4v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1z" fill="#3F3F3F"></path><path d="M15 8a6 6 0 0 1-3.5 5.46V14a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-.54A6 6 0 1 1 15 8zm-4.15-3.85a.5.5 0 0 0-.7.7l2 2a.5.5 0 0 0 .7-.7l-2-2z" fill="#FFC166"></path></svg>
                    </div>
                <div class="grid--cell lh-md">
                    <p class="mb0">
                        <b>Want to improve this question?</b> <a href="/posts/15547765/edit">Update the question</a> so it's <a href="/help/on-topic">on-topic</a> for Stack Overflow.
                    </p>
                    <p class="mb0 mt6">Closed <span title="2013-03-22 11:08:18Z" class="relativetime">7 years ago</span>.</p>
                </div>
            </div>
    </aside>

I have read it is good for SEO to do some URL access in an asynchronous way. I have seen some good pages that load their images this way but I am not sure whether it is worth it to take the time to do so.

I am developing an ecommerce site and, of course, I need it to be as well positioned as possible in Google. For my product catalog, and product details pages I can put this into practice but as said I don't know if it is worth it.

Anyone with experience could tell me if I should or shouldn't and which are the advantages and disadvantages of doing it one way or the other?

</div>

For SEO a good rule of thumb is that your page needs to be usable in three seconds from the time that a user clicks on your site in the search engine results pages (SERPs). After about three seconds users start turning back to look for something else. Google takes note of this user defection and sites slower than three seconds start to fall for the queries for which they were ranking.

You can use tools like the Firebug plugin for Firefox to measure your site speed. Access your site remotely using this plugin and look at the net tab to see how long it takes to get the page to the "onload" state.

Getting your site faster than three seconds doesn't seem to have much impact on search engine rankings. You may find that it increases user engagement and conversions in other ways though.

The specific technique of asynchronous images that you mention is just one in a large arsenal of things that you can do. Asynchronous images is most appropriate for images below the fold that users don't see without scrolling.

You should also consider other options such as:

  • Image sprites
  • Gzip compression on the server (mod_gzip)
  • CDN services
  • Compacting and minimizing HTML, JS, and CSS (using YUI Compressor or similar)
  • Combining and inlining JS and CSS

Install browser plugins such as Google Page Speed that will examine your site and give you a whole list of relevant suggestions.