Advertisement
  1. Code
  2. Magento
Code

Increasing Speed and Adding Rich Snippets in Magento

This post is part of a series called Magento SEO.
Magento SEO: Optimizing Pages and Avoiding Duplicate Content Penalties
Magento SEO: Internationalization and Extensions

So far in this series, we have made most of the required steps for on-site optimization. Now, in the third part of this series, you'll learn how to optimize your Magento installation to reduce page load time, and how to integrate rich snippets to make your search results look more professional.

Increasing Speed

Reducing page load time is a concern for all web developers. Magento, being a giant of a CMS, is not very fast, but making some small modifications can increase its performance.

Reducing page load time is necessary not only to improve user experience and reduce bounce rate, but also to help you rank well in search engines. Since 2010, Google gives special importance to a website's page load time in determining its page ranking. Here we’ll briefly discuss some quick and feasible ways to reduce the page load time of your Magento store.

The fastest and easiest way to make your Magento site fast is by making some small changes in the Magento admin panel. First of all, we’ll enable the Magento cache. This small step alone will reduce page load time by 30% to 40%. 

When the Magento cache is enabled, Magento does not have to load all of the page resources from the servers at each page request. To enable Magento cache, go to System > Cache Management. Select all cache types and from the top-right corner drop down select Enable and submit.

Cache management

Secondly, we need to merge our CSS and JS files prior to page rendering. We’ll go to System > Configuration > Developer. Here you’ll see Merge JavaScript Files and Merge CSS Files. Set both these fields to Yes, and hit Save.

Merge JavaScript and CSS files

This merging of CSS and JS files will reduce the number of requests to the server while the page is loading. This will again substantially reduce page load time.

Next, we’ll run the Magento compilation process. The compilation feature of Magento will compile all Magento files to create a single include path for increased performance. This reduces page load time by 25% to 50%. 

In order to use this tool, the directory includes and the file includes/config.php must both be writable. To initiate the compilation process, go to System > Tools > Compilation. In the top-right corner, you’ll see the Run Compilation Process button. Click on it, and you’ll be done.

Run Compilation Process

Next, we have a few advanced steps for reducing page load time that require changing content in the .htaccess file. There could be many .htaccess files in a Magento directory, but here we’ll edit the one located in the root directory. 

Through the .htaccess file, we’ll first do the content encoding, which will compress the file before sending it to the requesting agent. This will reduce file download time. Secondly, we’ll add expiration duration to headers. This means that while downloading resources, the browser will check whether the headers have expired. If they have not, then the cached versions will be used.

To enable compression, uncomment this line of code in your default .htaccess file, i.e. remove the # before php_flag zlib.output_compression on:

Next, to set gzip compression into action, we’ll add these lines into the .htaccess file:

Lastly, let us place an expiration limit on the headers, by adding this code into the .htaccess file:

One very important thing to consider for improving the speed of your Magento store is the choice of server. This Tuts+ article does a great job of explaining the factors you should consider to ensure your server choice is a good fit for Magento.

Implementing Rich Snippets

Now it's time to devise a way to implement schemas—or rich snippets—into our Magento store. They will not only make your search results look more professional and help them stand out, but they're also likely to increase the click-through rate on search pages. 

The rich snippets we’ll integrate in this tutorial are product, offer, and aggregate rating, and in the end I'll give you some resources on implementing breadcrumbs and organization schemas.

By default, the results in search engine result pages look like this:

Default search engine results

Through implementation of rich snippets, they can stand out and look like this:

Rich snippets in search engine results

Please be aware that implementing these snippets will require editing template files. You will need to have some basic understanding of HTML and PHP to implement them. Also, do make sure that you keep a backup of each file before editing it.

We’ll start by implementing the product scheme. Open up this file in your editor: app/design/frontend/[package]/[theme]/template/catalog/product/view.phtml and add the highlighted code into the product-view class.

Now let’s tag the product name, description, and image. To tag a product name, find the h1 tag containing the product name, and add the following code in it:

Now to tag the description, find the product description div and make sure it includes the attributes in the following code:

Next, in app/design/frontend/[package]/[theme]/template/catalog/product/view/media.phtml, find the image tags (you’ll find two instances of them on lines 40 and 62 if you are using the default theme), and make sure that they include the following:

Now, we’ll add product aggregate rating information. For that, open up this file:

app/design/frontend/[package]/[theme]/template/review/helper/summary.phtml

Replace the complete code of this file with the code given below:

Now to display product offer scope, open the following file:

app/design/frontend/[package/[theme]/template/catalog/product/view/type/default.phtml

Add this code at the start of the code, after the initial comments (which should be around line 28):

And at the end of the file, add this code:

</div><!—Offer Div ends -->

To add the price, open this file:

app/design/frontend/[package]/[theme]/template/catalog/product/price.phtml

Make sure you add the proper attributes for the code in each instance of the classes price and regular-price. For each instance of span with the class price we’ll add the highlighted itemprop tag in it:

Likewise, for each span with class regular-price, we’ll add the highlighted code in it:

Using techniques like this, you can also add breadcrumbs to your rich snippets. An excellent tutorial on this is Google Rich Snippets in Magento. Don't forget to test simultaneously while implementing these schemas. You can use the free testing tools of Google and Bing for testing purposes.

Once you have implemented all these rich sinppets into your Magento store, you’ll notice a significant rise in your website traffic if you are already ranking well in search engines.

Conclusion

So far, we should have a fully SEO-optimized Magento website with very good page load time and professional looking search results. 

In the next article in this series, I’ll explain some SEO considerations for creating a multi-store setup for Magento, and give a quick overview of some useful Magento extensions for SEO purposes.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.