In other words, what are the ways to increase the traffic to my site? A fast website translates to a better user experience, and increased traffic if a significant percentage of referrals come from the organic search engines. And if your site generates income, this means increased profits.
Please keep in mind that content is king. A fast website does not ultimately increase your viewership if it lacks interesting content.
But please also realize that visitors want responsiveness. A Google study indicates that 53% of mobile-based visitors will not wait for more than 3 seconds. The same study finds that “sites loading within 5 seconds had 70% longer sessions, 35% lower bounce rates, and 25% higher ad view-ability than sites taking nearly four times longer at 19 seconds.” Another study on ecommerce sites shows that 50% of visitors abandon ship after 5 seconds. Therefore, as a site owner, it is imperative to serve a responsive website. Responsiveness is a key design parameter in all of our themes as well as our own.
How fast is your website?
In optimizing a website for responsiveness, keep in mind that it is the movement of data and the communication needed to move the site’s contents between the hosting server and the end user. The time in which this is achieved determines the speed of a website. Fortunately, there are quite a few speed test tools to help one quantify a site’s responsiveness. Please note that as you use these tools, the test analyzes one page of the website. The testing link provided to these tools should always point to the landing page, the webpage most users view when they first visit the website.
Speed Testing Options
HappyThemes’ preferred speed test tool is GTmetrix. The drawback with this tool is that the testing server is only located in Canada (more options are available for users who create an account or buy the pro version).
In addition to GTmetrix, Google’s Pagespeed Insights may probably be the defacto standard since it gives the most “insight” as to how Google determines the site’s speed. It is widely known that Google uses a website’s speed as a factor in its search rankings (in 2010 for desktop searches and in 2018 for mobile searches). Without delving into the details though, interpreting the performance score from Pagespeed is not an exact science. Furthermore, the score is not constant and fluctuates after every test run.
The most comprehensive speed (free) test tool is Webpagetest. It allows testing from various locations throughout the world along with selecting browser types (Chrome, Firefox, etc…) to perform the test. Test run options are available on various types of mobile devices.
Server Speed
Regardless of the speed test tool used, look for three key metrics (and one is NOT the load time). The load time varies greatly on every test because traffic on the internet is dynamic. The route between the server hosting a website and a particular user can become congested and then evaporate almost instantaneously, resulting in large degrees of variation in the load time.
Optimizing these 3 metrics will yield an overall, responsive load time. The first metric to check is commonly known as the “time to first byte” (TTFB). TTFB is the round trip time needed to request and then receive the first byte of data from the server. In other words, that time indicates the relative speed of the server. Run the tests several times and take note of the TTFB value. Google recommends less than 200 ms. If more than 500 ms, look for a new hosting service.
Other notable values (which greatly vary due to internet traffic) are the first paint and contentful paint values. The first paint time is the first point at which the browser does any sort of rendering on the page. The first Contentful Paint is the first point in which any content is painted. This content could be text, an image or canvas render.
Google’s recommended TTFB Value
As a point of reference, it is important to remember that the entire audience of site viewers consists of desktop users and mobile users (Google analytics provides the breakdown of percentage for each group for every site). For mobile users, the TTFB is usually 2-5 times greater on average due to the slower bandwidth of wireless communications. As an example, the HappyThemes mobile device GTmetrix test results are about 200 ms (vs 100 ms) for TTFB and 1.2 – 1.4 seconds (vs. 500 ms) for first contentful point. For mobile devices, Google recommends a TTFB of less than 1.3 seconds. But the average website’s TTFB time in practice is about 50% greater.
Image Courtesy of: thinkwithgoogle
Webpage Weight
Page weight is the total amount of data, measured in bytes, needed to display its contents. The data consists of text, images, and instructions (expressed in HTML, CSS, and Javascript) for the desktop browser or mobile device to render the page.
A byte represents one character of text. Most landing pages are under 1000 words. Assuming an average of 5 letters per word, the written content of a landing page is less than 5 KB. It is safe to conclude the bulk of the weight is not from the written text. Before delving into the specifics, note that Google recommends less than 500 KB as the page weight for mobile users. But their analysis show real life averages are at least 5 times that.
Image Courtesy of: thinkwithgoogle
As a result, most websites are not even close to Google’s recommended mobile-based load time of 3 seconds.
Image Courtesy of: thinkwithgoogle
A Faster Website
Optimizing Images
The latest statistics show an average WordPress page size of over 2.3 MB (2300 KB). Of that, still images make up over half of the page size on average.
Image Courtesy of: httparchive.org
Latest data from google confirms that images (including video) make up the bulk (over 70%) of a page’s weight on average.
The data clearly shows the focus should be to reduce the page weight by optimizing images. A good target would be 1 MB, about a 60 percent reduction from the current average. The landing page of HappyThemes originally was 3 MB in weight, and 75 percent of the weight was from images. By decreasing the size to under 1 MB along with decreasing the number of page requests by 20 percent, the load time of the landing page was reduced by 50 percent.
Scaling Images
A tendency among many websites is having much larger image sizes than are necessary. Fortunately, the speed test reports signal the issue and also provides the proper image resolution size. This was the biggest and easiest problem to resolve when beginning to optimize the loading of the HappyThemes’ landing page. One of the images at 700 x 476 pixels sized down to 309 x 210 pixels decreased from 719 KB to 116 KB.
Converting PNG Images to JPEG
Most images on the internet are either png or jpg images. PNG images are used for pictures containing texts, crisp graphics, charts, logos, or architectural blueprints. It is usually the default format for screenshots. PNG images though are at least 3-4 times greater in size than JPEG images. JPEG images are the default format for digital photography. All images from digital cameras and cell phones are stored in JPEG. The advantage of JPEG over PNG is the file size. The advantage of PNG over JPEG is no loss of image quality. PNG is a lossless file format, meaning the image transferred from person to person without loss of image quality. JPEG is a lossy compression format, and thus an image suffers a slight loss of quality when saved.
For example, an PNG screenshot image of 2000 x 1200 pixels having a size of 1.4 MB reduces to about 400 KB when exported to the equivalent JPEG format. In many instances, a simple way to reduce the page weight by up to 80 percent is to convert PNG files to JPEG. Our experience indicates that the eye is not able to detect the slight loss of image quality unless the user magnifies the image, which is rare. The tradeoff of speed vs image quality heavily favors reducing the page weight.
Using an Image Compression Plug-in
Most of our readers may know this already, but there are a good number of image optimization plug-ins available for free. HappyThemes utilizes the Smush plug-in. It auto compresses lossless images (PNG) without losing image quality. In other words, lose page weight for free!
Combining Images (Using CSS Sprites)
Server Requests
From this point forward, be warned that unless there is a good understanding of the .CSS, .HTML, and script files behind the makeup of the site, recommended changes may negatively impact the site in terms of propagating programming errors. As discussed previously, there are 3 key metrics to note when performing speed tests. The first two are the TTFB and the Page Weight. The third is the number of Server Requests. This is the number of times the desktop browser or mobile device needs to communicate with the host server in order to render the webpage.
Google’s best practice recommendation is less than 50 for a fast website, but the real average is at least twice that.
Speed Test results provide a detailed analysis of each of the server requests. With GTmetrix, selecting the waterfall tab displays in detail each page request.
Combining smaller images into one image file
There are two main recommendations to minimize these requests. The first is to combine files or identify files not required to render the webpage. For example, every single .css file counts as one request. Combining them reduces the number of requests. Anyhow, suffice it to say that this requires a detailed understanding of the .css file structures which makeup the site, and is usually not worth the time and effort. The second recommendation is usually easier to accomplish which is to combine smaller images (logos, icons, and other smaller image snippets) used by the page into one image file. On the Happythemes site, the logo, facebook icon, twitter icon, and 4 graphic symbols were combined into one image. The result is seven requests reduces to one server request.
Generating a CSS-Sprite file:
The process is rather simple. First, select the combinable images on the website. These images should be somewhat similar in size to avoid unused pixel space. Second, use a CSS sprite generator tool (free) to combine separate image files into a single file. Make sure to properly size or resize the images before dropping the images into the tool. After uploading the images , simply click the generate CSS sprite below as shown in the graphic. The defaults options for the tool remain unchanged for the HappyThemes site. Our site utilizes PNG image files, but the tool can combine JPEG or GIF files formats. The resulting CSS Sprite image file name is also changeable.
CSS-Sprite Generator Results
The tool generates 1) .CSS file, 2) .HTML code, and 3) the CSS-sprite image as shown below.
Third, download the resulting CSS-Sprite image either using the media library within wordpress, or using ftp to move the image file into the directory containing images within the wordpress theme. We chose the FTP method to keep all the images in a single location. Save the copy of the actual URL (i.e. https://www.happythemes.com/…/CSS-Sprite-Combined.png) of the combined image. Lastly, two approaches are available. The simpler approach replaces the actual reference of the image with the reference to the CSS-Sprite image within the .css file rendering the pages shown below. The original code becomes a comment line (It is a good practice to keep the original code when making modifications to .CSS files). In this approach, both the .CSS and the .HTML generated codes are unnecessary. The .CSS style sheet only needs to identify the CSS-Sprite combined image name and location along with the pixel indices.
Alternate Method for referencing CSS-Sprite images
The other approach is to add the CSS code to your WordPress site by going to Appearance → Customize → Additional CSS. Then, paste the generated .CSS code. As you do that, replace the background:url field with the direct link to the combined image file in either the WordPress Media Library or the image directory within the WordPress theme as follows.
Every pertinent .HTML file(s) of the webpage accessing an image within the CSS-Sprite combined image file will then now use the class definitions from the .HTML generate code. For example, every .HTML file within the site accesses the design.PNG image as: “<span class=”css-sprite-design”></span>”. The second approach follows a more structured programming (a term for those familiar with software development) methodology.
Additional Tips, Notes, and Suggestions
Using a Cache Plug-In
Our post assumes familiarity with WordPress cache plug-ins. Without question, caching plug-ins are “must-have” plug-ins on every WordPress site (along with an image optimization plug-in). HappyThemes uses the W3 cache plug-in, Studies show no significant speed differences exist among the good cache plug-ins.
Content Delivery Network (CDN)
A CDN consists of a network of servers (computers) that delivers web page content. The servers sit geographically positioned between the origin server of some web content, and the user requesting it, all with the purpose of delivering the content faster by reducing the delivery time between the origin and the end user.
For example, let’s say that a blogger resides in New York, and the location of the blog website’s host server is Dallas. That site will load well across North America but blog visitors from Australia, Europe, Asia, and Africa will find that the blog is slower to load for them. This is because the blog’s content (images and text mainly) is sent from Dallas to visitors outside the USA.
The benefit of a CDN is that it has already copied its most popular content to its network of servers situated around the world to benefit your far-away site visitors. So whether the visits are from Paris, Hong Kong, Sydney, São Paulo, or Cairo, the blog contents originate from a fast local server and not from the other side of the world.
A popular free CDN service is Cloudflare. Simply register with them, follow the instructions to setup, and change the DNS locations to point to their servers. HappyThemes uses WPX hosting which enables the use of their CDN as part of their core service.
Enable GZIP Compression
The physical contents of a website consists of a number of files. Compressing them reduces their size, thus reducing the page weight and the bandwidth to load the site. Once the compressed file is sent, the browser of the end-user automatically decompresses the file as .ZIP files are widely recognized by all browser types.
WPX hosting, along with many other host services, already enables GZIP compression. For those whose hosts do not provide GZIP compression, the capability is available with most of the caching plug-ins (usually in their premium version), or use a dedicated GZIP compression plug-in.
Further Topics
There are number of more detailed topics not yet addressed. The plan is to create separate posts for these since it involves a number of technical details. Furthermore, if someone is not experienced in website development, changes may cause catastrophic results. Upcoming topics include:
- Minification of .HTML, .CSS, and Javascript (.JS) files. This capability is available with most, if not all, cache plug-ins, but there are a number of issues to be aware of.
- Optimization of the WordPress SQL Database.
- Asynchronous loading of .CSS and .JS files.
- Using Accelerated Mobile Pages (AMP).
Summary
Achieving a faster website involves assessing 3 key metrics: 1) the server speed as expressed in the Time To First Byte (TTFB) value, the page weight, and the number of server requests. As discussed previously, Google’s best practices recommends 1) TTFB of 200 ms for desktop browsers, 1.3 sec. for mobile devices, 2) page weight of under 500 KB for mobile devices, and 3) number of server requests of under 50. A faster website results from optimizing the landing page(s) within the range of these values. As technology involves and more users come on-line, these parameters may change. Our job as theme developers is to stay current, and continue to make the right decisions to help our subscribers optimize their websites.
