Speeding Up Your Website and Improving Its Performance

Everybody deserves a fast web experience. On the internet, everyone is in a hurry. and having a slow website is the least you want. To give the best user satisfaction, you should put your efforts to decrease your website's loading time. Your website shouldn't be at all different that any big and popular websites: always improving overall site quality and increase user satisfaction. And when it comes to user satisfaction, speed is one of the main criteria.

When your website is first launched, you may see that it is fast. But eventually, when your site is receiving more traffic and added more contents, you may notice that the speed decreases. Page loads are taking forever, if they load at all. Slow websites will not be popular with search engines and human visitors, giving it a high bounce rate.

"Experiments demonstrate that increasing web search latency 100 to 400ms reduces the daily number of searches per user by 0.2 percent to 0.6 percent. Furthermore, users do fewer searches the longer they are exposed. For longer delays, the loss of searches persists for a time even after latency returns to previous levels." said Google.

Web Server

Your web server is where your website is hosted. Choosing a suitable hosting is the first step in starting a website. Hosting with a professional configuration can be a big help, freeing you from setting up your server by yourself.

As your site grows, it will have more visitors. More contents, more links, more scripts and more traffic always equal to more hunger for computing power. Have your web server to be able to sustain all the computing power and backend software you need.

Many websites and web applications, especially CMSs (Content Management Systems) depend on the response time from the database. Because a lot of hosting companies host your database on a separate server than your website, you should see how fast your server respond. On smaller sites, the difference may not be much. But on more complicated and advanced sites, the load times can be excruciating. Having your database hosted on a separate server from your website is fairly common, and does have the advantage of redundancy. If you have problem with loading speed concerning this, you can have your website and your database hosted on the same server. Flushing the buffer early can further increase 200 to 500ms of a page's loading time.

If you don't want to run into issues later on down the road, you need to make sure that your hosting company can handle everything you want to throw at it. And that means more than just the number of visitors and files you want to cover.

The next thing you should see is your Entity tags (ETags). These are the mechanism that web servers and browsers use to determine whether the component in the visitor browser's cache matches the one on the origin server. ETags represent the components of your website, these include: images, scripts, stylesheets, etc.. Adjust your ETags accordingly. If you're not taking advantage of the flexible validation model that ETags provide, it's better for you to just remove the ETag altogether.

Content Delivery Network

A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. The main purpose to use a CDN is to serve content to end-users with high availability and high performance. Because CDNs serve a large fraction of the internet's content that includes: web objects (text, graphics and scripts), downloadable objects (media files, software, documents), applications (e-commerce, portals), live streaming media, on-demand streaming media, and social networks, you may consider to use one if your website needs a boost in speed.

The server selected for delivering content to a specific user is typically based on a measure of network proximity. The server with the fewest network 'hops', or the server with the quickest response time is chosen.

Caching

Caching for websites is a mechanism for storing your web documents, such as HTML and images in a temporary storage (caching) to reduce bandwidth usage, server load, and perceived lag. A cache stores copies of documents passing through it; subsequent requests may be satisfied from the cache if certain conditions are met.

Expires headers tell the browser whether a resource on a website needs to be requested from the source or if it can be fetched from the browser's cache. When a website has an expires header for a resource, the browser will store that resource in its cache. So when the visitor visits your site the next time, the page will load faster because the browser has already cache those resources.

Mobile pages redirect users to a different URL (for example www.yoursite.org to m.yoursite.org). By making your website redirects cacheable, you can decrease the loading time for the users when they return to your site. You can use a 302 redirect with a cache lifetime of one day. It should include a Vary: User-Agent as well as a Cache-Control: private. If your website doesn't support any specific mobile version, or is designed to be responsive, it can't have this mobile redirect problem.

You can further improve your website's performance by optimizing responses by making it cacheable, for example.

Knowing where to cache and what may interfere with your caching can make the difference between a load time of 3000 ms and 50 ms.

Keep-Alive

A Keep-Alive signal is often sent at predefined intervals and plays an important role on the internet. After a signal is sent, if no reply is received, the link is assumed to be down and future data will be routed via another path until the link is up again.

HTTP Keep-Alive allows TCP connections to stay alive and it helps reducing the latency for subsequent requests.

Gzip Compression

Gzip is one of the most popular and effective compression method available, reducing the response size by about 70 percent. Gzipping reduces the size of the HTTP response and helps to reduce response time. It's an easy way to reduce page weight.

"Approximately 90 percent of the internet traffic travels through browsers that claim to support gzip," said Yahoo!.

Website Contents

People visits your website because of its contents. Your website's contents are the most important things that you can manipulate to increase you website's loading speed.

As your website's content increases, the number of pages your website has will also rise. Sometimes to indicate the new location of a URL, track clicks and to connect different parts of your site together, or serve multiple domains, you need to redirect the browser from one URL to another. Redirects trigger an extra HTTP request and add latency. To prevent any necessary increase in your website's loading time, keep redirects which are technically necessary.

Never reference URLs in your pages that are known to redirect to other URLs. Never require more than one redirect to get to a given resource. And minimize the number of extra domains that issue redirects but don't actually serve content.

If you are caching your website, minimize the use of links with a "?" in it. The wildcard is meant to provide up-to-date information by abandoning all cached content. And to take links consideration a bit further, avoid bad requests from broken links that result in 404/410 errors and use consistent URLs.

Your website's content also serves most of the request and bytes. Minify your codes by removing comments, CDATA sections, unecessary white spaces and empty elements.

DNS lookups take an amount of time to look up the IP address for a hostname. Browsers are unable to do anything until the lookup is complete. Reducing the number of unique hostnames can also increase your site's response times. Decrease your website's DOM numbers with the markup of your page, like for example, stripping your browser's default formatting.

Additional elements such as iframes can decrease your website's loading speed. Filters and cookies that enhance your website's ability to deliver information is adding the things that actually slow your site down. Using less of these is better.

Images, CSS and JavaScript

Visitors visit you site to read your contents. And on the modern days of the internet and web design, your contents should be presented in the most attractive way possible. To do this, most modern websites are designed with CSS, and most pages are populated with adequate amount of images with JavaScript to enhance user experience.

However, these elements do increase loading time. The more of these you have on your web page, the more time it takes for your website to load completely. To counter this problem, you need to optimize these elements so they won't take much of your website's loading speed. Always try to minimize the codes in these elements and remove any unused ones.

Specify Image Dimensions

Your browser begins to render a web page before images are loaded. Specifying image dimensions helps it to wrap around non-replaceable elements. If no dimensions are specified, your browser will reflow once the images are downloaded. In order to do that in the HTML image tag, use height and width tags specifications.

A lot of sites mishandle their images. Since most people understand that larger images take longer to load, a lot of sites use thumbnails to display several images, and allow their larger images to load on their own separate page. This is good practice, but it can also slow down your site if it isn't done correctly.

A method that has become popular is to upload an image once at it's largest size, and then use the site to resize and display that same image as a thumbnail. This isn't necessarily a bad thing, especially if there's only one image on the page. But problems arise if your server is generating these thumbnails on every request instead of generating them only once and then storing them for later use (caching them). When you have multiple images displayed in this way and don't have caching properly configured, it can cause noticeable performance issues.

Don't use dimensions to scale images on the fly because users will still be downloading the original file size, even if the image doesn't take up as much space on the screen.

Optimize Images

Images can contain extra information embedded in the file and use useless colors. For example, JPEG files may include the name of the program that wrote them. You can also use PNG images and make them smaller by changing the way the image is encoded using a transformation called lossless. The compressed image looks identical to the uncompressed image, but uses fewer bytes. Optimizing images can help users on slow connections.

If you still want to use large images, you should make sure that you also have smaller copies of the photos to use as thumbnails. And make sure that the picture you upload is already the size that you want to display.

To take things further, you can Sprite your images. Sprite in web design is to combine numerous small images/icons into a large image. This will significantly reduce the number of requests the browser makes to the server, With Sprite, the size of your page might not change but since the number of HTTP requests are reduces, your web page can load much faster.

CSS and JavaScript Positions

Putting stylesheets in the document head of the page prohibits progressive rendering, so browsers will block rendering to avoid having to redraw elements of the page. In most of cases, users will see a white page until the page is loaded completely. This also helps you to make a standard web page according to W3 standards. JavaScript code at the bottom of the page serves for the same reason.

Different websites behave differently when the position of their stylesheets and JavaScript are changed. Make sure that your website responds and displays correctly before implementing their final positions.

External Resources

There are countless of extensions, add-ons, scripts that you can use for your website. To name a few, you can have weather listings, site statistics, news feeds, YouTube videos, Flickr photos, Facebook boxes, count downs, Twitter's tweets, store fronts, advertising, etc..

The problem with using external resources is the same as the database problem when it's being hosted on a different server. As your web page loads, it uses that code to send out a request. The more requests that your site has to make through the network, the longer it will load.

To eliminate this kind of problem, you should make sure that you only use the necessary resources you need for you website. And if you have external sources for your CSS and JavaScript files, it can be a good choice to combine them with your existing CSS and JavaScript files, then host them on your own server.

Understanding Your Users and Visitors

Most if not all websites operate with significant differences between the anonymous visitors and authenticated users to their site. Usually, authenticated users have access to different areas, or are allowed some level of personalization, features, etc.. On the other hand, anonymous visitors have no need for these things.

Anonymous visitors may do well with cached content that is aged a few minutes or hours. But for authenticated users, you may give them a priority over those anonymous visitors by giving the most up-to-date content on your site.

If the majority of your site is meant to be used for informational purposes with very little or no interaction from your visitors - then there is no reason for you to not be caching. Essentially, the more of your site's visitors who are anonymous, the more effective your site's cache will be. If you do not plan on having a lot of updates or new content posted every day, there is no reason why you shouldn't be caching your site.

Interactivity from your visitors may increase the number of database queries. The more your website fetch information from your database will increase the chances your website to become slower.

Conclusion

There are many types of website made with different web programming languages that ran on different types of databases on different types of servers. Because of that, there are many other methods to speed up your website. But the main ways to increase a website's loading speed is usually by reducing the number of bytes and reduce the requests.

Although a site's loading speed is not the main goal, an ideal website with a bad load time will find it hard to achieve success. Run the fastest website you can in order to reach your goals faster.