Faster Websites in 60 Seconds with preload and prefetch

Are efficient developers lazy or are lazy developers efficient? Ask this open ended question at your next interview and you will have an interesting conversation. While the goal is to improve performance, if we can do it in a lazy fashion (60 seconds or less) it's a win-win! This performance tip is rarely applied in our industry and we're all missing out! According to the 2019 State of the Web Report, only 14% of desktop site are using preload and about 1% are using prefetch.

preload

Preloading assets tells the browser to load critical assets earlier in the page loading lifecycle and as a result improves page load performance. Critical assets are the resources (JavaScript, CSS, images, fonts, etc) that are required to render the initial page or the displayable screen above the fold. For examples of preloading assets refer to Listing 1. It's very important to include the as attribute when preloading assets because it sets the content-type header, accept header, loading priority, and helps cache the asset for future requests. A complete listing of the content types that can be preloaded are listed here.

// Without preloading
<link rel="stylesheet" href="fancybox.css">
<script src="fancybox.js"></script>

// With preloading
<link rel="preload" href="preloaded-image.jpg" as="image">
<link rel="preload" href="fancybox.css" as="style">
<link rel="preload" href="fancybox.js" as="script">

Listing 1. Preload critical assets

prefetch

Prefetching assets tells the browser to load these non-critical assets in the background after the page loading lifecycle has completed. As a result, these assets will be cached for future page navigations which greatly improves page load performance. For examples of prefetching assets refer to Listing 2.

// Without prefetching
<link rel="stylesheet" href="fancybox.css">
<script src="fancybox.js"></script>

// With prefetching
<link rel="prefetch" href="preloaded-image.jpg" as="image">
<link rel="prefetch" href="fancybox.css" as="style">
<link rel="prefetch" href="fancybox.js" as="script">

Listing 2. Prefetch non-critical assets

Auditing Performance

How much can your site gain by preloading and prefetching assets? Find out using Lighthouse in Chrome's Dev Tools (see Figure 2). Check the "Performance" option and run the audit. Then refer to your estimated savings report to see your performance improvement opportunity (see Figure 3). A faster site will also boost your SEO score so this lazy technique has an additional benefit of boosting revenue!

Figure 2. Chrome's Performance Audit via Lighthouse

Figure 3. Performance savings report by preloading and prefetching

SEO Tips to Boost Revenue

How much can your company lose if your Search Engine Optimization (SEO) strategy is poorly designed? 87% in profit loss! That's right, Asos learned this lesson the hard way. Their root cause was attributed to a poor site redesign. Asos released 200 locale-specific versions of their site which negatively affected their search engine rankings and ultimately their profitability. How can we build an effective SEO strategy? Let's review a few basic and advanced techniques to keep our SEO and profits in the right direction.

SEO Fundamentals

• Title tag - The most important SEO element is the <title>My page title</title> tag. The title's description becomes the pages title as shown in the search engine response page (SERP). The title tag may be up to 50 characters in length.
• Meta description - The 2nd most important SEO element is the <meta name="description" content="My description text up to 155 characters..." > The meta content becomes your pages description as shown in the search engine response page (SERP).

Advanced SEO

We can now add structured data (JSON-LD) to our content which has multiple benefits: 1) It is an opportunity to show additional search engine response data. 2) It provides rich and meaningful information about our sites. For example, the new Software app component allows us to list our native mobile apps within our search results (see Figure 1).

Figure 1. Structured data for Software app listing (New)

The following are just a few of the structured data elements available today:

• Articles
• FAQ
• Local business listing
• Products
• Software app
• Reviews
• and more structured data components

Need help authoring and validating your structured data? Google has a Structured Data Markup Helper and Structured Data Testing Tool to help assert your data is correct.

Auditing SEO

Will your site pass an SEO audit? Let's find out using Lighthouse in Chrome's Dev Tools (see Figure 2). Check the "SEO" audit option, run the audit, fix any errors, and your profits will soar!

Figure 2. Chrome's SEO Audit via Lighthouse

10 Tips for Growing Healthy Team Relationships

How to Win Friends and Influence People by Dale Carnegie is one of the best-selling books of all time. I read this book in 2014 and since then I find myself referring to the notes from this book more than any book I own. The principles discussed within this book are timeless and apply equally well for teams as they do individuals. Why is this book so important for team health and team success? Dale Carnegie answers this question in his introduction when he explains why he wrote this book. He explains the #1 trait for success is human engineering or how well we work with people (see Figure 1).

Figure 1. Most valuable traits for success

Principles for Improving Team Health

The listing below contains all the principles Dale Carnegie discusses in his book. While each principle is very important I'm highlighting a few key points that also help grow healthier team relationships.

Part I - Fundamental techniques in handling people

• Principle #1: Don’t criticize, condemn or complain.
• Principle #2: Give honest, sincere appreciation.
• Principle #3: Arouse in the other person an eager want.

Part II - Six ways to make people like you

• Principle #1: Become genuinely interested in other people.
• Principle #2: Smile
• Principle #3: Remember that a persons name to them is the sweetest and most important sound in any language.
• Principle #4: Be a good listener and encourage people to talk about themselves.
• Principle #5: Talk in terms of the other persons interests.
• Principle #6: Make the other person feel important and do it sincerely.

Part III - How to win people to your way of thinking

• Principle #1: The only way to get the best of an argument is to avoid it.
• Principle #2: Show respect for the other persons opinions. Never say you are wrong.
• Principle #3: If you’re wrong admit it quickly and emphatically.
• Principle #4: Begin in a friendly way.
• Principle #5: Get the other person saying “yes, yes” immediately.
• Principle #6: Let the other person do a great deal of the talking.
• Principle #7: Let the other person feel that the idea is theirs.
• Principle #8: Try honestly to see things from the other persons point of view. (Dale Carnegie said this was the most important thing to remember from the book!)
• Principle #9: By sympathetic with other persons ideas and desires.
• Principle #10: Appeal to the nobler motives.
• Principle #11: Dramatize your ideas.
• Principle #12: Throw down a challenge.

Part IV - Be a leader: How to change people without giving offense or arousing resentment

• Principle #1: Beginning with praise and honest appreciation if you must find fault.
• Principle #2: Call attention to peoples mistakes indirectly.
• Principle #3: Talk about your own mistakes before criticizing the other person.
• Principle #4: Ask questions instead of giving direct orders.
• Principle #5: Let the other person save face.
• Principle #6: Praise the slightest improvement and praise every improvement be hearty in your praise.
• Principle #7: Give the other person a fine reputation to live up to.
• Principle #8: Use encouragement and make the fault seem easy to correct.
• Principle #9: Make the other person happy about doing the thing you suggest.

---

Favorite quotes for each highlighted principle

Don’t criticize, condemn or complain

• When dealing with people we aren’t dealing with people of logic we are dealing with people of emotion.
• Rewarding for good behavior is more productive than criticizing. Criticizing is futile.
• Never insult or ridicule anyone. -Abraham Lincoln
• Criticisms are like homing pigeons they always return home. Those you condemn will likely condemn you back.
• If you want to gather honey, don’t kick over the beehive.
• Don’t worry about the snow on your neighbors roof when your doorstep is unclean.

Give honest, sincere appreciation

• There is only one way of getting someone to do something, make them want to do it.
• Everyone likes a compliment. -Abraham Lincoln
• The way to develop the best that is in a person is by appreciation and encouragement. Criticism from superiors kills ambition. -Charles Schwab
• Lack of appreciation is why most people leave.
• Appreciation is sincere. Flattery is telling people what they want to hear. Forget flattery, always use sincere appreciation.

Arouse in the other person an eager want

• The only way to influence other people is to talk about what they want and show them how to get it.
• Before you try to influence someone try to ask yourself, "How can I get them to want to do it".
• The secret to success is to view things from the other person’s point of view as well as your own -William Ford
• Arouse in the other person and eager want. Let them know how what I want will benefit them.

Smile

• The expression you wear on your face is more valuable than the cloths you wear.
• A smile says I like you or glad to see you. A babies smile has the same effect.
• People rarely succeed at anything unless they have fun doing it. He said, one employee chose a small company because their voice on the phone was energetic and friendly.
• Most people are as happy as they make their mind up to be. -Abraham Lincoln

Remember that a persons name to them is the sweetest and most important sound in any language

Personal story:

• When I was an independent training consultant the first thing I did at the beginning of each class was write down the names of each student. Then, I'd refer to everyone by name via my hidden "name" cheatsheet. It was amazing how many positive comments I received in my evaluations in regards to this simple principle!

The only way to get the best of an argument is to avoid it

• If you argue and win you'll never get your opponents good will. -Abraham Lincoln
• If you win the argument you lose it. If you lose the argument you lose it. Always avoid an argument.
• When two people always agree one of them is not necessary.
• When we disagree we are communicating with someone that has similar interests.

Show respect for the other persons opinions. Never say you are wrong

• If you can be right 55% of the time you can make a million dollars a day on Wall street. If you are only right 55% of the time how can you tell me I am wrong.
• Be wiser than other people if you can but do not tell them so. -Lord Chesterfield
• Never tell anyone they are wrong even if you know they are.

If you’re wrong admit it quickly and emphatically

• Better to be told you’re wrong by yourself than from someone else.

Try honestly to see things from the other persons point of view

• Try to honestly put yourself in the other persons shoes.
• Ask why he or she would want to do it - this is thinking from their point of view.
• For example, instead of yelling at boys for building an illegal campfire start by telling stories of your enjoyable campfire stories and then talk about how important it is to put the fire out afterwards. This approach is less threatening and is thinking from the others point of view.

Ask questions instead of giving direct orders

• Say "You might consider this", or "What do you think of that"? Gives people a sense of pride.
• People are more likely to accept an order if they have a say in the decision.

Give the other person a fine reputation to live up to

• Give people a reputation to live up to and they will want to live up to that reputation.
• For example, if you tell someone to keep up the great work they'll work hard to maintain that reputation.

Scaling Agile vs High-Performance Agile

Figure 1. Vasa

The Vasa (see Figure 1) is one of the biggest architectural failures of all time. The Vasa was designed to be the most powerful armed vessel in the world - two full gun decks with 72 bronze cannons. Surprisingly, in 1628 this massive vessel sank only 1,400 yards into its maiden voyage because it was too top heavy. The Vasa was built for scale and power but had no agility. Structures built for scale or speed require different architectural strategies. Agile teams also require different team structures to achieve either scale or performance. Let's discuss the differences.

Scaling Agile

A Team of Teams strategy (see Figure 2) is an ideal structure for scaling agile. Refer to my 2-part series on Team of Teams to learn more about the key ingredients for scaling agile and several strategies we can implement to build more scalable agile teams.

Figure 2. Team of Teams structure for scaling agile

High-Performance Agile

Do you see any short-term limitations that will reduce performance in the Team of Teams diagram? It's the lines that represent communication. For example, would that diagram be easy to maintain if it was a dependency diagram? No, the overall coupling would be very high. That diagram violates the Law of Demeter and as a result becomes less efficient and more difficult to maintain. Am I saying a Team of Teams strategy is wrong? Not at all, the benefits out weight the disadvantages. However, if your organization has a business driver to complete a short-term project in record time our team structures must adapt to gain maximum team performance.

Figure 3. Decoupled team structure for high-performance agile

When speed becomes the #1 business driver for a short-term project a decoupled team structure (See Figure 3) promotes less distractions, more dedicated focus time, and higher quality. Furthermore, the team size is actually scaled down to reduce communication dependencies. To achieve more performance with fewer resources teams often employ higher skilled resources that are capable of handling multiple roles within the team.

Running your first Gatling load test in 10 minutes or less

How many concurrent users can your infrastructure handle? Do you know when your most critical features have regressed in performance? Will your website survive a Denial of Service attack? If you are unsure, Gatling's lightweight and powerful capabilities will help answer these questions.

Advantages of Gatling

• Gatling is load testing as code which is ideal for integration with DevOps, Continuous Integration, and build tools.
• Simulate thousands of requests per second against your APIs and applications.
• Identify or troubleshoot performance and load issues.
• Are your APIs and website C10k compliant? Determine how many concurrent users your infrastructure, APIs, and applications can handle.
• Test your public APIs and applications against Denial of Service attacks.
• Automatically generates an exhaustive, dynamic, and colorful report with high-precision metrics.
• Performance is measured in percentiles which is more reliable than averages.

Gatling Installation (5 minutes)

Gatling has several installation options:

• Download Gatling's bundle and run Gatling locally as a standalone tool (recommended).
• Install and run Gatling via a build tool.
• Install and run Gatling using an IDE.

Gatling Directory Structure

Source code directory:

• $GATLING_HOME/user-files/simulations (directory for your Scala load tests)
• $GATLING_HOME/user-files/resources (directory for your users.csv file if you need a load test with multiple unique authenticated users)

Running your first load test (5 minutes)

1. Copy/Merge the user-files directory from my GitHub repo to your local $GATLING_HOME directory. The $GATLING_HOME directory will be your Gatling download directory. Refer to the user-files/simulations directory for tests.
2. Run Gatling locally as a standalone application by running the following command:
• On Linux/Unix: $GATLING_HOME/bin/gatling.sh
• On Windows: %GATLING_HOME%\bin\gatling.bat

Gatling will prompt a few questions:

• Which test to run? Choose any test simulation to run.
• Enter an optional test description? Hit enter to skip.
• When the simulation is done, the console will display a link to the HTML reports.

Load Test Examples

Refer to the user-files/simulations directory for test examples. I have a few authenticated and unauthenticated load tests for REST APIs and a website. The authenticated tests refer to user data (users.csv). The Gatling installation also has several load tests for Web applications (refer to tests in $GATLING_HOME/user-files/simulations/computerdatabase).

• REST API load test (authenticated)
• Web login load test (authenticated)

Reports

Load test reports are automatically generated in $GATLING_HOME/results when your load test completes. Refer to the console when your test finishes for the full path. Gatling creates beautiful charts!