The Common Practices Of Web Design With Speed In Mind

On the web, speed is everything, and that is for a very good reason: we're all familiar with the speed of the many big online services we use, and pretty much everything that is practically slower, won't get any competitive advantage to compete.

You have a website running, and that is probably why you land on this page. Before wondering how you can get more visitors and decrease that bounce rate, ask yourself: is it slow? Can it load faster? Web wanderers and visitors are demanding fast websites that load quickly to continue delivering content without noticeable lag.

If your website falls behind in speed, your website has a higher chance to fail in delivering demands. The result is straightforward: visitors will abandon your website and probably won't ever return.

Among the many things you can do to speed up that loading time, below is a list of the most common things that could be done to improve without much of a hassle. If done right, you won't ever need to worry about visitors leaving your site from slow loading pages.

Do Some Tests. Know The Reasons

Google PageSpeed Insights

You should not blame any aspects or elements on your website for slowing down your pages before knowing what really happen behind the scene. So before concluding anything about "why is my website slow", you need to test it out first.

There are many tools available online to help you find what really went wrong. One example is Google's PageSpeed Insights. The tool can be used by anyone so test any website by just entering the URL.

When using it, you'll get a report that tells you how quick/slow your website is. Also included in the report, are some suggestions in which you can implement to improve performance.

On PageSpeed Insights, reports include three recommendations: should fix, consider fix and passed. The items are: browser caching, image optimization, server response, scripts and CSS above the fold, compression, redirects, minification of CSS, HTML and JavaScript, and prioritization of visible content.

Because these kinds of tools are useful and essentially handy to get a glimpse and solution of what went wrong, it's a good idea to run the test periodically to ensure that everything is working as intended.

This is necessary when your site is exceptionally high on traffic and has contents that are user-generated.

Use Only What You Need And Dump The Rest

WP plugins page

It's really a big temptation to have every features you want on your website. Any of those features added will give an enhancement of user experience that could be the goal of your website. But if one should be sufficient, why use two?

Don't make your website more complicated than they should be. Not only this will benefit the speed of your website, but also your visitors' experience.

Things you install and implement on your site are holding back its performance. So if you have some plugins, modules or add-ons that aren't really needed, their availability on your site will just eat away your server's resources. Furthermore, they may call more HTTP requests and increase your web page's size.

So if you see anything in particular that isn't necessary, it's better for you to dump it.

Are you holding on to plugins or add ons that you just don’t use? It’s time to dump them. Unused plugins from previous web development, disabled modules that may have left some traces in the database and so forth.

Should you consider to add enhancements to your site, whether they are JavaScript files, APIs, CSS, or features to use, make sure that they really do contribute to your website's overall user experience. If not, you better find a better option, or just keep yourself out from installing them.

In addition to the number of features you may want to use, you should also concern about their quality. Some outdated plugins for example, may have bugs or security holes. They may also have poor performance if compared to their newer or more popular counterparts.

Use Social Media Sharing Feature That You Need

Share buttons

The modern web is a social web. Beside search engines, social media networks play an important role in bringing targeted traffic to your website. It's necessary to use only those social media networks that meet your niche and need. For example, a business website that works around the fashion industry may need Pinterest, Facebook and Twitter. But do you really need LinkedIn?

The same goes with the social media sharing that you may have implement on your contents' pages.

How many social media sharing buttons do you really need? How many do you actually need?

If you have a picture heavy pages, you may want to use Pinterest. To those heavy on text could use Facebook.

So too much is not at all good when it comes to social media feature. How many of your users are using anyway? How many of those social media sharing buttons are actually going to be used? Using too many of them will just bog down your page's performance.

Pick one or two social media networks where you are active and where users connect with your website regularly. Only include those buttons and abide the rest. furthermore, you don't want to clutter your page anyway.

Use Images, But Properly

NASA website

The modern web uses CSS to eliminate many previous uses of images for web design. This is essentially great for performance and usability across devices. But the main concerns about using images are when they're used on contents.

Photos, animations, illustrations to videos, all those great visuals and appealing elements can significantly reduce loading time. So for you website's image optimization, it's better for you to choose which one to use, wisely.

Before adding any visual to your pages, ask yourself: is it necessary? Does it provide anything useful for visitors? If not, why should you use it?

Any visual elements on your website, and pages, should be appropriate for the web. As a general rule, images should only be as big as needed. Don't go out by providing the full size photos. Yes they do look good and appealing. But when it comes to the web where visitors are all in a hurry, quality images come second after speed.

And when speaking about visuals, modern websites use extensive icons. When considering icons, you may want to use icon fonts rather than image-based icons. Convert elements to SVG (scaled vector format) whenever you can. And also remember to use CSS for site-wide elements such as buttons, arrows or other interface tools.

When it comes to where those visuals should be hosted, consider using CDN if your site has plenty of static elements that could be cached elsewhere. Putting those heavy elements outside your server could lessen the load of your server. This is useful when you're on a limited hosting plan.

Reduce HTTP Requests And Shrink Sizes

Save for web and devices

When a page is called, elements of your website that include its HTML, CSS, JavaScript and others are downloaded. The more you have them, or the larger in size they are, the slower your site could load. Know what are downloaded when a user visit your website, and know how big are they.

Reducing HTTP request is the first thing you should do. Small files shouldn't be a problem, but too many of them require your visitors' browser to queue tasks before downloading them. The key here is to put similar things together as one. For example, you may have many pictures needed for your web design. Reduce the number of HTTP request by combining those pictures into one file by using sprite.

One big CSS file for a browser to download is a lot better than many CSS files of the same size.

The next thing you should do is to keep the quality while putting down the size. Here, balance is they key. To make use of this, shrinking tools are when things happen.

Some of the services you can use are: TinyPNG, Minify Your CSS, Kraken, SpriteMe, Ezgif and others.

Leverage Caching

Caching

Your website needs to be fast and that is your priority here. Having your website in frequently look for changes is great for real-time contents. But when speed matters, this great feature will make your website slow to load. Your visitors are paying the price, and that is the least they want.

Cache is a temporary file web documents, such as HTML pages and images, so that your website visitors' browser could remember your website when they return. What caching does is reducing bandwidth usage, server load and lag time. Caching is particularly useful when your website has many static contents.

A web cache system stores copies of documents passing through it; subsequent requests may be satisfied from the cache if certain conditions are met. To control there caches, you can use HTML Meta Tags and HTTP Headers, Validators and also Validation.

By eliminating your web visitors' browser to download everything from scratch can improve your site's performance to a whole new margin.

Some of the services you can use include, and not limited to: Apache HTTP Server, Squid, Varnish, Nginx and WinGate.

Maintain Your Website Regularly

Maintenance button

As good as your website gets, there will be a time when things go wrong. Just like housecleaning, your website should be properly maintained in order to keep it working as intended. Not only that proper and regular maintenance will reflect your website as a professional, but it also can give an influence of professionalism on what you're doing.

And as for your cleaning checklist:

  • Optimization on your database. Any revisions, updates or changes could increase the size of your database, or clogging it with things that not anymore needed. Purge things that are no longer part of your website.
  • Fix your links: Any internal or external links should be properly maintained. Broken links may slow down your site. Take a close look at hot links as well because they can also put more weight to your site.
  • Keep things updated: platforms, frameworks to CSS, pretty much everything is updated in a timely manner. Whether they're all about new features, ability, compatibility, bug fixes to security patches, new versions should always be better than their predecessors. Furthermore, new versions should be more stable and more efficient.

Conclusion

On the web, speed matters and so does size. Knowing how your website perform and where they lack should give you an insight on how well it should be in the eyes of your visitors.

After doing all the above, you may want to rerun Google’s PageSpeed Insights tool to see your progress. Should it be faster? Yes, certainly. While to you as a webmaster/web owner the speed don't seem to be visible, but to visitors, a fraction of a second counts as it could be a difference between a happy visitor and an angry one. And with a faster loading website, you know that you excel in speed now.

Further reading: Speeding Up Your Website and Improving Its Performance