AMP-Sitecore User Group Session

Last week i presented session on “Accelerated Mobile Pages (AMP) with Sitecore at SUG, Bangalore, If you are interested and want to get some introduction about AMP with Sitecore, you can find the session here-

Hope this helps.

Happy Learning 🙂

Advertisements

AMP Integration with Sitecore

In my previous post on AMP we discussed about what is AMP (Accelerated Mobile Pages) all about, advantages of using AMP,constraints and some of the basic things which we should consider while using AMP with Sitecore.

As part of this blog post- i would like to go further and see how the integration of AMP can be done with Sitecore.

amp-project

Before we start i want to re-iterate some of the rules and constraints that comes with AMP and obviously all for good reasons.

  • No inline styles
  • All CSS in AMP Page should not be more than 50 KB
  • No custom JS plugin (iframe)
  • Strict validation rules and etc.

We have completed one AMP implementation successfully and want to share how we executed it with Sitecore. We targeted home page as our primary landing page and based on the analytics data we had business idea was to start with home and get some performance improvements there.

Thanks to Sitecore stack exchange which gave me idea on how to get started with this- https://sitecore.stackexchange.com/questions/1597/how-do-i-implement-accelerated-mobile-pages-amp-with-sitecore

Here are the steps we followed in our execution journey.

  1. Create AMP specific device layout to separate AMP and Non-AMP page and we leveraged query-string parameter to differentiate the layout- in our case we used querystring “amp=true” for the same.AMP-DeviceLayout
  2. Sitecore Page layout- As next step we created a new Sitecore layout file which was different from the regular layout file, you can refer the basic version of AMP HTML here
<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Also, you can have the same placeholders what you have defined in regular layout file, thing which you have to make sure is that you are aligned with the HTML which AMP follows.In addition to this you have to add all the AMP plugins in your layout file, this is again based on what feature you are building as part of AMP page, some of the plugins which we used are:

  1. amp-sidebar
  2. amp-accordion
  3. amp-carousel
  4. amp-social-share

https://cdn.ampproject.org/v0/amp-sidebar-0.1.js
https://cdn.ampproject.org/v0/amp-accordion-0.1.js
https://cdn.ampproject.org/v0/amp-carousel-0.1.js
https://cdn.ampproject.org/v0/amp-social-share-0.1.js

3. Linking AMP and Non-AMP versions– In some cases, you might want to have both non-AMP and an AMP version of the same page, If Google Search finds the non-AMP version of that page, how does it know there’s an AMP version of it?

From https://www.ampproject.org/docs/fundamentals/discovery  – In order to solve this problem, we add information about the AMP page to the non-AMP page and vice versa, in the form of <link> tags in the <head>

Add the following to the non-AMP page:

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

And this to the AMP page:

<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

4. Renderings- Next step would be create separate renderings for the components you are planning to add as part of AMP version of your page. This is to make sure we can support both AMP and Non-AMP versions, prepare list of components that need to be converted to AMP and organize accordingly in Sitecore.

5. Set the presentation layout– Next step is to set the presentation of the page, in our case we had two presentations for the same page- one set for Default layout and one for AMP (Mobile specific) with different set of renderings.

6. Data Bind– As in our case page was already there- we didn’t do anything different to bind the data- we just pass the same data models to AMP renderings and we were all set. You just need to make sure you are calling correct renderings based on the device.

7. Test and Validate- Once you are done with the implementation you need to make sure that AMP page is working as expected, there ware two ways you can verify AMP page- in this case as we used different device for AMP with querystring- we just need to open the URL with correct querystring, so for example- if your page URL is http://www.something.com , then you can access AMP version of it using http://www.something.com/?amp=true

As part of your test you also make sure to run the validations to see if your AMP page version is aligned with the guidelines of AMP. In order to validate the page you can use browser developer console, for example- if your AMP page URL is http://www.something.com/?amp=true , you can append #development=1 to check for any validation errors- http://www.something.com/?amp=true#development=1, see the below AMP validation errors for ref:

validator_errors

8. Deploy–  Once the AMP changes are deployed it may take some time to crawl the page, and once the page is submitted to google you can see your AMP version in google search result with the lightening badge next to it.

google-lightning-badge

URL to verify if page is valid AMP or not- https://search.google.com/test/amp  and provide you AMP page URL.

Valid-AMP

Notes:

  • After the deployment we were able to see the AMP lightning badge in google search results- but few days after it was missing from google search results- we checked this and found that as content authors added some inline styles to one of the field which was making AMP not to submit the page to google because of AMP validation errors.
  • AMP can be used with both Mobile and Desktop, however it is more specific to Mobile user experience to get higher performance and engagement and reduce the bounce rates.
  • If you want your visitors to see AMP version even when the hit the page directly, this can be achieved by adding some device detection rules in Sitecore, we can identify the requesting device and based on which context device can be updated dynamically in Sitecore.

Next Step- As a next step we are checking on making AMP page responsive, but it depends on the components as some components heavily relies on custom JS plugins which can’t be integrated with AMP, there are several components available in AMP as well which can be leveraged, but if same UI & functionality can be achieved while making page responsive can only be confirmed after analyzing existing controls from AMP library- https://www.ampproject.org/docs/reference/components

Making AMP page responsive comes with an advantage that you don’t have to maintain two different versions of the page which make the maintenance part easy- but we should also make a note that we have to work within boundary of AMP guidelines- which sometimes can be a challenging part for responsive design.

I hope this would be useful for guys who are starting with AMP in Sitecore.

Please share your feedback and comments.

References:

Happy learning 🙂

Introduction to AMP and Sitecore

Performance of application is one of the important business KPI (Key Performance Indicators) which heavily contributes to the success of business.There are ways to improve the performance of the website like performing optimization, resources upgrade and etc.

amp

Apart from traditional approaches to improve the performance, there is a lot of buzz and talk going on for AMP (Accelerated Mobile Pages- powered by Google ) these days.

As per wikipedia– “The Accelerated Mobile Pages Project (AMP) is an open-source website publishing technology designed to improve the performance of web content and advertisements. The AMP Project led by Google is a competitor to Facebook’s Instant Articles,[1] and includes several other large search, social and web publishing platforms around the world.”

As part of this blog post– I would like to discuss if AMP can be leveraged for Sitecore applications, advantages and disadvantages and what are some key points to be considered before we plan to integrate AMP with Sitecore.

Advantages of AMP:

  • Speed and Performance-AMP provides a great user experience across many platforms
  • AMP complaint content always gets displayed first in search(organic search).
  • Increased mobile device site loading.
  • Boost in Ranking.
  • Reducing the page bounce rate and better conversions.

Constraints:

  • No custom JS/Plugins allowed, which can affect some of the execution efforts like Pagination, listing, search,etc..
  • All CSS in AMP Page should not be more than 50 KB.
  • Multiple Versions required (AMP and No-AMP).
  • Increased development time- Increases developer time in 2 times(AMP and Non AMP layouts).
  • Strict validation rules
  • Inline CSS styles.

To Consider:

Now, before we proceed for Integrating AMP with Sitecore, let’s check following:

  • Impact on Analytics and Sitecore Analytics?
  • How it affects the website functionality, like carousels, products and other features?
  • Impact on Personalization in Sitecore?
  • Do we need separate layout or can be managed with same default layout.

Though we know AMP is a performance booster, but it’s worth to check above points and do a analysis to understand the Integration.

Apart from just AMPiying your website another important factor is to analyze and understand what pages should be migrated to AMP like:

  • Home page
  • Landing pages and other top performing pages which contribute to the overall business.

Also, when when AMP should be served?- when user is trying to search contents from Google- via organic search(this is default behavior) or when user hit your page directly is a point of discussion and depends on business requirements, Let’s discuss above points as part of my next post on AMP.

Case Studies:

Here are some case studies are available and can be used as reference to understand it better.

I am very excited about AMP and it’s integration with Sitecore, i am pretty sure you guys are too?. I hope this give you a starting point and makes you think about AMP and how it can be leveraged with Sitecore.

References:

Happy learning 🙂

Troubleshooting Sitecore performance and optimization

Most of us might have faced issues with performance and slow Sitecore instance,I would like to share my experience with Sitecore troubleshooting which I have learned over the period of time, these are some of the things which I feel should be checked whenever we see the application has really some performance issues.

Trust Building:
This is one of the key factor of healthy business relation, we should make sure that application/business always meets users expectation, a non performing(from performance standpoint) site can’t guarantee a high ROI.

Here are few things i would like to mention to check the slow performing Sitecore site, and what can be done to fix it.

  1. Logs Reviews: 
    1. This is one of the wonderful feature which is shipped with Sitecore, and we should make use of it to check the performance of the application, regularly checking the logs can help us in fixing the issue well before in time before it becomes critical.
    2. Logs can give us most of the details which includes:
      1. Publishing details.
      2. Schedule task running.
      3. Any code error issue.
      4. Indexing or query issue.
      5. Issue with  MongoDB connectivity.
      6. Issue with SOLR server connectivity.
      7. Issue with SQL server connectivity
    3. Above are some of the details which we can review and proceed our investigation, it’s always better to have something in hand to troubleshoot, instead of randomly looking for something.
  2. Enable JS,CSS Compression:
    1. This helps in boosting the performance of application, by reducing page request to server or browsing the pages.
    2. We can make use of static and dynamic content compression in IIS.compression
  3. Sitecore Debugging:
    1. We should make use of Sitecore debugger tool which can be found in Page editor, this gives a very good understanding and statistics around different components being used in the page.
    2. Helps in understanding which specific component(sublayout/rendering) takes how much time to render on the page.
    3. One of the early troubleshooting which every developer should start doing right from the time we start experiencing performance issue in local development environment.
    4. This tools helps in narrowing down the problem with code,and thus helps in putting all our energy and time in right spot.sitecoredebugsitecoredebugprofile
  4. Sitecore Schedule tasks:
    1. Always try to review the Sitecore schedule tasks, and see if there is any task which is running and which is not expected?
    2. Make sure to review all the agents which is present under <agents> section, in web.config or using custom patch(if used).
    3. Another thing to note, we should also consider updating the frequency of that task execution by updating the time,if schedule task is not required we should disable it.
    4. See if the schedule task is triggering site full publish, this can be a serious issue in production environment,as this can clear all cache which can slow down the site.
    5. Keep close watch on the logs for anything related to schedules tasks.
  5. Indexing Strategy:
    1. Revisit the indexing strategy which is being used in the application, see if the full index rebuild is in place for any item publish event.
    2. Try to update the strategy if it’s not as per the requirement, or if it’s over killing.
    3. Please review this document for anything related to available indexing strategy-  https://doc.sitecore.net/sitecore_experience_platform/setting_up_and_maintaining/search_and_indexing/indexing/index_update_strategies
  6. Image optimization:
    1. I have seen this issue with several applications, just because the images are not properly optimized, they end up taking more resource bandwidth and resulting poor user experience.
    2. Remember, this is the time of mobile, and any poor performing mobile site can be a serious issue to client.
    3. We should always train and educate our client and content authors to make use of optimized images, and trust me they will listen to you.
  7. Indexes:
    1. This is one of the critical and important part of any Sitecore application, try to use indexes as much as possible when it comes to fetching details from the repository or searching of the items based on specific condition and filters.
    2. Try to perform all the operation directly in the query like:
      1. Pagination.
      2. Sorting
      3. Filters
    3. Avoid fetching all the results and then applying business rules to filter it based on specific condition, as I mentioned try to do most of the processing directly in query level.
    4. I had seen issues in application which was not performing well, just because of not making true use of indexes,review you index definition and configuration,and see if it has everything which is expected for it.
    5. Try to use create and use custom indexes for any custom feature, it’s always better to have one.
    6. Use of computed fields can be considered, this helps in executing any complex business logic while querying the results.
  8. Site publish:
    1. We should not trigger complete site publish in production environment,unless and until it’s very much required, this can be a costly operation, as this clears all the cache.
    2. Try to publish only areas which are required, we can trigger full site publish in development environment, but should be done carefully in production.
    3. Use Smart or Incremental Publish.
  9. Caching:
    1. Configure sublayout(s) and rendering(s) to use caching, this can give a real good browsing experience to site users.
    2. Clearing cache is something which should be considered in production environment, when trying to publish items this will clear the cache and can slow down the application performance.
  10. GetDescendants:
    1. Use of GetDescendants is one of the costliest operation we can think off, we should always try using indexes or fast queries if possible and required.
    2. Revisit your code and search if there is any reference to GetDescendants, and update it if required.
  11. No of Items under one node:
    1. Try not to have more items under single node/item, and break it down using several sub folders or items.
    2. This helps in giving good content editor experience.
    3. make use of item buckets wherever applicable.

Few important things to follow:

  1. Write good code.
  2. Proper unit testing.
  3. Get your code reviewed.
  4. Follow best practices.

This helps in fixing some of the issues before it goes to QA.

Please also refer Sitecore recommendation for performance optimization : https://sdn.sitecore.net/Articles/Administration/Sitecore%20Performance/Optimizing%20Sitecore%206%20and%20later/Optimizing%20Performance%20in%20Sitecore.aspx

I hope this helps someone in troubleshooting Sitecore performance issues, please let me know if you have any questions or comments, happy to discuss.

Happy learning 🙂