Kategoriarkiv: css

Improving the web performance of an intranet

overloaded-sharepoint-in-browser

All the “small” app parts, web parts, delegate controls, user controls, and other “packages” that “must” be delivered to the users on every page load of the Start Page of your Intranet.

Recently we made an investment to improve the performance of our intranet. We made many changes in different layers: SQL, Network, Browser upgrade and code. Here I want to tell about what code changes we did to improve the web browser performance. Please leave feedback if you find it useful. You can also share your suggestions. We measured the performance before our code changes and after them. We had amazing results. Unfortunately I can not share any numbers, but we improved the Time to First Byte, time to load event firing in the browser, memory consumption in the clients and, perhaps, the most important, we improved the perceived performance of the Intranet, the way how users experience the speed and UI responsiveness. To do this I got many ideas of my project colleagues and branch colleagues. Here is the list of changes we’ve implemented:

– Execute code on demand

Consider this scenario: on a page users can click on a button to download a vcard. Aggregating user information is a costly operation that requires getting data from the User Profile Service, getting the profile image from SharePoint. Don’t ever do this operation on page load. Move the code to the “onclick” action. In other words, work when it is needed. It is like cooking a lot of food, when you are not hungry. It is nothing new, unfortunately there were a couple of the “eager code” places.

– Cache results, investigate what parts can be cached and how fresh data needs to be

All data on your page doesn’t need to be fetched on every page load. In our project We listed all the “parts” of the start page and other often visited pages and went to the business and asked them to evaluate how fresh data should be. Some parts should be as fresh as possible (no cache), whereas it would be tolerated that the information could be dirty (cache up to one week or more).

– Reference javascript and css files from one location

Do you have jQuery in your SharePoint Intranet. How many copies do you have? What we did in our Intranet was that we partially implemented the CDN concept. Even though we don’t distribute our resource files geographically, we have 1-to-1 relation between a file and its absolute URL. In the whole intranet, we have only one jQuery url and only one our intranet.core.js url. We did by creating a dedicated CDN site collection. This alone makes a big difference. To evolve the idea we could provision resources outside SharePoint to remove the authorization overhead. We could also distribute it geographically by having files closer to the end users.

– Unify your framework and your dependencies

In our projects we had a couple of SharePoint-hosted apps developed by different teams. We had different approaches and different framework that solved almost the same problem: AngularJS and KnockoutJS. Eventhough apps are independent pieces of software, they were used within the same page (as app parts). It was too much http traffic. We agreed on Developer Guidelines and chose one framework.

– Do not hide controls on the page with CSS, remove them

On the start page in our intranet we didn’t show the left navigation, but it was still rendered in code behind. Instead hiding it with CSS, we just removed it by an empty ContenPlaceHolder in our Start Page Layout:

– Optimize jQuery Selectors

We reviewed all the jQuery code and improved the selectors. Optimizing the selectors will improve the overall performance in the browser, especially in older browsers. The worst example is using text selectors, like this one:

It will sink your IE8 browser.

– Minify javascript and CSS files

Minifying resource files like javascript and css is not hard. My recommendation is to use Web Essentials plugin in Visual Studio. Alternatively you can use the SharePoint Assets Minifier.

– Use the weakest selectors in CSS and in LESS

In our project we are using LESS. With LESS it is easier to write  readable CSS code. But be aware of the output. Do not make the selectors too strong: Use the weakest CSS Selectors. The weakest selectors will make it easier to maintain the CSS and it will minimize the amount of KB the server needs to send to your users’ browsers.

– Ensure javascript and CSS files are cached

JavaScript and CSS files should be cached. You should also avoid 304 responses where the Server answers “Not Modified”, because this has an impact on the performance. Configure the Blob Cache and put your resources into the Style Library.

– Remove all app parts from SharePoint-hosted Apps from the start page

There can be exceptions, but we encountered that client web parts (app parts) from SharePoint-hosted apps had a huge impact on the performance. The combination of a couple of app parts on often visited pages (like the start page on the intranet) led to long page load times. These are the reasons why you should not have SharePoint Hosted App Parts on your start page:

  1. App Parts are iframes. They are loaded simultaneously if you add client web parts (app parts) in a usual way. They hold up the whole page. Users cannot interact with the intranet page until all the content in all app parts has been loaded. This can be partially improved if you introduce a delay in the app part loading, by developing an own engine. See my blog post where I mention such a concept: AppLoader Concept for SharePoint apps.
  2. The content from a SharePoint AppWeb is not fully cached. If you examine the http traffic from the apps you’ll see a lot of 304 responses, meaning the browser requests when the server answers that there is no newer version. This has an impact on the performance. See more in Alik Levin’s blog: ASP.NET Performance: Get Rid of HTTP 401 and HTTP 304. In a SharePoint-hosted app you don’t have any control what so ever to adjust the the cache settings. This is not the case in the Provider-hosted apps.
  3. SharePoint-hosted apps can only use javascript. The code is executed on the client. Older browsers like IE9 or IE8 render the pages slower. The Start Page that is slower than the rest of the Intranet is not something that will engage your users.
  4. App Parts are iframes that do not know about their dimensions. App parts often need to update the height and the width  of the parent iframe. This causes irritating flickering. Perhaps OK on some pages, but I’d say totally unacceptable on the start page of your brand new intranet..

What did we do instead of App Parts on the Start Page? We converted them into Script Editor Web Parts, the app parts were only one-time parts, they only were used on the start page.

Do not get me wrong. What we did was not abandoning apps as a model, we just removed wrong apps, apps that cannot be reused, the SharePoint-hosted apps that had big performance issues. I am looking forward creating right apps, that are written with performance, reusability, scalability and good design in mind.

 

Updating hover style in IE8 Developer Tools

In our project we still have to support Internet Explorer 8. The CSS issues in IE8 are most difficult to debug and solve. You can not add a new rule in Developer Tools or toggle the state of an element to hover as in moder web browser dev tools.

One solution that I’ve come up to today, is to add a style with javascript or jQuery, open the script pane in IE8 Dev Tools and add this line:

This will fill update the hover effect of the .ms-srch-item directly.

ie8-devtools-001

 

That’s it, just a little tip.

Tip: Use the weakest CSS selectors

I am reading Mobile HTML5 written by Estelle Weyle. It is an awesome recap and new knowledge about html, css and javascript. I want to highlight one of tips I got: Use the weakest CSS selectors (can be found on page 204).

We all know, that inline CSS and !important are evil. They have a higher level of specifity and override the standard cascade of the CSS rules. If you use !important, then it will be hard to override CSS rules when you really need it. After these two classic “evils” the evil number three is overqualifying of CSS selectors. You should really never add more classes or ids or elements than needed. Consider this:

It is often enough, you don’t need those:

SharePoint

In SharePoint sometimes we want override some OOB CSS rules. We have our own “namespace” to do that really simple. We have added a class to the html tag: “contoso-html”. Then it was really easy to update any OOB CSS rules, just copy the selector and add .contoso-html:

We also use less preprocessor and nest our selectors which has resulted that almost all of our selectors contain .contoso-html. Now back to the tip of that blog. This “namespace” made it harder to adjust CSS rules for special cases, like left navigation in the Search Center, we were forced to add more specific selectors, and selectors became bigger and bigger.

What I would recommend today is to skip the .contoso-html namespace in the CSS but keep it in the masterpage markup, use it wisely, meaning only if the original rule doesn’t work. Don’t nest too much in less files. Try always to find the weakest CSS selector. It is especially important in the SharePoint “markup djungle”.

Pragmatic Responsive Design

I have been curious about the responsive design but have not had time to try it out. To learn more I decided to make an existing website more responsive. A friend of mine drives a Chuvash Dictionary website: samah.chv.su. Today it looks like this in a mobile browser:

Before responsiveThe site is a classic 1000px-ish centered page with header and two columns. The left column is for the main content and the right column for additional “aside” information. Can it be more classic? This current version works, you can still use the dictionary on a mobile phone. But there are several improvements that can be done:

  • Avoid scaling to be able to read text
  • Avoid scrolling back and forth to read every line
  • Move the right column down, it is better to use the space for the main content.
  • Hide the quick links to the individual letters
  • Shrink unused space in the header.



What I wanted was to provide some easy steps to make it more responsive. The steps had to be pragmatic: some easy-to-implement steps that would make a difference, and with very little impact on existing markup.

I created a copy of this page and made it available publicly, because I wanted to access from everywhere and test it on so many devices and resolutions as possible. I used Github Pages to get the version control too, even though a public folder on Dropbox, OneDrive or Google Drive could give the same result.

Here is my list of what I did to make it more responsive:

Don’t do anything for larger resolutions

Just leave it as it is, unless you want to redesign your site.

Create the css file for responsive design

Just create a file and call it responsive.css. Reference this file inside your site in a usual way.

Set witdh 100% when a scroll appears

Find the “break point” where your site gets a horizontal scroll. To do so, just fire the Chrome Dev Tools, dock it to the right, and resize your page. In my case it was 1016px. Now it is time to do a change. Create a media query for that and try to remove all the hard-coded width values by setting width:100%. Well something towards this “very responsive site”.

Let the columns disappear

Find the width where two columns become ugly and impractical. Create a media query for that and just style the columns so they do not float. In my case the original site uses table-row layout. I set display:block and the right column went down.

Prevent scaling in mobiles

Now your page is more responsive in a desktop browser, but it is still unreadable in a mobile. The reason is the mobile browser that scales it for us. Let’s disable it. Just put this meta tag in the head session of your page:

Hide rarely used elements

In a mobile we want to see the most important things, the actual content. Hide menus and remove empty spaces. In my case I hid the letters that took to much place and the language switcher. They can be shown in another menu (see below).

Make a responsive navigation menu

It is not complicated at all. You can google it. There are many tips and jQuery plugins. I did in a very easy way. I added a new div to my html:

I also added this css style and hid this div for bigger resolutions:

Here is the tiny javascript click event listener:

Here is the result. There are still some improvements that can be done, but here is the result of the my changes.

samah-004 samah-003

Add a website icon

Improve the user experience by adding a website icon. It will be used when an iPhone, iPad and Android user will save your page as a bookmark (and it will be placed on the screen and look like any app). Here is how I did:

  1. I created a 74 x 74 px png image and saved it as apple-touch-icon.png. I placed it in the “root folder”.
  2. In the page markup I added this line inside the head element:

That’s it. So now when someone saves the website as a bookmark, it looks like this:

photo samahsar-001 Screenshot_2014-03-25-23-30-02

Then on the mobile screen it looks like any other app. It works even on Android devices (even though the icon is an apple-touch-icon).

 

UPDATE 2014-03-25

Now these changes are implemented on the real site: samah.chv.su

UPDATE 2014-05-12

I discovered a blog post about how to adjust a web app for best experience in iOS. This gist is a perfect example what you can add for properties.