Category Archives: Performance techie

Advanced blogging – Honey, I Shrunk The Pictures.

Small recap

It took me three days and three takes to make 26 pictures. Now I had to shrink the pictures to a smaller size. This would lead to a faster download of the blog post and hopefully a better performance of my blog post.

Warning:
This is not the standard look-how-great-I-am blog post. It is more like look-how-I-stumbled-forward.

Reminder to myself:
As a tester I built this website to share information, but also to get a better understanding of building websites. The more I blog, the better I test.

Here, have some notes

Writing a blog post is creating an introduction, a good end, and something in between. The last part was still missing.

I only had notes and pictures in a charter. As an experienced tester I made my observations including date and time. I used the abbreviation PIC for Picture.

20201012 blogging
PIC 10:37 Screen print TEstLogin3.java 
Input: Cap / Secret.
PIC 10:44 debug menu
PIC 10:46 first breakpoint.
PIC 10:47 Cap in screen.

All my pictures had names like “20201012 – 1.2 debug program.jpg”:

  1. “20201012” is the date when the picture was taken. The format is year in 4 digits, the month in 2 digits, and the day in 2 digits.
  2. “1.2” means Take 1 and Step 2.
  3. “debug program” describes the picture.
  4. “.jpg” describes how the picture is stored. I chose this file format, because it is great for editing. That is a bit of a spoiler.

The big advantage of this name is that I can order the pictures on name.
I must have looked like a Holywood director. Day 1, take 1.

Now I had to make a link between my actions and the pictures. Luckily, I had used descriptive names for the screen pictures. These pictures had a day and time stamp, so it was easy to place the file names at the right places in my blog post.

20201012 blogging
PIC 10:37 Screen print TEstLogin3.java -  20201012 - 1.1 three breakpoints.jpg
Input: Cap / Secret.
PIC 10:44 debug menu - 20201012 - 1.2 debug program.jpg 
PIC 10:46 first breakpoint. - 20201012 - 1.3 - first breakpoint.jpg
PIC 10:47 Cap in screen.- 20201012 - 1.4 - fill in username.jpg

Processing a picture

A 288 kb picture is too big for my blog post. I figured out several steps to cut down the size.

Emphasizing

The first step is to determine whether a box should be placed in the picture. If this was the case, I used a green bordered and transparent rounded rectangle for highlighting.I would add “+box”:
e.g. “mindful-tester-p3-20201012 – 1.4 – fill in username+box.jpg”.

Let me break down the name again:

  1. “mindful-tester” is the name of my blog.
  2. “p3” is the third part of TDD in Test Automation.
  3. “20201012” is the date when the picture was taken.
  4. “fill in username” is the description of the picture.
  5. “+box” states that a rectangle is placed in the picture for highlighting an important detail.
  6. “.jpg” describes how the picture is stored.

In case of no box I did not add anything at the end of the name.
This would lead to:
“mindful-tester-p3-20201012 – 1.4 – fill in username+no+box.jpg”
After a while, I did not use the “+no+box” any more, because it did not add value.

I stored the old version of the file in case of any mistakes.
So far, so good.

Zooming in

The second step was that I cropped the picture: I would cut a rectangle out of the picture and save it. My favourite shareware tool is irfanview. Less pixels means smaller size and better performance.

Shrinking

The third step was to shrink the picture also using irfanview.
This way a picture of 288 kb could be shrunk to 40 kb.

In the Resize/Resample image dialog of irfanview the "Set new size as percentage of original" is selected. The Width and Height are set to 100%!

Note: for this blog post I accidentally used a png file. png is like jpg a way to store pictures. Only irfanview would not let me resize the png picture using percentages.

In WordPress I resized the picture to maximum size. I selected a corner of the picture and stretched the picture. This way the user does not have to click on the picture to see the details.

The new file name was:
“mindful-tester-p3-1.4-fill-in-username+box.jpg”.
I left out the date and the spaces in the name.

Was this a joyful experience for me? Not really.
So the time of processing pictures became longer and longer, until I forgot my process.

Processing pictures

The status of the picture was not clear in the file name. Also, the location of the pictures had its own logic. So the time between the editing of one picture and the editing of another picture became longer and longer.

So I made a nice file with all kind of instructions, “Instructions printscreens programming.txt”.
This included files, their contents, and their locations.
Exploratory blogging in a nutshell.

Only to discover that I had already “Overview files.txt” in place.
Exploratory blogging takes practice.

Because a lot of time was spent on editing the pictures, I did not remember my steps well enough while writing. Now pictures are handy, because pictures do not lie. So I had to change my story a few times.

Looking at some pictures I missed the essential point of the picture. So I added the transparent rectangle and went through the whole editing process again. Even after cropping the picture the important details were too small in some cases. So I split pictures in certain cases.

Placing a picture in a blog post is quite tiresome. I had to go to the right location, search the right picture, and upload it. Not enjoyable at all.

But I already knew what I wanted to upload. So I opened Media and uploaded all the pictures using one drag and drop.

Then I searched for the first picture to be included using PIC for Picture. All my files had an unique name like
“mindful-tester-p3-1.4-fill-in-username+box.jpg”.
Using the filter I searched for the file with 1.4 in the name. Then I selected the file.
In the Add media dialog of WordPress the Search Field is set to "1.4". The result of the search is a single picture containing a part of the Login Page!

Uncomfortable observations afterwards

  • At the end I shrunk the total size of my pictures in the blog post to a quarter: from 8 Mb to 2 Mb, which is still big. Is it still possible to shrink the pictures without losing the important details?
  • I did not check the size of my blog post with the preview version.
  • Chrome Devtools contains Lighthouse, an accessibility tool. My site scored 58 on a scale from 1 to 100 for performance. This is not really high.
  • The setting of “the most number of blogs posts show on page” was still on 5. I forgot to save this setting. Saving a setting in WordPress was not consistent with saving an alternative text for picture.
  • The trouble with pictures is, that it can cost a lot of time. This will decrease my enjoyability. It makes my blogging slower. On the other hand it will increase the enjoyability of the readers. At the end this will increase my enjoyability. I like to read my own blog posts. I might call this the Enjoyability Paradox. Things which I did, were no fun, but finishing the blog post was good for my mood.

Coming up

At the end of the picture processing, I had a bunch of pictures without alternative texts. For blind people or people with bad sight this had to be fixed. A screen reader needed these texts to describe the pictures aloud. This was about accessibility.

Advanced blogging – Unfamiliar Quality Attributes

What would be a good opening for this blog post?

  1. Content is king!
    Narrator: “It is used so much, that it is boring.” [Sigh]
  2. Meta blogging is blogging about blogging.
    Narrator: “Now you lost me.”
  3. It took Thrisha Gee months to make a good video of 20 minutes. I had screenshots of 20 minutes of testing. Now I fully understood her.
    Narrator: “Tell me more.”

My favourite opening for this post is the last one.
But I am too late. I already started with a rethorical multiple choice question.

Some stats

In the past months I made 2 blog posts with lots of pictures, so I had some experiences how to deal with this case.
This time it was 3 days, 3 takes, and 26 pictures.

Performance

Let me do some calculations. 26 pictures of the screen with a size of 288 kb would make an 8 Mb post. This is not what my readers are waiting for. Downloading!

I was experiementing with the number of posts on my home page and following pages. This would reduce the number of pictures on 1 page significantly. In WordPress it looks like this:
After selecting Settings and Reading there is an option to set blog pages show at most to 3 posts!

The story is, that mobile friendly web sites had a major impact on SEO or Search Engine Optimalisation. If a user can view the website fast enough on his or her mobile, then the search engine will place it high in the list of search results.

Accessibility

For deaf people and people with bad hearing there were no obstacles on my blog. I did not use any movies. Let me describe a scene of a closeup of a face in 3 ways:

  1. No options used.
  2. Undertitles
    [Typing sounds]
    [“What are you typing?”]
    [“I saw something strange.”]
  3. Closed captions
    [Face of a programmer is shown.]
    [Tester is typing on the keyboard]
    [Programmer: What are you typing?”]
    [Tester: “I saw something strange.”]

If I will add a movie, then I really like to use the closed captions.

In the past I used cursive font, but this is bad for people who are visually impaired or have a bad view. So I stopped using it.

I even increased the contrast of my quotes.

This is a quote with a good contrast.

For programming dark mode is quite convenient for visually impaired people. White characters on a black background are more readable than black characters on a white background.

Blind and visually impaired peoplemight  have or might have problems with text in a picture. An image cannot be read aloud by a screen reader. I could add an alternative text to the image.
The visible part of the alternative text of a picture of 3 lines of codes with 2 comments is: "eyes.checkWindow("1");// eyes.check"!

The screen reader could read it aloud, but the whole structure of the code would be gone. Several lines of code are spoken as a single line of code. This is confusing.

eyes.checkWindow("1");// eyes.checkWindow("2");// eyes.checkWindow("3");

could be interpreted as:

eyes.checkWindow("1");
// 
eyes.checkWindow("2");
// 
eyes.checkWindow("3");

So I used the pre tag of HTML to display the code in a proper way using the code editor:

<pre>eyes.checkWindow("1");
// eyes.checkWindow("2");
// eyes.checkWindow("3");
</pre>

Now I had to find an efficient way to include 26 pictures  with alternative texts for a single blog post.

Enjoyability

My target audience was programmers who know the basics of Java and an IDE or Integrated Development Environment.
I also counted on the fact that they had the tools properly installed. This is described in other places.

For me a story is more enjoyable to review than a set of instructions. This spreadsheet blog post contains a set of boring instructions.

It was a challenge to stop myself to turn the new blog post into a set of pictures. Another way of boring.

Was there a way to add some humour to it?

Coming up

In the next blog post I will focus on reducing the size of the blog post.

Q & A Bits of performance testing

“Why are you writing this Q & A?”
“Because people have questions, which are unanswered about ‘Bits of performance testing’ . ”
“Like?”
“The use of drawings and perfornance test it self.”
“So I can send in questions?””
“Sure on this page. Why not?”

“Hey, I am the one who is supposed to ask questions.”

Plan

“You used a lot of pictures. Is this not a waste of time?”
“In my blog post I drew a picture about the customer journey. This led to the conclusion that the Wifi network should be split in a private and public ones. This is not a waste of time.”
“I agree. But there were other pictures, which did not have that big impact.”
“That is right. But the drawing of picture takes minutes. Implementing the wrong performance scripts takes days.”

“You used SFDIPOT instead of another heuristic., FIBLOTS”
I am aware that this heuristic exists. I also know that a performance tester made it. And I just forgot it.
The reason I chose to pick SFDIPOT is to use this heuristic in another context. I learn by taking small detours. What if I do it in another way? My main reason was that I wanted to write about performance test in another way.
This kept my spirit high and extended my Circle of Comfort. That is a comfortable thought.”

“Your story about the performance test is sometimes difficult to follow. Why did you write a nonlinear story?”
“Testing is an activity which is unpredictable. I can find bugs on the strangest moments. This can trigger other ideas.
In this blog post I tried to describe what is going on in my head.”
“How can you sell this to your boss?”
“Just ask her or him, whether business cases are also written in a linear way?”

“I miss disk storage That is an important resource to watch.”
“You are right. I missed that one.”
“How do you know that this is a good load profile?”
“Some data have to be gathered. Think about log files and analytic stuff. The challenge is not to confuse frequency with resource usage.”
“Would you please explain that?”
“If 1000 users look to a simple web page, then almost no resources are used. If 1 user asks all articles in stock, then a lot will happen. The database is bring queried and much data is moved over the network. So look for resource usage.”

“So I only have to focus on user actions with heavy resource usage?”
“That is only possible with a very simple web site. Sometimes web sites or programs on the backend do not remove their garbage.”
“What do you mean with garbage?”

“Suppose you have a cinema web site. The purchasing department wants to know what kind of drinks and snacks are ordered in advance. Suppose all the results of the queries are stored. It might be interesting for their department and it should be stored on one of their systems. But not in a module of the web site.

Another thing is to simulate the customer. Use the customer journey. A customer does not only buys cards, snacks and drinks. She or he will also collect them. This lead to click paths, how does the user maneuver through the system: which screens will be visited and which options are used?”

“So if you have a lot of data, what do you do?”
“The challenge is to find patterns. Joe Common is more like this:”
customer journey Joe Common
“Why did you not draw the payment page?”
“It is important. I left it out because of the page size. My plan was to sketch out a rough journey. Just wait a few pics.”

“I suppose you left out snacks out for the same reason. Smart ”
“Cheers”

“Why does he go one screen back?”
“That is hard to say. You can make some assumptions or hypotheses: the price was too high. Or the wrong movie was selected. You can always ask some questions to validate the assumptions.”

customer journey no deal

“Hey there is no deal. What’s wrong?”
“Most of the yearly cinema visitor is looking around or scouting. Were there any changes in the web site? Which movies can I see? ”

child birthday party
“What is going on here?”
“A children birthday party.”
“That looks like a lot of fun.”

noted bar graph

“What are you showing me?”
“This is the number of screens and locations which were visited, and their corresponding numbers.”
“The bars in the graph are getting lower. Is this not frustating for marketing? ”
“Actually this is normal. This is a sales funnel.”

extended sales funnel

*It is like commercials: not everyone buys what they see on the television. They do not buy everything they see in the shop. You actually want people to do things which bring profit. The Call To Action or CTA for this web site is buy tickets, drinks, and snacks.”

“Okay Mr. Monologue. I’ve got a few questions.
How did you make that funnel?*
*Like this.*

bar graph to funnel

*Why do you call this an extended sales funnel? Your CTA is buying tickets, drinks and snacks.*
*But there are two moments to buy drinks and snacks: in advance and on location.*

extended sales funnels with CTAs

“If I had put the CTA in the first funnel picture, it would be cut off right under. By delaying this action I got a better view on the situation.

The second CTA is successful, if the first CTA.is good. John Common is not willing to buy extra drinks and snacks after a slow performance of the web site.”

*Are you writing that models can confuse people?*
*Yes, they do. Let me give another example.*
*Be my writer.*
*if you go twice to a cinema, you go twice through the sales funnel.

two funnels in a row
*So you should take repeat customers in account. *

For some businesses good customer contact is vital. In ‘Delivering Happiness: A Path to Profits, Passion, and Purpose’ it is called creating a moment of Wow.”

“And if things go wrong?”
“Just watch social media. Several companies have web care teams who actively look on the internet and engage with grumpy customers.”

“I would be interested in the numbers. So how would it look like?”

draft breakdown numbers

“Wait. This concept looks better than the draft one.”

concept break down numbers

“Are these estimated numbers for all visitors?”
“That is a good question. It is only for the website visitors, who also ordered drinks or snacks in advance. So I have to add a another set of numbers for the website visitors, who did not order drinks or snacks in advance and the visitors who pass the web site.”

“What is no showup?”
“That is a situation, when a customer does not get, what she or he paid for. He or she is ill. She or he found another group of friends and skipped the cinema.”

“This is strange: there are people who go to the shop without the ticket.”
“This is a common group mistake. A group of people at the cinema asking each other: “Who bought the tickets?””

“Why did you show the draft version?”
“I do not jump to solutions. I want to share my way of thinking. My thoughts and my pictures.”

“But those reversed trees with numbers is not a good starting point for scripting, I assume.”

“You are completely right. All that number crunching can take the attention away. If we have 3525 visitors coming in, then this must be translated in scripts somehow. We have to look at the chances.”
“But this is a cinema web site. It is not a casino.”

“Just have a look.”

click paths

“What does 70 % at Movie mean?”
“This means, that there is a chance of 70 % that a visitor goes from the Select Movie Window to Select Ticket Movie. You can call them of parts of click paths.”

“You are basically stating that the software has to roll a dice to determine the next step.”
“Yes. There is no single ideal path through the system. I already showed pictures of customer journeys.”

“Wait a sec.”
“Waiting.”
“The web site can easily be tested using a standard performance test, but a shop with real people is difficult. Do we need to test them? ”
“What is the system under test?”
“The web site and the shop.”
“Can you explain it to me?”
“The software supporting the web site and the shop are connected.”

“What does hold you back?”
“How can you test it?”
“I have not much experience with this particular situation. My suggestions would be: make a special interface for the shop just for performance test, mock the users in the shop, or use actual human beings. The latter option I call hybrid testing.”

“”Do you have experience with hybrid testing?”
“Yes, I have. For a web site we had to do a performance test. The visitors were simulated by the software. The web masters were real people including your interviewee. The actions of the web masters were too complicated to script, so we did testing manually. For more info there is a Dutch presentation, A performance test with a tail.”

“What is a good way to determine whether the performance is good enough?”
“A lot of people want a fixed number like a certain response time. Like the application will respond within 6 seconds. I’ve got an example.
In a performance test percentile is used: at least 90 % of the users have a response time of 6 seconds or less, if they do a specific action. This reduces discussions like:
“40 % has a response time of 5.3 seconds. That is quite good.”
“50 percentile has a response time of 6 seconds and the limit is 80 percentile.

Another thing to consider is to determine the worst realistic conditions for the system under test.”

Preparation

“Can automated tests be used with performance tests?”
“I assume you are talking about automated functional tests.”
“Yes.”
“I once got this request and it does not solve the problem. Is your manager writing a business case, a roadmap, and items for the back log for the same release at the same moment? I guess not. Every artefact has his own purpose.
But I wrote a blog post about the combination of automated tests and performance test.”

“When can the scripting start?”
“It is good to have a testable version before the final one.”
“But performance issues might still be in there. Also the interface can still change.”
“Change is always a companion of a tester. What I mean is that a tester should focus on things which will not change on long term. The technical basic components will probably not change. Test data is always needed. Data about the usage of the system is quite stable. Etc. ”

“There are always discussions about the test environment:
“We just put a part of the database in the test environment. “”
“Yes, a copy of the production environment is very expensive.
And yes, a performance test on a reduced environment can give a false impression.
I have a blog post about a huge test environment: Do you really need it?”

Execution or performance

“What would you advise during a performance test?”
“Have a hot line. If things go out of control, make sure everyone knows who to call or mail. Or your favourite communication style.”

Report

“So what should a test report contain?”
“In the report it should be described whether the performance criteria have been met. Percentile graphs are really cool. It is all about a special point in the graph:”

special point

“I would like to see some real life graphs.”
“Sure be my guest. They are on slides 14 and 15 of  the  presentation, A performance test with a tail .”

“What about the resources?”
“That is a good question. This should be covered. A nice pic would be great, but that is something for another time.”

“Thanks for answering.”
“Thanks for questioning. And thanks for reading.”