Nothing sucks like having to wait for ages for a web page to load. In fact, the biggest single reason visitors do not stay at a website is taking too long to load.
A delay in one second results in a drastic reduction in page views, customer satisfaction, and drop conversions.
It’s not only the human that hates slow loading sites but also the search engines. Google uses website speed as one of its ranking factors. Thus, website speed should be overlooked or underestimated as long as you value your online presence.
Discussed below are some tips you can use to skyrocket your website speed:
When someone visits your website, they request certain files that make up that page. These files include HTML files, CSS, JavaScript, and image files. An HTTP request is made for downloading each one of the files individually. According to Yahoo, 80% of a Web page’s load time is spent downloading these files. The more files to be downloaded, the more HTTP requests will be sent and consequently, the website will get slowed down.
That being the case, here are some excellent ways you can use to help minimize HTTP requests:
The smaller your files, the faster your pages will load. Compressing files is the best way to reduce their sizes. Gzip is the most popular and effective compression method currently available for websites. It automatically compresses your website files into Gzip files, drastically reducing the size of your files (reduces the response size by about 70%), reducing the bandwidth of your pages, and increasing your site speed as a result. Approximately 90% of today’s Internet traffic travels through browsers that claim to support Gzip.
For apache server, you can enable Gzip by simply adding the following code into your .htaccess file:
# compress text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript # Or, compress certain file types by extension: SetOutputFilter DEFLATE
Usually, when a visitor’s web browser requests a file from the webserver, it will grab each file individually. This means when it gets a response with the file it closes the connection and then reopens to request a new file.
This uses more processor, network, and memory and eventually leads to a slower website if there’s a lot of load on the server. Enabling HTTP keep-alive allows the web browser and the webserver to agree on reusing the same connection for all the file requests which in turn increases the loading speed.
You can enable keep-alive by copying and pasting the code below into your .htaccess file:
Header set Connection keep-alive
Broken links are not only a drain on bandwidth but they’re also one of the surest ways to get a user to leave your site. Broken links are most commonly found in image source files, which happens when the URL is wrong. Scan your links on a regular basis and fix broken ones as soon as you notice them.
If you have a number of JavaScript and CSS files on your website, there will be a lot of HTTP requests when your website visitors access your website since their web browser will treat those files individually. These numerous HTTP requests will considerably slow down your website.
You can reduce their number by putting all JavaScript files into one single JavaScript file, as well as putting all CSS files into one CSS file. This will reduce their number and thus reducing the number of HTTP requests.
You can reduce reduces the sizes of each file by doing minification. Minifying a file involves removing unnecessary formatting, whitespace, and code.
Since every unnecessary piece of code adds to the size of your page, it’s important that you eliminate extra spaces, line breaks, and indentation. This ensures that your pages are as lean as possible.
Minifying and combining files reduces requests and server load, thus significantly improving your website speed.
Caching is the process of downloading static website files, such as HTML documents, media files, images, CSS, and JavaScript files and temporarily storing them on a visitor’s device’s storage.
That way, the next time they visit the same website, their browser will load the requested web page very quickly, without having to request these files from the server again.
However, caching works for repeat visitors only, since, obviously, first-time visitors don’t have a cached and stored version of the website.
Static resources that are stored in a cache should have a caching lifetime of at least one week and a maximum of one year.
How long you store the cache data depends on the visitor’s browser configuration and the website server-side cache settings.
To set up browser caching on your server, add the following lines on your .htaccess file(you can change the values to your preferred duration):
# BEGIN EXPIRES ExpiresActive On ExpiresDefault “access plus 10 days” ExpiresByType text/css “access plus 1 week” ExpiresByType text/plain “access plus 1 month” ExpiresByType image/gif “access plus 1 month” ExpiresByType image/png “access plus 1 month” ExpiresByType image/jpeg “access plus 1 month” ExpiresByType application/x-javascript “access plus 1 month” ExpiresByType application/javascript “access plus 1 week” ExpiresByType application/x-icon “access plus 1 year” # END EXPIRES
Hotlinking is a practice where websites directly linking to files(eg images, css, js etc) on another website. An example of hotlinking would be using a tag to display an image from your site from somewhere else on the net. The end result is that the other site is stealing your bandwidth and slowing your site down.
This is why you should disable hotlinking and prevent people from stealing your server resources.
To simply stop hotlinking you can add the following to your .htaccess file. Replace example.com on line 3 with your own domain name.
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?example.com [NC]
RewriteRule .(jpg|jpeg|png|gif)$ – [NC,F,L]
You should avoid linking to images on someone’s website altogether and instead, load them on your own server. This is because they can actually slow down your website if the website with the image you linked to is slow and unreliable.
In addition, the other website you are hotlinking to may experience downtime or crash, so always load every image on your own server before you link to them.
Images can greatly influence a website loading speed. Large and heavy images take up a lot of bandwidth and a lot of time to load.
Avoid uploading large image files and using css or html height and width attributes to scale them down to the display size (full large image will still have to be loaded). Instead, always ensure you crop and resize your images to the required display size with tools such as photoshop before uploading.
Also try as much as possible to always save the images for upload in JPEG format(.jpg) as it has a good compression that takes less size (without reducing quality) as compared to other formats.
There are also tools that can help compress images and reduce their image sizes drastically. Examples of such tools are TinyJPG, TinyPNG and Website Planet image compressor among others.
Avoid empty image src tags as the browser makes unnecessary HTTP requests that add unnecessary traffic to your servers and even corrupt user data.
When your website is hosted on one server, each user who visits it sends requests to that same server. The load times are higher for users who are physically far away from your server because the information has to travel for long distances.
Also, if your site experiences high levels of traffic, the time the server takes to process each request increases thus slowing download times for all of them.
However, this problem can be solved through the use of a CDN.
A CDN (Content Delivery Network) is a network of web servers across multiple locations around the world that deliver web content more effectively to end users according to their geographic location. A CDN can host the static files (eg CSS, JavaScript, images, videos, pdfs, etc) of your website in order to deliver them more efficiently and reduce bandwidth and your server load.
With a CDN, the requested web content will be delivered to end-users much quicker, since it will use a server closest to users to deliver the files they request resulting in much faster loading and saving a lot of bandwidth.
Using a CDN can be very expensive, but it comes with quite a lot of benefits, so it’s worth every dime, especially if you happen to use a lot of bandwidth. So, if you have a large website and a lot of visitors, a CDN is your way to go.
Redirects are often necessary when you move and delete pages, and are the best way to eliminate issues with broken links. They are also necessary when accessing member-only areas where users have to login in order to access.
However, redirects create additional HTTP requests and increase load time. So only keep those that are technically necessary and you can’t find any other solution for it.
External scripts on a webpage in the form of JavaScript codes make HTTP requests every time the page loads. This slows down the website. Those external scripts could be live chats, external commenting systems, pop-up boxes, external fonts, website analytics services, social media buttons, and many more.
It is certainly not easy to eliminate all these scripts since some of them are very useful in their functionalities. However, you should reduce them as much as possible and remain only with the most necessary as that will help you speed up your website.
To improve your page load time, make sure you request external files only from fast and reliable websites.
CSS(Cascading Style Sheets) is very important as it plays a critical role in enhancing the presentation, look and feel of the web pages. There are three ways in which CSS can be implemented on a web page:
- External CSS – This is where CSS code is written in an external document and linked to the webpage.
- Embedded CSS – This is where the CSS is written within the HTML code inside the <head></head> tags and within <style> tags.
- Inline CSS – This is where the CSS code is written with the HTML elements in style attributes.
As a general rule, it is encouraged to avoid inline CSS by all means and to use external CSS. This helps in minimizing code duplication as well as getting a cleaner code. This results in reduced file sizes and thus faster loading.
The Code Pot Technologies
Typically replies in minutes