Improving how fast your web pages display on browsers

TL;DR (takeaways for the impatient)

Page speed is the time required for a web page to be completely displayed (“fully rendered”) by a visitor’s browser (read more)
Page speed results from a combination of DNS speed, server speed, and the number, source, type and specification of elements on the page, and the visitor’s Internet connection speed (read more)
Page speed is important to your visitors - slow loading pages are bad experience (read more)
Page speed is important to Google and Bing and can influence search results for your web pages (read more)
You can test your own web pages’ speed with free tools (read more)
You need to be sure that your web designer/developer understands the importance of speed (read more)

Need more information?

As we say in a number of places on geking.com, we believe small business owners do better by working on their businesses, rather than trying to become experts on web technology. We provide information like this page for those owners who need to understand a bit more before they are ready to improve their website and to hire a consultant to assist them. We are constantly updating our site and adding to the information about creating more productive websites. If you still have questions, please feel free to email us (webhelp at geking.com) or call us (817.500.4501 9-5 Central).

Understanding Page Speed for the Web

When a visitor clicks on a link or types a URL into a browser, the browser requests an address from the Domain Name System (DNS). The DNS converts the human-type URL (mydomain.com) into an Internet Protocol (IP) address (002.240.001.240). The browser then sends a request for the page to that address. The web server at that address finds the page (if it exists) and sends a response to the browser, and then downloads the elements that make up the web page, starting with the HTML. The browser interprets the HTML and begins to render (display) the page. The browser then requests each element, such as images, videos, style sheet files, script files, etc. according to the addresses in the HTML. When the browser has received all the elements and displayed the page on the visitor's screen, the web page is said to be 'fully rendered'.

Measuring Web Page Speed

Page speed is measured from the time a browser sends a request to the web server until the page is completely displayed (“fully rendered”) by the browser. The web server will send the HTML and text for the page to the browser, and the browser will begin to download and display other elements (images, videos, etc.) until all of the elements have been displayed.

How long a page takes to fully render results from a number of factors:

The size of the HTML and text in the page
The size, number and location of all Cascading Style Sheets (CSS) files listed in the HTML
The size, number and location of all JavaScript files listed in the HTML
The size, number and location of all images listed in the HTML
The size, number and location of all videos listed in the HTML
The size, number and location of all font files listed in the HTML (such as Google fonts)
The speed at which the web server responds to browser requests
How well page elements such as images are specified in the HTML (leaving off width and height specifications make it impossible for the browser to leave proper spacing for the image when it is downloaded)
The speed of the visitor’s connection to the Internet

The size of files is obviously important to page speed as bigger files take longer to transit the Internet. The number of files is also important as each file seprately listed in the HTML must be requested by the browser. The location of files is important because files located off the web server, such as font files, CSS files, video files, etc., requre the browser to locate and send a request to a different server, thus starting the time to first byte delay over again for each different server.

Visitor Speed Expectations

Page speed is not a technical concern - it is a vital part of your website's success. Visitors expect faster and faster results from websites. In Akamai's 2015 study¹, they found that 49% of consumers expect pages to load in 2 seconds or less. Their research also showed that website visitors' patience has fallen from 63% willing to wait for a website to load to 51% today. Even worse for slow websites, 30% of e-commerce consumers now (2014) expect page load times of 1 second or less. What does this mean for your website? It means a slow website will cost you far more than you will know. According to Akamai,

"50% of dissatisfied users will visit another website to accomplish their activity. More than 1 in 5 will leave for good — 22% won’t return to a website where problems have occurred. It doesn’t end there… after a poor experience, 45% are less likely to visit a website again, 35% will have a more negative perception of the company and 32% are less likely to make online transactions with the company."¹

To underscore the importance of page speed to visitors, consider the results of the Neurons, Inc. study for Ericsson² that reported, "A neuroscience study measuring user reactions to network performance has shown that delays in loading web pages and videos while completing tasks under time constraints are taxing – heart rate and stress levels increase. Both time-to-content and additional delays due to re-buffering lead to decreases in Net Promoter Scores (NPS). On the other hand, smooth browsing and video streaming lead to increased NPS for a mobile broadband service provider." Don't stress your visitors with slow speeds - they're your most precious web resource.

Page Speed and Search Results

Both Google and Bing have stressed the importance of page loading speed as part of the visitor experience. Both Bing and Google also indicate that quick click-backs (someone returning immediately to the search engine results page) can be interpreted as a poor result for the visitor, and this can result in lower ranking for your page. Since visitors leave in increasing numbers as pages take more time to load, if your website does not meet visitors' expectations of 1 - 2 seconds to load, you not only lose current visitors, but your site may score more poorly on search results, giving you fewer visitors in the future.

Testing Your Page Loading Speed

While it may take an expert to accurately determine and fix what is slowing down your page speed, it is easy and free for you to see how long it takes each of your pages to load. Webpagetest.org provides a simple to use mechanism to see how long a page takes to load. If you point your browser at Webpagetest.org, you can enter the URL of any of your pages, choose a location to test from, a visitor connection speed and a browser. If your business serves a local area, choose a location close to your business, but if you are serving a national or international audience, test with different locations.

start page of webpagetest.org — Figure 1: start page for webpagetest.org

In less than a minute, the site will complete the test and provide you with a detailed look at how fast the page loaded, and how each element on the page was loaded. While the test is easy to start, understanding the results can take a bit of time and experience. Because we feel your time is best spent on your business and not in becoming a web expert, we suggest you stick to the high level portions of the test results, shown in figure 2.

test results from webpagetest.org — Figure 2: High end results from webpagetest.org speed test

Reading the Test Results

Check the letter grades for your website; B's or better are OK

Check first byte time - total time from browser request to first byte of server response, anything lower than a B and your server may be slow
Check keep alive enabled - if not an A, your server settings do not allow the browser to use the same connection for multiple requests, slowing down transfer
Check compress transfer - if not an A, your server settings do not support compression of data, slowing down transfer
Check compress images - if not an A, your server settings do not support image compression, slowing down transfer (if you have no images on the page, this will appear as N/A)
Cache static content - if not an A, your server settings do not support caching, slowing down repeated transfers, as when someone returns to this page
Check effective use of CDN - if your business serves a large geographic area, a Content Delivery Network (CDN) can speed up connections by serving your content from multiple locations, one of which may be closer to the visitor than your web server

Fixing Low Grades

All of these except first byte time have to do with server settings for your website. Changing these may be beyond your expertise, or may not be adjusted for the type of hosting your website runs under. Your principal concern will be any grades below “B”. The good news is that most of these settings can be quickly and inexpensively changed by a competent web developer. If your website hosting provider tells you these settings cannot be changed, you may decide to move your website to another hosting provider that does allow users to adjust them. A web developer will require access to your hosting account to make any changes, and it is a good idea to change your password as soon as the work is complete.

Time to First Byte

First byte time is a measurement of the time between a browser request for a web page and the delivery of the first byte of the response by the web server. First byte time has two components, DNS lookup, and server response. DNS lookup is the time required for a browser to negotiate the Domain Name Service to find the Internet Protocol address of your website. Any delay beyond 500 milliseconds (1/2 second) means your server is slow in responding to the browser. First byte time is dead time as far as the visitor is concerned. While there are some steps that we can take to get a part of your web page displayed while other parts are still loading, nothing can work around a slow first byte time. Run the webpagetest several times and keep an average time to first byte. If the time required for the DNS or for time to first byte exceed 1/2 second, you should contact an optimization consultant (like us). You may receive the advice to move to a different hosting provider or to a more expensive (and faster) hosting package.

Seeing the Page Load - the Waterfall Display

To see more of what is happening during the page load, you can click on the image below the subtitle "Waterfall", seen in figure 2a.

view of webpagetest.org results with clickable waterfall display — Figure 2a: Clickable waterfall element on results from webpagetest.org

The "waterfall display" looks like a waterfall, running from the top left to the bottom right, with a separate line for the request for each element on the page. The display shows the time required for DNS response, first connection between the browser and the server (for that element), time to first byte from the server and the time required to download the element.

waterfall display for page speed from webpagetest.org — Figure 3: waterfall display of loading times from webpagetest.org

Typically, a waterfall display wider than it is tall shows a fast download, while a very tall waterfall shows a page load that requires a good deal of time, with many elements on the page. If your page contains many elements, or if one or more elements are taking a long time to download, you should consult with an optimization consultant who can work with your design to minimize the number of files and the accompanying delay. It may also be necessary to tune some of your web server's settings to improve page speed performance. By and large, tuning page speed does require expertise and is a matter best left to an expert.

Be sure your designer/developer understands the importance of speed

It is an unfortunate truth that some website designer/developers are all about the look and feel of their creations, but not about the operation of the resulting pages. As Marvin Russell said on mysiteauditor.com, "Creativity should not be the #1 goal for your website. In a survey by HubSpot, 76% of users said that the most important factor in the design of a website is that 'The website makes it easy for me to find what I want.'"³ All too often, designer/developers rely on a particular JavaScript library, or 'that perfect font', both of which must be downloaded from other webservers before your page can be displayed. If your charge to your designer/developer includes "and all pages must download over DSL speed connections in less than 1.5 seconds", you may be able to avoid some speed-related problems.

References:

¹ Akamai, "Performance Matters - 9 Key Consumer Insights" (May, 2015), https://www.akamai.com/us/en/campaign/performance-matters.jsp

Akamai, "state of the Internet Q1 2016 report" (July, 2016), https://www.akamai.com/us/en/multimedia/documents/state-of-the-internet/akamai-state-of-the-internet-report-q1-2016.pdf?mkt_tok=eyJpIjoiWlRWak1HUXpPVE00WVdOayIsInQiOiJpOEJWNXJhcTBNUjVpUXB4WHd6QjV3RDBIUzRYdFo2UklKVDZhckMydlczMTlpRWdnV3daK203Z2JYVzJuOVpOck9QeEE2VXBuTzAxQjlRcW5nMVVnMjR2NzF1SXIydjJjelJ4OEZpY0lkUT0ifQ%3D%3D"

²"Ericsson Mobility Report" (Feb, 2016), https://www.ericsson.com/res/docs/2016/mobility-report/ericsson-mobility-report-feb-2016-interim.pdf

Billy Hoffman on the MOZ blog, "Improving Search Rank by Optimizing Your Time to First Byte", (9/26/2013), https://moz.com/blog/improving-search-rank-by-optimizing-your-time-to-first-byte

Testing for image impact on page speed with Google PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/

³ Marvin Russell, Mysiteauditor.com "20 Signs Your Web Designer is Terrible" (2013), https://mysiteauditor.com/blog/20-signs-your-web-designer-is-terrible/