Umbraco Archives - Blog IT

Straight A’s in WebPagetest with Umbraco

André Santos — Tue, 27 Nov 2018 21:40:06 +0000

Before launching a new website, there’s a checklist I go through, to make sure that everything is ready. One of the items in my checklist is to test the website against WebPagetest.

WebPagetest is a tool that was originally developed by AOL for use internally and was open-sourced in 2008 under a BSD license. The online version at www.webpagetest.org is run for the benefit of the performance community with several companies and individuals providing the testing infrastructure around the globe.

This tool tests any website against 6 major performance affecting factors, and provides a myriad of graphs and logs that make abundantly clear what might be slowing down your site.

In this post I’ll provide ways to make your site get straight A’s in WebPagetest.

Setup

To start this off, let’s setup our environment. We’ll just need the following:

Visual Studio 2017
Microsoft Azure account

In Visual Studio, let’s create a new empty ASP.NET Web Application project. Then, we’ll need the latest and greatest Umbraco NuGet package (I used version 7.12.4). Once it finishes installing, just launch the website and install Umbraco with all defaults. This will bootstrap Umbraco with the Starter Website, which we’ll use as our “guinea pig” for WebPagetest.

Next: publish it! We can use the publish wizard to automatically create our new WebApp and SQL Database in Azure. Before installing Umbraco in Azure, we’ll need to change the Web.config so that the install wizard is run again (I use Filezilla to change it in Azure):

Clear the Umbraco version number:

Clear the Umbraco connection string:

With these changes in place, we’re good to go. This time, we’ll not use the defaults in the Umbraco install wizard, since we’ll want to use the SQL Database we’ve just created in Azure.

First test

For our tests, we’ll use the people page of the Starter Website. This is the score I got with a standard (S0) database and a basic WebApp:

Since this is a very small site, only used for demonstration purposes, half of the metrics are already cleared! However, this is not usually the case for bigger websites. For this reason, I’ll still present some solutions to improve the grade for these metrics.

First Byte Time

These test measures the time it takes for the first byte to reach the client’s browser after the initial http request.

There are two main factors that influence this result:

Server power
The webpage complexity (integrations with external services, complex logic involved, etc)

How to get an A

The easiest way to mitigate this problem is by caching. You can see how to do output caching in Umbraco by reading this old post of mine: https://blogit.create.pt////andresantos/2016/06/30/umbraco-and-donut-output-cache/.

Keep-alive Enabled

Keep alive is a method to allow the same tcp connection for HTTP conversation instead of opening a new one with each new request.

How to get an A

This setting is active by default in IIS, so, it’s also active by default in Azure WebApps, so it’s easy to get an A!

Compress Transfer

Gzip compresses your webpages, style sheets and javascripts, before sending them over to the browser. This drastically reduces transfer time since the files are much smaller.

How to get an A

Just add this setting to your Web.config file:

Compress Images

Image compression is minimizing the size in bytes of a graphics file without degrading the quality of the image to an unacceptable level.

How to get an A

In Umbraco, to get an A in this grade, you need to do two things:

Crop every image and use srcsets where you can
Use the PostProcessor plugin for Image Processor

Cropping an image is easy in Umbraco:

In order to use the PostProcessor plugin, you just need to install it via nuget: https://www.nuget.org/packages/ImageProcessor.Web.PostProcessor/1.3.1.25.

Cache Static Content

Static content is content that changes rarely. For this reason it can be cached in the user’s browser to avoid downloading the same file over and over again.

How to get an A

Just set the time it takes for the content to expire in the user’s browser and add extra mime types if you want:

Effective use of CDN

A content delivery network (CDN) refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content. A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos.

How to get an A

In Umbraco, you can achieve this last grade by doing two things:

Use an Azure Blob Storage for media storage by installing this nuget package: https://github.com/JimBobSquarePants/UmbracoFileSystemProviders.Azure.
Create an Azure CDN for serving these blobs through a content delivery network.

After creating an Azure CDN service and waiting about an hour for it to be available, the following presents my configuration for the media assets to be provided by it:

Conclusion

So, if you followed these tips correctly, you’ll be able to run WebPagetest and get the same result as I did:

You can find the complete report here: https://www.webpagetest.org/result/181127_2A_bea6941dcd20d38ab54c29409fca9363/.

The post Straight A’s in WebPagetest with Umbraco appeared first on Blog IT.

A Solution to DataTokens must contain an ‘umbraco-doc-request’ key with a PublishedContentRequest object

Mário Nunes — Mon, 10 Sep 2018 15:42:48 +0000

Hi,

If you are experiencing “DataTokens must contain an ‘umbraco-doc-request’ key with a PublishedContentRequest object”, you might have configured static routes with RouteTable.Routes.MapRoute(…).

Using the default UmbracoHelper Umbraco from Umbraco.Web.Mvc on these static routes might cause this error.

The solution is using new UmbracoHelper(UmbracoContext.Current) instead.

The post A Solution to DataTokens must contain an ‘umbraco-doc-request’ key with a PublishedContentRequest object appeared first on Blog IT.

Adding an Angular app to your Umbraco Website

Mário Nunes — Sat, 10 Mar 2018 22:11:23 +0000

What problems does this solve?

This enables you to have an Angular application alongside your Umbraco website, on a specified route.
The Angular App can be protected by the Authentication of your website, if you have it. And you can make use of surface controllers for authenticated requests.
The routing of your app will work as intended, for example, if your Angular app is at /app and you make a request to /app/products, the request will be routed to the angular app products’ page.

What this is not

A complete front end for a Umbraco website with dynamic routes.
This doesn’t have dynamic routes, you have to specify them on your code.

Let’s get started!

First, start by creating a controller to handle the Angular App request.

using System.Web.Mvc;

public class AngularAppController : BaseController
{
    public ActionResult AngularAppView()
    {
        return View();
    }
}

Then, you have to decide the route where your Angular app will render. On this example it will be /angularapp.

On your ApplicationStarted method, put this code:

RouteTable.Routes.MapRoute(
  "AngularApp",
  "angularapp/{*.}",
  new { controller = "AngularApp", action = "AngularAppView" });

The {*.} syntax is what makes your angular app routes load and not return the 404 page.

If you don’t have an ApplicationStarted method, find out how you to create it here: https://our.umbraco.org/documentation/reference/events/application-startup

Under your Views folder, create a folder with the same name as the controller you set in MapRoute. In this case it will be “AngularApp”.
Inside it, create a view with the same name as the action set you set in MapRoute.

Inside the view put the contents of the index.html of your angular app.
Then you will need to move your angular app files somewhere like you /Assets folder, and edit their paths on the view.

Almost done!

Now you need to edit the routes of your Angular app.
Simply add the route you chose as a prefix to the routes.

From something like this:

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: '/dashboard', component: DashboardComponent },
  { path: '/detail/:id', component: HeroDetailComponent },
  { path: '/heroes', component: HeroesComponent }
];

To this:

const routes: Routes = [
  { path: 'angularapp', redirectTo: 'angularapp/dashboard', pathMatch: 'full' },
  { path: 'angularapp/dashboard', component: DashboardComponent },
  { path: 'angularapp/detail/:id', component: HeroDetailComponent },
  { path: 'angularapp/heroes', component: HeroesComponent }
];

Thanks for reading!
Mário

The post Adding an Angular app to your Umbraco Website appeared first on Blog IT.

Force Image Cache Refresh Programmatically

Mário Nunes — Thu, 23 Nov 2017 18:15:22 +0000

The best solution I found, to force the browser cache to refresh for an image, is to modify the image url in the html.

Example:
I have an image with this url: “/images/mario-profile-photo.jpeg”.
Change the url to: “/images/mario-profile-photo.jpeg?updated={DateTime.Now.Ticks}“.

So, I lied, sorry! This will make the browser request the image again, because the url is different. It doesn’t really refresh the cache.

Using DateTime.Now.Ticks will force the refresh every time the page loads, so I don’t recommend using it.

If you have the time of when the photo was last updated, use that instead! Something like: {Photo.UpdateDate.Ticks}
This way, you will only request a new image when it is different from the one you already have in cache.

Note: the “?updated=” property is just a name, you can use whatever you want. The important thing is to modify the url.

For Umbraco developers: When saving an image, do not forget to set it’s UpdateDate! Umbraco doesn’t update that property automatically.

Hope this helps,
Thanks for reading!
Mário

The post Force Image Cache Refresh Programmatically appeared first on Blog IT.

Syncing Member Types with uSync

Mário Nunes — Mon, 06 Nov 2017 11:22:24 +0000

This took me longer to figure out than it should have.

uSync has MemberType synchronization disabled by default.

To enable it simply go to Config\uSyncBackOffice.Config and set MemberTypeHandler to true.

Thanks for reading!

Mário Nunes

The post Syncing Member Types with uSync appeared first on Blog IT.

Working with Umbraco 7.6 New Pickers

Mário Nunes — Sun, 05 Nov 2017 14:01:26 +0000

With the old pickers, we could do something like this:

page.SetValue("myPicker", content.Id);

With the new pickers, we can’t use IDs anymore, we have to use UDIs instead. They look like this:

"umb://document/28b551d1e9e74c758686604c9168b910"

So how can we get the content UDI?
If we have an IContent, we can simply use the extension

string udi = content.GetUdi().ToString();

If we have an IPublishedContent, we need to do a little bit more work.
Umbraco provides a built in function to create UDIs. To use it, we need these:

using Umbraco.Core;
using static Umbraco.Core.Constants;

Get the UDI like this:

string udi = Udi.Create(UdiEntityType.Document, content.GetKey()).ToString();

If you want to set multiple items, separate the udis with a comma. The resulting string should be like this:
"umb://document/28b551d1e9e74c758686604c9168b910,umb://document/28b551d1e9e74c758686604c9168b912,..."

To clean up the code, I created an extension class.

    using Umbraco.Core;
    using Umbraco.Core.Models;
    using Umbraco.Web;
    using static Umbraco.Core.Constants;

    public static class UmbracoExtensions
    {
        /// 
        /// Gets the specified content udi.
        /// 
        /// The content.
        /// The content udi.
        public static string GetUdi(this IPublishedContent content)
        {
            return Udi.Create(UdiEntityType.Document, content.GetKey()).ToString();
        }
    }

With this extension, you can set the pickers with IPublishedContent with just one line of code!

page.SetValue("myPicker", content.GetUdi());

So why not use IContent all the time?
To get an IContent, we need to use a service like MediaService or ContentService, they are much slower that getting and IPublishedContent through Umbraco.TypedContent(), which gets it from cache.

UPDATE: Support for member pickers. Other pickers might need additional code too.

public static string GetUdi(this IPublishedContent content)
{
    string entityType = UdiEntityType.Document;

    if (string.Equals(Models.Member.ModelTypeAlias, content.ContentType.Alias))
    {
        entityType = UdiEntityType.Member;
    }

    return Udi.Create(entityType, content.GetKey()).ToString();
}

Thanks for reading,
Mário Nunes

The post Working with Umbraco 7.6 New Pickers appeared first on Blog IT.

KendoUI Grid, OData, WebAPI and Entity Framework

André Santos — Wed, 05 Jul 2017 10:42:53 +0000

In the latest project I was involved with, there was a need to present database tables data directly in the Umbraco’s backoffice, where all CRUD operations must be supported. This tables could be something like 1000 to 1 million rows and both the website and database would be hosted in Azure, in a WebApp and SQL Database respectively. Users should be able to create complex filters and order the data as they wish as well as update the data individually and in batch.

From the get-go there were some challenges we needed to overcome in order to create an usable system, that was user-friendly, fast, reliable, and where no conflitcts would come up when data was being updated from multiple users.

The solution was a new Umbraco Package we called Search Manager (since the database tables ultimately feed an Azure Search index) that uses Telerik’s Kendo UI Grid, WebAPI and Entity Framework. The following presents the process it took to reach the end result.

Step 1

We created a simple Umbraco Package that implemented a Kendo UI Grid which got its data from a WebAPI method that returned all rows from a table using Petapoco.

This allowed us to have the complete table data in memory using a Kendo UI Grid. It worked great but had major problems:

A table with around 40k rows was actually a 40 MBs json download in order to populate the grid
Users could be working with outdated data, since it was loaded in memory and changes could have been made to the source

Step 2

We started using the server paging feature of the Kendo Grid. This dropped the download size greatly, but we still had problems:

Even though we are working with only a subset of results client-side, we were still getting the complete table data server-side, using petapoco.

We needed an easy way to translate the client-side queries, such as filters, paging, order, etc to SQL queries.

Step 3

We changed the type of queries being generated by the Grid to OData. Using the OData WebAPI nuget package we are able to map the odata query to a C# object and then directly apply the query to any IQueryable data.

Petapoco does not provide any IQueryable data support, so we changed our ORM to Entity Framework, which does, and voilá!

Finally

With everything in place, we are able to have a filtered subset of results in a Grid, that gets exactly what it needs to display from a dynamically generated SQL query.

It is fast because we only get exactly what we need:

An OData query generated by the Kendo UI Grid looks like this:

http://localhost:14231/umbraco/backoffice/SearchManager/PricesApi/Read?%24inlinecount=allpages&%24top=20&%24skip=40&%24orderby=ProviderName+desc&%24filter=(NatureProcCode+eq+%27exames%27+and+AvgAmtClaimed+gt+10)

Which is translated to the follwing SQL query:

exec sp_executesql N'SELECT 
    [Project1].[Approved] AS [Approved], 
    [Project1].[DiffWeightedRate] AS [DiffWeightedRate], 
    [Project1].[SubmitPrvId] AS [SubmitPrvId], 
    [Project1].[PracticeSeq] AS [PracticeSeq], 
    [Project1].[NatureProcCode] AS [NatureProcCode], 
    [Project1].[GroupProcCode] AS [GroupProcCode], 
    [Project1].[Network] AS [Network], 
    [Project1].[AmtClaimedWeighted] AS [AmtClaimedWeighted], 
    [Project1].[ManualPrice] AS [ManualPrice], 
    [Project1].[IsImported] AS [IsImported], 
    [Project1].[DiffCalculatedRate] AS [DiffCalculatedRate], 
    [Project1].[AmtContract] AS [AmtContract], 
    [Project1].[AvgAmtClaimed] AS [AvgAmtClaimed], 
    [Project1].[ProviderName] AS [ProviderName], 
    [Project1].[ClinicName] AS [ClinicName]
    FROM ( SELECT 
        [Extent1].[Approved] AS [Approved], 
        [Extent1].[DiffWeightedRate] AS [DiffWeightedRate], 
        [Extent1].[SubmitPrvId] AS [SubmitPrvId], 
        [Extent1].[PracticeSeq] AS [PracticeSeq], 
        [Extent1].[NatureProcCode] AS [NatureProcCode], 
        [Extent1].[GroupProcCode] AS [GroupProcCode], 
        [Extent1].[Network] AS [Network], 
        [Extent1].[AmtClaimedWeighted] AS [AmtClaimedWeighted], 
        [Extent1].[ManualPrice] AS [ManualPrice], 
        [Extent1].[IsImported] AS [IsImported], 
        [Extent1].[DiffCalculatedRate] AS [DiffCalculatedRate], 
        [Extent1].[AmtContract] AS [AmtContract], 
        [Extent1].[AvgAmtClaimed] AS [AvgAmtClaimed], 
        [Extent1].[ProviderName] AS [ProviderName], 
        [Extent1].[ClinicName] AS [ClinicName]
        FROM (SELECT 
    [PriceGrid].[Approved] AS [Approved], 
    [PriceGrid].[DiffWeightedRate] AS [DiffWeightedRate], 
    [PriceGrid].[SubmitPrvId] AS [SubmitPrvId], 
    [PriceGrid].[PracticeSeq] AS [PracticeSeq], 
    [PriceGrid].[NatureProcCode] AS [NatureProcCode], 
    [PriceGrid].[GroupProcCode] AS [GroupProcCode], 
    [PriceGrid].[Network] AS [Network], 
    [PriceGrid].[AmtClaimedWeighted] AS [AmtClaimedWeighted], 
    [PriceGrid].[ManualPrice] AS [ManualPrice], 
    [PriceGrid].[IsImported] AS [IsImported], 
    [PriceGrid].[DiffCalculatedRate] AS [DiffCalculatedRate], 
    [PriceGrid].[AmtContract] AS [AmtContract], 
    [PriceGrid].[AvgAmtClaimed] AS [AvgAmtClaimed], 
    [PriceGrid].[ProviderName] AS [ProviderName], 
    [PriceGrid].[ClinicName] AS [ClinicName]
    FROM [dbo].[PriceGrid] AS [PriceGrid]) AS [Extent1]
        WHERE ([Extent1].[NatureProcCode] = @p__linq__0) AND ([Extent1].[AvgAmtClaimed] > @p__linq__1)
    )  AS [Project1]
    ORDER BY [Project1].[ProviderName] DESC, [Project1].[AmtClaimedWeighted] ASC, [Project1].[AmtContract] ASC, [Project1].[Approved] ASC, [Project1].[AvgAmtClaimed] ASC, [Project1].[ClinicName] ASC, [Project1].[DiffCalculatedRate] ASC, [Project1].[DiffWeightedRate] ASC, [Project1].[GroupProcCode] ASC, [Project1].[IsImported] ASC, [Project1].[ManualPrice] ASC, [Project1].[NatureProcCode] ASC, [Project1].[Network] ASC, [Project1].[PracticeSeq] ASC, [Project1].[SubmitPrvId] ASC
    OFFSET @p__linq__2 ROWS FETCH NEXT @p__linq__3 ROWS ONLY  option (Recompile)',N'@p__linq__0 varchar(8000),@p__linq__1 decimal(2,0),@p__linq__2 int,@p__linq__3 int',@p__linq__0='exames',@p__linq__1=10,@p__linq__2=40,@p__linq__3=20

It’s user-friendly and reliable because users can filter the data as if they were using an excel file on steroids
It avoids conflicts because we only get a subset of the results each time and each change is commited in a single transaction

Code samples:

grid = $("#grid").kendoGrid({
                dataSource: new kendo.data.DataSource({
                    transport: transport,
                    schema: schema,
                    serverFiltering: true,
                    serverPaging: true,
                    serverSorting: true,
                    type: "odata",
                    pageSize: 20
                }),
                dataBound: onDataBound,
                pageable: true,
                filterable: true,
                sortable: true,
                scrollable: false,
                navigatable: true,
                resizable: true,
                batch: true,
                columnMenu: true,
                editable: true,
                toolbar: [
					{ template: 'Guardar Alterações' },
					{ name: "cancel", text: "Cancelar" },
                ],
                columns: [...]
            });

[HttpGet]
        public IHttpActionResult Read(ODataQueryOptions opts)
        {
            Mapper.CreateMap();

            using (var context = new EntitiesContext())
            {
                using (var qh = new HintScope(context, QueryHintType.Recompile))
                {
                    List results = opts
                        .ApplyTo(context.PriceGrids)
                        .Cast()
                        .ToList();

                    List boEntities = results.Select(x => Mapper.Map(x)).ToList();

                    PriceResponse response = new PriceResponse()
                    {
                        Entities = boEntities,
                        Total = Request.ODataProperties().TotalCount.HasValue ? Request.ODataProperties().TotalCount.Value : 0
                    };

                    return Ok(response);
                }
            }
        }

The post KendoUI Grid, OData, WebAPI and Entity Framework appeared first on Blog IT.

First ever Lisbon Umbraco Meetup!

André Santos — Mon, 21 Nov 2016 10:26:33 +0000

The first ever Umbraco Meetup in Portugal is going to be held this Thursday at Create IT offices in Lisbon. The event filled up fast which leads me to believe that Umbraco is getting recognized as one of the best CMS’s to work with.

We’ll try to record some of it, and share it on youtube!

Lisbon Umbraco Meetup

Lisbon, PT
105 Members

The Lisbon Umbraco Meetup is a networking group for anyone interested in Umbraco. We’re planning on having at least one formal presentation followed by some lively debates or …

Check out this Meetup Group →

The post First ever Lisbon Umbraco Meetup! appeared first on Blog IT.

Umbraco and Donut Output Cache

André Santos — Thu, 30 Jun 2016 14:22:01 +0000

Donut Output Caching is a type of output caching where certain parts of a web page are not cached. It’s a simple way of boosting your site performance!

ASP.NET doesn’t provide a native way of donut output caching, so we must resort to a great NuGet package called MVCDonutCaching. You can read all about it here: http://www.devtrends.co.uk/blog/donut-output-caching-in-asp.net-mvc-3.

Since Umbraco is built on top of ASP.NET MVC, we can easily use this package on our websites. There are, however, some caveats, because Umbraco doesn’t use the native MVC routing.

For Umbraco, every page that uses the same document type is processed through the same route, therefore, if we have 100 news articles that use the NewsItem document type, from the moment we open one news article page, every other news item page will display the same information, despite having a different URL!

The way to bypass this issue is the following:

Create a Global.cs file that includes the logic to cache a page based on their url and not the document type

namespace CreateIT.Web
{
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Umbraco.Web;

    public class Global : UmbracoApplication
    {
        public override string GetVaryByCustomString(HttpContext context, string custom)
        {
            if (custom.ToLower() == "url")
            {
                return "url=" + context.Request.Url.AbsoluteUri;
            }

            return base.GetVaryByCustomString(context, custom);
        }
    }
}

Then, instruct Umbraco to use this class when launching the UmbracoApplication by changing the Global.asax file:

<%@ Application Codebehind="Global.cs" Inherits="CreateIT.Web.Global" Language="C#" %>

Finally, setup an Output Cache profile in your Web.config:

<system.web>
    (...)
    <caching>
      <outputCacheSettings>
        <outputCacheProfiles>
          <add enabled="true" name="CreateIT.Actions" duration="900" location="Server" varyByCustom="url" varyByParam="*" />
        </outputCacheProfiles>
      </outputCacheSettings>
    </caching>
</system.web>

And decorate the chosen controllers (that you used to hijack the Umbraco routes) with the Donut Output Cache attribute:

[DonutOutputCache(CacheProfile = "CreateIT.Actions")]
public class HomepageController : Umbraco.Web.Mvc.RenderMvcController
{

If you wish to exclude a certain part of your page from the cache, just create a Surface Controller action that returns a partial view and use the extension method provided by MVCDonutCaching for @Html.Action().

The post Umbraco and Donut Output Cache appeared first on Blog IT.

Umbraco profiler

André Santos — Wed, 08 Jun 2016 11:16:45 +0000

Quick tip:

If you need to find which part of your Umbraco application is slowing the site down, follow these steps:

Set the debug property of the compilation section of your Web.config to true: debug=”true” batch=”false” targetFramework=”4.5″>
- If you’re using an older version of Umbraco, you also probably need to set the umbracoDebugMode app setting to true in the same config file:
Add the query string ?umbdebug=true to your Umbraco page URL
Thats it!

umbraco profiler

It uses Mini Profiler, so you can add your own profile stops, but out-of-the-box it already analyses the time it takes to render each view.

Happy profiling!

The post Umbraco profiler appeared first on Blog IT.