Mobile optimization checklist for Magento

by lsd / Filed under: Magento Themes, Mobile Web Design

This checklist is written for our Magento Mobile Theme but some items are applied to desktop site too.

Fast site speed is good SEO – Google has incorporated site speed in search rankings. We hope you can work on the optimization more vigorously if you haven’t already done so.

Before you get started, install Yslow and Google Page Speed for Firefox Browser if you haven’t already done so.

Javascript Minification

We have already taken care of the minification for the scripts that are distributed with our themes, however there is more you can do.

Firstly, Magento does not minified any of the Javascripts distributed with Magento package; some Magento users mistaken the JS Merge feature as the JS Minifier – they are not the same. The JS Merge feature reduces HTTP requests (and which is great) by grouping all scripts placed in the “page.xml” to one link, but it does not reduced the file size for each script.

Extension such as Fooman Speedster is great for CSS and JS minification, however if you can’t get the extension works for your server and if it breaks your site, try make the compression manually instead – and we strong recommend you do it, for that compressing all scripts that shipped with Magento package can get some 6 points score from Google Page Speed and YSlow, and significantly increase the page load.

We find these two tools useful:

A note on CSS compression: The mobile theme comes with 2 style sheets, one is the main css file and the other for CSS3 support which most elements are with vendor prefixes. Vendor prefixes will break the compression therefor you should never compress the “css3_support” file. As for the main style sheet, it has already been compressed, an un-compressed version has been made available for you should you needed to edit the main style sheet.

All scripts that come with Magento package are located at “js” folder and “skin/frontend/base/default/js”.

A caveat: scripts in “js/mage”, “js/varien” and “skin/frontend/base/default/js” are from Magento, and each time a new version releases, these scripts may get updated too, so you will have to re-do the minification.

Other open source scripts such as Calendar, Prototype, Scriptaculous and TinyMce may get updated too, so if you experience js error after an upgrade, you may want to go over those scripts making sure none of the minified versions are out-dated.

Image Optimization

Always declare “width” and “height” for inline image (in both CMS pages and Static Blocks) – if an image is to be 300 by 200 pixel, do not make the dimensions larger.

For product images, the “widths” and “heights” are declared in the template files. If you want to serve different images for your Mobile store, we recommend the following dimensions:

  • Base Image (for Product Gallery): 250px x 250px
  • Small Image and Thumbnail: 120px x 120px

Otherwise let the Magento built-in resize script takes care of it if the product images are to be shared with Desktop store. Note that because height attribute is declared (in our desktop Magento themes we removed the height attribute), although the resize script takes care of the proportion, it may not produce a desired result for image quality, therefore, you may want to make sure all your product images are of the same dimensions for width and height.

Optimized your image before uploading it to the server, or use an online tool such as Smush.it. For Mac user, we find the ImageOptim a wonderful tool for our daily workflow; PC user can find something similar with a quick google search.

More options isn’t always a good option. – think carefully before you enable a standard Magento feature or third party extension that may slow down the page load.

Optimize your Magento mobile site through subtraction

For a mobile website, every byte counts and we have worked very hard on the optimization for the theme, but there are more you can do and you should do. First and foremost, the mobile theme is built with an assumption that you want all the promotional and catalog browsing features (e.g., Compare, Add Wishlist, Mini-poll, Recently View, Up-sell, Cross-sell, Related Products, Review, Layered Nav etc…), and a more engaging homepage (Categeories listing, New Products and Bestselling modules). These are all good features to have, but for a mobile eCommerce site, you customer may not have the same browsing behavior as they do with your desktop version of site, and speed will always be the greatest concern, therefor we encourage you weight over the options carefully whether a feature should be kept for mobile version of site.

Features such as Mini-poll, Up-sell, Cross-sell, Related Products, New Products and Bestselling modules can easily be disabled – it’s very simple, e.g. if you don’t add a Cross-sell item, the block will not be activated.

Further optimization steps for Server, Database and Magento backend

  • Database

    Routinely clean up your site’s database for these tables, and if you have performed product imports, clean up these two tables too:“dataflow_batch_export”, “dataflow_batch_import” .

    Or do it programmatically if you are comfortable working with scripts: http://www.magentocommerce.com/wiki/groups/227/maintenance_script>

    Another place to clean up: your-ftp-server-where-magento-located/var/sessions

  • Magento Admin Panel

    • System > Cache Management – enable all caches once you site ready to go live. Each time you perform an upgrade or work on the template files, they need to be disabled. Note, if the theme you use has layout update for product listing, disabled “Layouts”. See reason here.
    • System > Configuration > Advanced > Developer : Set “Merge JavaScript Files” and “Merge CSS Files (beta)” to YES.

    • Enable “System > Tools > Compilation”. A caution: if it breaks your site or one of the function stops working, disable it. Similar to Cache Management, each time you perform an upgrade, it needs to be disabled.

      Our thought on Compilation, in our demo site, we have not enabled it as the site is constantly a “work in progress”, and we have not seen noticeable improvement on performance when we enabled it – YSlow and Google Page Speed do not give it a score either, however other has noted the Compilation helps improve the performance.

  • Server

    • gzip compression

      If your server allows Gzip Compression, add this to the htaccess – the one in the Magento root.

      # gzip compression.
<IfModule mod_deflate.c>
# html, txt, css, js, json, xml, htc:
  AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
  AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
  AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
# webfonts and svg:
  <FilesMatch "\.(ttf|otf|eot|svg)$" >
    SetOutputFilter DEFLATE
  </FilesMatch>
</IfModule>

      Note, you can find similar but with different favor of “IfModule mod_deflate.c” in the existing htaccess file which is not enabled by default.

    • default Expires header

      Add this code to the htaccess file

      <IfModule mod_expires.c>
############################################
## Add default Expires header
## http://developer.yahoo.com/performance/rules.html#expires
     Header set Cache-Control "public"
  ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault                          "access plus 1 month"
# cache.manifest needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest       "access plus 0 seconds"
# your document html
  ExpiresByType text/html                 "access plus 0 seconds"
# data
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"
# rss feed
  ExpiresByType application/rss+xml       "access plus 1 hour"
# favicon (cannot be renamed)
  ExpiresByType image/vnd.microsoft.icon  "access plus 1 week"
# media: images, video, audio
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpg                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"
# webfonts
  ExpiresByType font/truetype             "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType font/woff                 "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# css and javascript
  ExpiresByType text/css                  "access plus 1 month"
  ExpiresByType application/javascript    "access plus 1 month"
  ExpiresByType text/javascript           "access plus 1 month"
</IfModule>

      Credit for the above codes: HTML5 Boilerplate

Minify HTML

Many web developers will tell you it doesn’t worth it as the saving is of insignificance. YSlow and Google Page Speed think otherwise.

Note: If you webhost supports mod_pagespeed and it’s already running in your server, skip #3, server optimization.

Tags: , ,

Comments are closed.