One of the most important aspects of web sites is user experience, which is directly affected by performance. This blog comes to address performance aspects to take into consideration when building a site.
Web site performance importance
Speed is the most important factor after how a site looks in order to increase the amount of users and convincing them to stay. Users who are more engaged while browsing your site will learn faster and show an improved attitude and behavior toward its content. Slow page loading time is directly correlated to your users' frustration and eventually leads them to leave your site. It has always been important to optimize for speed, but now that the audience is more demanding and the competition is harder it’s even more important than before.
Who Am I
I am a performance engineer in SAP Labs Israel for the past 4.5 years. I am currently working on the exciting business, SAP HANA Cloud Portal (formerly known as SAP Netweaver Cloud Portal). HANA Cloud Portal is a new cloud (software as a service) solution that is a key part of the SAP Cloud strategy. It allows easy, fast and fun way to create business mission web sites that are consumable by any device. My duty is to insure that the backlog delivered by the implementation teams qualify in terms of performance, to locate and provide solutions for performance problems and to provide feedback to the product owners regarding overall performance status and weaknesses.
Performance improvements by site authors
- Site Loading
Your choice of an entry page directly affects site loading time and hence perceived performance by your users. Try to refrain from putting "heavy" widgets in the entry page of your site in order to improve site loading time. In addition the custom site theme used needs to be optimized in terms of performance. The main places a site author can influence performance there is his choice of the size of images used for site background and site logo. The images to be used need to be of minimal size.
- Page Loading
It is widely accepted that fast-loading pages improve the user experience. One thing a site author can do to influence this is to use fewer widgets per page as opposed to having fewer pages with many widgets. This will allow spreading http requests for widget processing and rendering across your site as opposed to having them all in one page and improve page loading times. The following graph is an example of fewer widgets per page on a site entry page (74% improvement). Now the user doesn't have to wait as long as before when loading your site:
- Use group widgets
Consider adding widgets to a group widget as opposed to placing them as separate widgets. A group widget has three available display modes: list, icon and navigation bar. When you place widgets inside a group widget you immediately save metadata and rendering calls for each one of the widgets placed in the group widget. One of the most important best practices for speeding up your web site is to minimize HTTP Requests, and this is a perfect example of reducing the number of requests. While the list and icon view are distinguished by preferred viewing style, the navigation bar display option displays the first widget in the group widget. The latter has a performance overhead when comparing against list and icon display options and therefore they are recommended for use and prove to be faster than the option to place widgets as standalone on a page. The graph below is an example where I put five document widgets side by side as opposed to having them all placed inside a group widget in icon view. There is 98% improvement in page loading time:
- Image Loading
Optimizing your images is absolutely necessary because most of the time they are one of the biggest files on a site. When using an image widget there are a few things you can do to improve performance. Save images in the right format to reduce their file size. If you have a lot of images, it’s essential to learn about the optimal format for each image. There are four common image file formats: JPEG, GIF, PNG and BMP. In general, you should use JPEG for realistic photos with smooth gradients and color tones. You should use GIF or PNG for images that have solid colors (such as charts and logos). GIF and PNG are similar, but PNG typically produces a lower file size. Another issue is finding the right balance between visual loss and file size which can be hard at times. Nevertheless, it is worth to consider fitting the image resolution to the actual size of the widget that is needed. Even after you have optimized your images you can still save many more bytes by stripping unnecessary data from the files and running the files through tools that further compress the images but don't hurt resolution. The bad news is that many of them are out there. The graph below is an example where I compared widget loading time of the same image with different sizes and got a 60% improvement! It is important to note that the quality of the optimized picture wasn’t hurt here. Now we know that optimizing our images is highly recommended:
To sum it up
So, remember – the site performance is a key factor. If your site won't run fast, it will get the same result like when you try to open a cool application from your mobile device, and it takes too long till it loads… in most of the cases, you will kill it the first time, and it the next time you will probably remove it's installation.
Let's take a look at a comprehensive example of the points raised above. I have a site with 5 document widgets and a big image on my entry page. I compare site loading time to a site with a group widget containing 5 document widgets in icon view and an optimized image on my entry page (1st optimization) and a site with the same group widget on its entry page and the optimized widget on another page (2nd optimization). Overall there is a 59% improvement in site loading time:
By following these simple guidelines, you will get much better performance:
Rule #1: Make your entry page as light as possible in order to reduce login time. Heavy widgets shouldn't be on your first page.
Rule #2: Optimize your custom theme performance wise.
Rule #3: Spread out your site – page loading time will be shorter if you put less widgets on each page.
Rule #4: Group widgets are a solution for aggregating large widgets into one widget and improving page loading time. Don't forget to choose list or icon view.
Rule #5: Your images are one of the heaviest resources in your site. Optimize them before uploading them into image widgets.
Disclaimer:
All results displayed above were conducted in trial account. Measurements were taken through chrome developer tools and were based on rendering times with full cache. The response times are average out of ten iterations.
Roye Cohen
- SAP Managed Tags:
2 Comments
