Let's start with ...

7 deadly pitfalls that will ruin your website performance

It may sound incredible, but it's true: online businesses and webmasters responsible for maintaining well-optimized high-performance websites tend to overlook many crucial factors and web design elements that eventually will cripple the loading times.

The consequences are usually fatal and irreversible. And believe me, these - unfortunately - common mistakes that can easily kill your website performance eventually will determine the final outcome of the online business competition.

There is only one rule: be the fastest to the finish line and you might win the race!

The so-called "gap of death" basically is a time interval placed somewhere between an ideal 2 seconds page load and a maximal tolerable waiting time of 5 seconds.

And here's the most important idea of this website performance optimization tutorial: a consistent speed optimization strategy must be implemented across all stages of website development, and not just after building the entire site!

Believe me, this is the biggest mistake a developer or site owner can make! The final, additional tweaks and speed optimization tactics implemented after the development phase can improve your page speed, but all your optimization efforts will become pointless if you can't reach the aforementioned gap of death in the initial development phase.

With that having said, let's start to outline our website performance checklist by taking a closer look at 7 important factors that affect the website performance. More precisely, 7 deadly mistakes that must be avoided at any cost ...

1. Low-grade or mediocre hosting service

OK. I know, here at WA isn't an issue.

But the fact remains: with more than one billion functional websites online, the hosting space has become not only overcrowded, but divided and fractured too. The demand for cheap - or at least cost-effective - hosting services has literally exploded in the last decade. The result: the wast majority of the providers are more than willing to compromise their service quality in order to accumulate bigger market shares with low-cost and obviously, poor-quality tiers.

So here's my advice: don't kill your business with your very first step just to save a few bucks! The mistake of opting for a mediocre hosting service can live forever ... and will cost you a tremendous amount of money! Choosing the highest quality hosting service is the key to maintain a high-performance website that can generate vast revenue streams by attracting visitor attention efficiently and accurately.

And one more thing. Choosing a reliable hosting provider is one thing. But, you need to choose smartly your hosting plan too! Usually, you have the following options: free hosting, shared hosting and dedicated or managed hosting. The first one is is for hobbyists. Forget it. The second one is recommended for individuals who are trying to develop a steady online business presence at the lowest possible cost. The third one is the best solution for serious individual marketers and midsize companies interested in setting up a truly efficient long-run online business. Is the most cost-effective and productive option for maintaining an ultra-high performance website. If you are serious about your online business you'll have to create a fast, secure and well-performing website, and for that you'll need a dedicated or managed hosting plan. As I already said, you don't want to kill your business at the very beginning just to save a few bucks - literally! - per month ...

2. Heavy themes and incompatible or wrongly used media files

I know ... It's a knotty question. Fact is, capturing the users attention with lightweight, fast-loading graphics or media elements is very hard in these days. And let's face it, the appealing high quality images and videos are real head turners for online traffic ... if that amazing eye-catching content even reaches the eyes of your impatient visitors fast enough!

My recommendation? Don't choose beauty over speed! Heavy, unprofessional themes and large or poorly optimized media elements take longer in downloading onto the requesting browsers! A showy website and a graphics intensive content usually is far from being the deciding factor in driving conversions and sales. The visual beauty is important, but the value of your content and the quality of your products or services are far more important.

And don't forget the annoying compatibility issues! If you ever tried to display Shockwave Flash media elements in Google Chrome you'll know what I'm talking about ... Similarly, in certain geographic locations government restrictions can also prevent specific multimedia content from reaching local visitors. And so on ...

More than that, all these compatibility issues are potential risk factors that could suddenly appear over time after newly implemented browser updates, government policies, etc.

Here are some golden rules:

• choose a professional theme that can provide beauty and speed at the same time
• don't use too many media elements just to be trendy!
• the visual beauty is important, but the value of your content and the quality of your products or services are far more important
• whenever you can, try to avoid uploading large media files to your server; embedding media elements from a third party server is always better
• every single media element must be perfectly optimized (file type, file size, etc)
• don't forget the involved compatibility issues

If you respect the above rules and you'll have real chances to reach the gap of death in the development phase. If you neglect them, your site will generate excessive client-server communication cycles to reach the requesting browsers, eventually deteriorating your website performance ... and killing your business.

3. Wrongly chosen plugins and/or widgets

Another knotty question. Adding additional features and functionality is a must if you want to create an outstanding user experience. On the other hand, every single new add-on - even the smallest one - can cause dramatic shifts in your performance indicators. And I'll give you only one example: the tiny Google Plus button widget could increase the loading time of your page by as much as 2 seconds! It may sound incredible, but it's true ...

The golden rule is extremely simple: keeping your add-ons limited to the absolute minimum is crucial to achieving the optimal website performance. In plain English: if you are considering using a plugin, you don't need it!

And needless to say, the quality and the functionality of your installed plugins matters far more than the actual number itself. One example: plugins that query large streams of data to perform complex operations should do this off-server, and not within the hosting environment itself. In other words, the number is not entirely a concern if the installed plugins are developed well to avoid complex actions and expensive server processing.

Before you install another new plugin, ask yourself the following questions:

• Does it perform complex operations?
• Does it load many content assets and scripts?
• Does it increase the number of database queries to each page request?
• Does it perform requests to external APIs?

If the answer to these questions is YES, your reaction to the plugin in question should be a huge NO! If is not a vital component, forget it! If provides essential functions try to find another similar, but properly developed plugin.

Similarly, using more lightweight plugins for simple and unique tasks is much better than deploying one monster plugin to perform all of the complex tasks by itself. Exceptions include high-quality plugins or suites developed by credible developers and industry leaders, such as W3 Cache, Yoast, All In One SEO Pack and the likes.

4. Selling (too much) real estate to third-party advertisers

This is another common mistake. I know, selling advertising space is a proven monetization method and is always tempting ... But, here's the thing: too many - usually slow loading - ads will drastically degrade your website performance. The result? Hair-raising bounce rates.

And here's a less-known secret: the cost of generating revenue with banner advertisement is almost 33% of additional latency! Similarly, the very popular, but intrusive pop-up ads will further aggravate your visitors into abandoning your site at even higher rates.

The golden rule is very straightforward: the financial losses caused by high bounce rates will always outweigh the potential monetary benefits of handing over vast website spaces to third-party advertisers.

5. Coding factors

Yes, I said coding.

The standard Wordpress text-editor and the modern visual builders will allow you to insert additional scripts or custom HTML, CSS, etc code segments into your posts or pages. The most common examples: affiliate codes, sign-up forms, analytics scripts, etc.

And yes, I know, we are talking about extremely short code segments ... Usually a few lines. Still, those few additional lines will take up valuable memory space fragments on the hosting environment requiring additional processing cycles in delivering the content to end-users. And the really nasty thing: when you have multiple additional code segments, the essential web content assets and plugins with lengthy code will end up competing for tiny memory spaces in short processing cycles. As a result, each component performs unpredictably, usually consuming more processing cycles than expected.

First of all: the HTML files usually includes several redundant code instances (<Tags>, <Alts>, <HTML> and the likes). This is why is important to ensure consistency in your HTML and CSS code segments. Google recommends the following techniques:

• consistent casing; mostly lowercase
• consistent quoting of HTML tag attributes
• HTML attributes specified in the same order
• CSS key-value pairs specified in the same order by alphabetizing them

Another quite important and often overlooked issue is the speed-optimized CSS delivery. Here are a few best practices:

• shorthand coding: you can easily cut down the size of your code by using fewer declarations and operators; fewer lines of code mean fewer processing cycles and a more efficient delivery of the website files to the requesting browser
• code positioning: load the CSS code inside the <head> and the JavaScript inside the body; referencing the CSS outside of this section prevents the web browser from displaying the CSS content immediately after downloading it
• CSS delivery: use only one external CSS style sheets; do not use the "@import" call; use small inline CSS instructions

The golden rule: avoid adding ANY unnecessary weight to your website!

6. Mobile friendliness

In case that you didn't know: 2013 was hailed as the "year of responsive web design". And according to the industry analysts mobile is already pushing desktop into the twilight zone. It may sound a bit exaggerated, right? Until you read the following stats ...

• 87% of U.S. citizens own mobile devices and 45% of them own smartphones
• 90% of them go online via mobile, averaging 1.4 hours of mobile internet browsing every day
• more than one-fifth of the global population has a constant smartphone subscription; that means almost 2 billion people!
• 60% of consumers use mobile devices exclusively to make quick purchase decisions

You'll have to embrace the fact: the demand to satisfy the needs of mobile users will continue to rise. Exponentially.

And what is even more important:

• 60% of mobile users expect mobile websites to load within 3 seconds
• an average mobile takes around 6-10 seconds to load a well-optimized page, but on average, 3 in 4 people will abandon a mobile website if it takes any longer than 5 seconds to load

The excessive delays in mobile page load times will occur mostly when a website isn't specifically optimized and designed to deliver equally high performance on a mobile device interface. Basically, these two entities – mobile and desktop – should be treated separately, at least from a website design standpoint. And I know what are you saying right now ... "any modern Wordpress theme is 100 percent mobile-friendly nowadays" ...

Yes, that's true. But! Even with a mobile friendly theme and dedicated smartphone-optimized pages mobile users are not always redirected efficiently to the intended mobile-versions requested by the mobile browsers. The point: the desktop version of a web page must be correctly mapped to an equivalent mobile version, and very often misguided or inaccurate redirecting instructions are causing additional delays in loading the correct version or information. Fact is, many site owners are losing serious competitive advantages in the mobile space when the mobile traffic is redirected toward irrelevant desktop website versions, instead of delivering a speed-optimized mobile solution.

And there is more ... Only 10% of the waiting period is defined by the HTML response to browser requests, and the remaining 90% of the delay is caused in rendering pages, parsing HTML, executing code scripts and retrieving embedded assets!

All in all: issues such as faulty redirects, unplayable videos, bloated images, irrelevant cross-linking and unnecessary assets delivered to mobile visitors can easily kill your website performance.

The result? Low mobile traffic, lack of mobile purchases, degraded brand value, decreasing customer loyalty, etc.

The golden rule: getting it right with thoroughly designed websites dedicated both for desktop and mobile platforms enables customers to make quick and educated purchase decisions that ultimately could create never-ending revenue streams for you.

7. Image optimization

As you already know, the loading time depends on the total size of content assets being downloaded from the hosting servers to the requesting browser. And obviously, larger files take longer to download than smaller files. Also, according to HTTP Archive:

Images made up for on average 65% of a webpages total weight.

In other words, efficiently optimizing your images can be one of the easiest ways to see performance improvements with your WordPress website.

Let's see the most important considerations ...

• Number

Keep the number of images to an absolute minimum. Don't use more images than you really need! And don't use images - or more images - just to be trendy or colorful.

• Format

The most common format is JPG. You should use JPGs whenever quality is important and image modifications are not required before uploading the image. For images with icons, logos, illustrations, signs, text and transparent backgrounds, the recommended format is PNG. Finally, for animated images the standard format is GIF. And whatever you do, avoid using BMP and TIFF.

• Size

The most important thing: resize your images offline to the exact desired size before you upload them. And whenever is needed, use browser resizing capabilities to make images responsive by setting up fixed width and auto-height CSS instructions. Otherwise the Wordpress content management system will be forced to perform automatic resizing operations in order to adjust the actual dimensions accordingly. These additional calculations could increase the loading time dramatically, especially on image-heavy websites.

• Compression

There is only one secret: you'll have to find the optimal balance between size and quality. For JPGs, I recommend a medium quality image or a compression of 60-70 percent. These levels usually will produce a good size-quality balance. For retina screens simply increase the original image size by 200 percent, the compress level by 40 percent and then scale it down again as per required dimensions.

OK. The most important idea again: a consistent speed optimization strategy must be implemented across all stages of website development, and not just after building the entire site!

Now let's assume that you've already created your website and you've managed to reach the gap of the death. What's next? Well, in the next step you'll have to identify the potential improvement areas. So let's move forward to the next point of our website performance checklist!