When you’re surfing the web, nothing is more annoying than a website that loads slowly. It’s also not a good sign for Google and, for shop operators, every millisecond more of loading time means losses in sales.
So, it’s crucial to make sure your website is fast enough. Here, you will learn what’s slowing you down and how to cut those brakes.
Generally speaking, loading speed is the time a website requires after clicking on a link until it is displayed in the browser. In addition to “loading speed,” the terms “loading time” or “page speed” are also used. An online search for this term will produce various designations for the same phenomenon.
Along with page loading time, the Time-to-first-byte (TTFB) is also important. This is the time that expires until a client receives the first byte from a server.
Since April 2010, the loading time of a website has been an official ranking factor for Google. But, of course, loading time alone is not responsible for a good ranking. It is only one of hundreds of various factors that can influence ranking in the SERPs. But especially in competitive arenas, a fast-loading website can make the difference for better ranking.
There are many methods for determining the loading time of a website. You can, for example, read your server log files or stop them manually. Actually, a slower site load is often relative, because every user experiences time differently. But if you use valid data, you can better optimize the loading time in the long run.
Google PageSpeed Insights: Google makes a free tool available that you can use to measure your website’s performance. With this tool, Google works with a score of 100, which is the maximum amount of points. After entering your URL and the analysis, you receive not only information about loading time, but also what you can do to improve it. The numbers and notices provided by Google, however, often confuse beginners
Figure 1: Start page of Google PageSpeed Insights
Google Analytics: If you analyze your website with Google Analytics, you will find numbers about loading time in the “Performance” area. Click on “website speed.” An advantage: If you have also installed e-commerce tracking, you can directly evaluate how the loading speed affects conversions.
Google Search Console: In the Google Search Console, you will find loading times related to crawling statistics under the menu point “Crawling”. There you will be shown how many kilobytes are downloaded per day and how long the Googlebot requires for downloading one of your sites in milliseconds. The process is especially interesting here, and you can discover loading problems, for example, more easily.
OnPage.org: In addition to the Time-to-first-byte, OnPage.org also shows the page load time. At the same time, the respective loading time is graded. This report is also usable in the free OnPage.org FREE version.
Yslow: This is a tool that was developed by Yahoo!. You can use it as a bookmarklet, a tool for the command center, or as a browser extension. The rules for speed are based on the specifications of Yahoo!. The tool is also interesting for advanced users because of the command-line functions. Note that the plugin, Firebug, must also be installed to use the plugin via Firefox.
Figure 2: Yslow
Pingdom.com: You must register to use this tool. It shows you the loading time of your website in the form of diagrams and statistics, which simplifies the evaluation. Thus, for example, you can quickly see which elements are slowing your site down.
Figure 3: Pingdom
WebPageTest.org: Here you can simulate the loading time with various browsers. You can also test from various locations. In this way, for example, you can test how quickly a site loads for visitors from other countries.
Which Loads Faster: This web-based program follows a more competitive approach, because it compares the loading time of two sites with one another. The Website Speed Ranker, with which you can compare up to four sites at a time, functions in a similar fashion.
There are many reasons to prioritize a fast loading time:
1. Positive User Experience: According to a study from kissmetrics, nearly half of all Internet users expect a loading time of less than two seconds. If the loading lasts for more than three seconds, 40 percent of visitors will leave. Thus, the shorter the loading time, the higher the stay time of the user and the lower the bounce rate. Poor website performance can frighten visitors away. According to another survey, nearly 80 percent reported that they do not visit a slow website a second time.
2. Ranking factor: For Google and other search engines, a positive user experience is an important factor for determining the quality of a website. Therefore, Google has also elevated page speed to a ranking factor. The faster your website loads, the higher your chances for good rankings.
3. Sales: A delay in loading time of one second can reduce conversions up to seven percent, according to this study. While that might not seem like much, let’s look at this simple calculation. If your online shop does daily sales of 1,000 euros, the delay of loading time can lead to a loss of 70 euros per day. In a month, this will lead to a loss of 2,100 euros. Calculated over a year, a slow website is a real sales killer.
4. Crawling: Slow-loading websites are crawled more slowly by the Googlebot and are not so intensively crawled, because it only has a limited budget for crawling. With the loading speed, you therefore also determine how well your website is crawled and how current your contents in the Google index are.
In general, a website should load in fewer than two seconds in order to create a satisfactory user experience. The shorter the loading time, the better. If it is less than one second, this is very good.
These factors influence the performance and loading time of your website:
How fast your website loads depends on various factors. Some, you can improve with OnPage optimization; others you cannot influence.
You have no influence over these factors:
You can influence these factors:
Actually, the volume of data that must be loaded is an important factor for a website’s loading time. The smaller the available bandwidth, the more important this is.
There are various methods to shorten loading time. Some are technical; others require the removal of unused contents as well as data compression. Let’s get going!
When a client visits your website, it sends an http request to the server for each new source. An image, a table, each of these can require another inquiry. Each of these calls costs loading time.
With CSS, you can set script sizes, colors, and other elements in the web design. If, however, each individual style is stored with its own CSS command inline in the HTML code, each element requires a new query and that needs more loading time.
Through a consolidation of all CSS files in a style sheet, the website can be presented more quickly. The CSS style sheet is linked into thearea of the website.
Code snippet with available empty characters:
CSS code and empty characters:
A possible integration of the files can appear as:
CSS sprites are CSS files that consist of several individual images. Thus, for example, all background images of a website can be summarized. Instead of individual requests, a browser requires only one inquiry to be able to present background images. CSS precisely defines how the image should be and where each section of the entire image should be displayed.
An Example: Here, XING has assembled various background graphics into one CSS sprite.
Figure 4: CSS Sprite with XING
Via the CSS configurations, the browser is informed how the graphics should be arranged vertically and horizontally. A possible CSS code can appear as:
And completed as:
Have your website’s source code displayed with an editor. Next, cut out all JS files and create a new text file into which you insert all code snippets. Save the file as main.js and store it on your server in the folder where all other HTML files are found.
In the HTML code of the website, remove the following commands:
Exchange the deleted command with this command:
Images are important for making a website clear and attractive for your users. But images also threaten to substantially increase your website’s file size and slow the loading time.
Therefore, you should only use images that are optimized for web use. The rule of thumb: photos and high-quality graphics should be used as .jpeg and graphics that are smaller than 10 x 10 pixels should be used as .gif.
With this method, an HTML document is cached on the server that contains the central elements of the website. If a URL is called up a second time, these elements do not need to be loaded anew from the server, but rather from the cache.
GZip offers you the opportunity to compress a complete website. This means that you will reduce the files to be loaded and thus decrease the loading time. The advantage of this optimization measure is that it is relatively simple to implement and that all common web servers can use the GZip format. A browser or the Googlebot thus requires less time to render your website.
Because the Apache server is the most frequently used for websites, the following example is for Apache.
Two different modules are used: mod_deflate and mod_gzip.
How can I compress files with gzip?
1. Insert the line “mod_deflate” in the Apache module and start the server anew
2. 2. Complete the .htaccess file in these lines and save it:
# gzip Compression
With the .htaccess file you can deliver commands to the server that it should perform with an inquiry by a client. The .htaccess file is, for example, also used for 301 forwarding.
A Content Delivery Network is a decentralized server in various locations in which parts of your website can be stored. In this way, it is possible, for example, that files are downloaded simultaneously from various servers when the site is accessed. Thus, loading time is clearly reduced. A CDN is especially practical when you have an international web presence and you want all of your users worldwide to have access to a fast website.
To be able to use a CDN, you must register with a provider. There are, of course, free CDNs on the web, but you should check the conditions.
In general, the fee-based providers invoice per data volume that is used via the network on a monthly basis.
Known providers are:
301 forwarding is certainly sensible to avoid duplicate content or to redirect no longer necessary URLs to new URLs after a re-launch, but each forwarding increases the loading time. The delay per forwarding is not very long, but it is perceptible because every time a browser encounters a forwarding, a new URL must be called up. Then it has to wait until an http request is returned.
If several 310 redirects follow each other, the loading time can be significantly increased. Moreover, the Googlebot will not follow more than three forwardings, so that a chain of redirects is also a disadvantage for the crawling.
To avoid too many forwardings, you should document the URL structure or the development of new URLs. The same goes for established 301 redirects. If in the analysis of your website you find several forwardings, you should guide the first forwarding directly to the actual link goal without a detour to one or more redirects.
Today, many websites are hosted on shared-hosting platforms. This means that you are sharing your server with other websites. Depending on the provider, this can add up to 100s of websites. This one server must answer all inquiries about the websites hosted there. Usually, this results in slower loading time.
If you want to avoid this, you should host your website on a dedicated server. In this way, you will have the opportunity to adjust the hardware of the server individually according to the needs of your website and you can save additional loading time.
A positive side effect: You don’t have to worry about a bad neighborhood on the server.
In calling up a website, a client or a browser follows the source code of the HTML document line by line. All empty characters or line breaks are read. One superfluous empty character will certainly not negatively influence the performance of your website. But because a website, depending on its size, can consist of more than a hundred lines of source code, lots of superfluous empty characters or commentary can clearly impact loading time.
Thus, you should begin the “minification” of the source code:
To avoid superfluous source code, you should either always insert the text formatted as HTML in the website, use the CMS editor, or insert and then format the text as plain text. If you integrate the text from Word or another Office program directly into the CMS, this will result in superfluous source code.
You must adjust the source code to allow a file to be pre-fetched. In this case, the desired element is prefaced with the attribute rel=”prefetch”.
<link rel=”prefetch” href=”//mysite.com/example-image.jpg”>
Here, the example is reloaded even before another site is loaded. The loading time in the new site view is thus shortened.
If you use the pre-rendering method, a complete website is downloaded from the browser in advance and is temporarily stored in the cache. Contained in this are all files that are necessary for the complete rendering. The website rendered in advance can be loaded almost without delay when called upon. The loading time is thus shortened to fewer than 50 milliseconds.
In order to implement the pre-rendering, you must insert the following line into the source code of the website to be visited:
<link rel=”prerender” href=”//prerendering-site.com/index”>
Whether share buttons or tracking codes, external scripts can be integrated into your website in various ways and for various purposes. Be aware: This code can make your website slower.
Therefore, only install share buttons that you really need. Moreover, attempt to limit your tracking codes to a minimum.
Google offers webmasters with Accelerated Mobile Pages the opportunity to load mobile websites with almost no delay. For this purpose, the sites must fulfill certain requirements so that they can be displayed on mobile devices.
Many CMS such as WordPress allow for the use of AMP with the help of plugins. Until now, AMP could not be used for online shops. However, this is envisaged by the developers.
With the help of browser caching, elements of your website are cached not through server caching of the web server, but instead by a web browser. Thus, not all elements need to be loaded anew when accessing a new URL on your website. This increases the loading speed.
Browser caching can be activated by many CMS via plugins or extensions. Possible plugins for browser caching with WordPress are, for example:
The manual activation of browser caching occurs via an adjustment of the .htaccess file. Thus, you can turn on two modules of the Apache server: mod_headers and mod_expires.
If you use mod_headers, the .htaccess must be completed with the following code:
Header set Cache-Control “max-age=2592000, public”
The rounded brackets relate to the file format that is to be placed in the cache. At the same time, the duration of the cache is to be given with “age”. The unit is in seconds. In this example, the cache is saved by the browser for 30 days.
If you would like to use mod_expires for browser caching, the .htaccess file is expanded with the following lines:
## Cache Expiration ##
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType text/css “access plus 1 month”
ExpiresByType text/html “access plus 1 month”
ExpiresByType application/pdf “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
ExpiresByType image/x-icon “access plus 1 year”
ExpiresDefault “access plus 1 month”
## Cache Expiration
This method allows a unique time frame to be separately determined for each file type.
The answer time of a server depends on many factors. Usually, you yourself don’t have a direct influence on this, and have to turn to your web host. For Google, an answer time of fewer than 200 milliseconds counts as good.
One of the following could be slowing you down:
1. Erroneous uses: Check beforehand that your CMS is correctly installed or if there are problems with certain code elements. With CMS such as WordPress, certain plugins can also negatively influence the answer time of the server.
2. Database inquiries: Every website is based on a database. If there are errors with the database connections, these reflect in the answer time of the server and increase the loading time of the website.
3. Frameworks and libraries from third-party providers: These elements can negatively influence server performance.
4. CMS: Your content management system itself can slow down the loading speed and the answer time of the server. This is true above all when you expand your CMS with functions.
5. PugIns: WordPress is often named as a CMS that allows for many plugins, but a weakening of server performance can arise if the wrong plugin is installed.
6. Waek CPU: If your website, for example, is managed by a cheap web host, traffic peaks with other websites that are hosted on the same server can lead to losses of speed.
7. Too little storage: If your server has too little storage, increased traffic can lead to a slow website.
In some cases, you might need to change hosts because the service offered is not sufficient for your website.
You can easily avoid bad requests by correcting wrong files and giving the correct path or forwarding to the new file.
Each image that is used on your website requires several lines of code. This code is read line by line when the website is called up. If you store buttons, icons, or backgrounds as graphics, a browser will require a lot of time to load your website.
The solution lies in generating all graphic elements apart from photos through CSS3. In this way, you will reduce the source code. At the same time, the files are displayed in the same high quality on all end devices.
There are many possible screws to adjust to improve your site’s loading time. In this article, you have gotten to know a few possibilities. Some methods are very easy to implement by beginners and SEO novices. In this way, you can make each of your websites faster and ensure more satisfied users and search engines.
With this in mind: Happy Optimizing!
Published on 04/26/2017 by Eva Wagner.
Eva is an experienced content marketer. Until May 2018 she was a member of online marketing team at Ryte. Using her creativity and the knowledge of current topics, she was responsible for the German Ryte Magazine and the Ryte Wiki. She also organized Ryte’s presence at major trade fairs such as the dmexco in Cologne.Become a guest author »
Get more traffic and customers by optimizing your website, content and search performance. What are you waiting for?Register for free
Do you want more SEO traffic?
Improve your rankings for free by using Ryte.Register for free