Search code examples
mobileseodesktoppagespeed

Faster mobile site than desktop

Google and other search engines have speed as a ranking factor. They think mobile sites should load below 1 second.

Different speed, mobile and desktop

Is there a good method to load the site with different speed? I can check with PHP what device that are used but nowdays sites are responsive with CSS.

Mobile site with speed

What is the "correct" way to make the mobile site much faster than the desktop version? How do I load the images differently when the site is responsive via CSS?

Solution

  • You can take a look on Yslow on website performance best practices and rules..

    (taken from Yslow):

    • Minimize HTTP Requests
    • Use a Content Delivery Network
    • Avoid empty src or href
    • Add an Expires or a Cache-Control Header
    • Gzip Components
    • Put StyleSheets at the Top
    • Put Scripts at the Bottom
    • Avoid CSS Expressions
    • Make JavaScript and CSS External
    • Reduce DNS Lookups
    • Minify JavaScript and CSS
    • Avoid Redirects
    • Remove Duplicate Scripts
    • Configure ETags
    • Make AJAX Cacheable
    • Use GET for AJAX Requests
    • Reduce the Number of DOM Elements
    • No 404s
    • Reduce Cookie Size
    • Use Cookie-Free Domains for Components
    • Avoid Filters
    • Do Not Scale Images in HTML
    • Make favicon.ico Small and Cacheable

    If you follow these already and still get a load time > 1s (you can check using this), you can look further on Responsive Images, there is a good read on that here, which basically means depending on the width of the browser you serve different sizes of images, which makes sense because for example why would you serve a '3000px' image on a '320px' mobile browser?

    How, you say? One simple example is by using User Agent strings to determine if it is from a mobile/tablet device.. and serve the appropriate size of images depending on it. Take note however that UA strings are not 100% accurate and can be spoofed.

    ** If you happen to be using PHP, there is this library called mobiledetect that might help you..
    ** If you want to detect if the user is using 3G/2G, this SO question might help..