1. Introduction
Local optimization within the context of this document is the practices of changing the site assets, files, and structure of the site. This differs from global optimization which focuses on improving Internet asset delivery. Site assets can include any files hosted on the web server to be used by the web page. This is usually an image, JavaScript, CSS files but can also include flash files, video, or other multimedia. The bigger the file size of the asset, the longer it will take to load. Load time for web pages is very important for many reasons. High traffic sites can benefit from faster load times by increasing revenue and page views. Random visitors might have a better satisfaction and can increase likelihood of returning to the site. Web developers will generally want faster load times to improve productivity and to test changes. However, local optimization is not just about minimizing file sizes. It is also about reducing the number of requests a web page makes and minimizing the number of times a page refreshes.
Website performance is crucial for gaining traffic, user retention, loyalty, and satisfaction. In order to leverage the advantages of your website, it is important to optimize the performance of your web pages. Different search engines and services like Google and Bing offer useful tools. Google’s Webmaster Tools and Yahoo’s YSlow help to analyze the performance of the web pages and give suggestions for improvement. The “Page Speed” tool from Google is also an open source add-on for Firefox that provides suggestions to improve page load performance. Web Performance is a broad topic that includes everything from improving the speed of the page load to optimizing the critical rendering path. In this document, we’ll be focusing on the best practices for improving the speed of the page load. This could be useful for web developers building new sites and trying to learn best practices, as well as for webmasters of existing sites trying to improve the experience of their site.
1.1. Importance of website performance optimization
A simple equation can be derived from this data. If your website is slow, you will lose visitors. If your website is losing visitors, you’re losing revenue. So given that, what’s the importance of website performance optimization? The answer is that it is very important. In fact, it’s critical. This is especially true for websites that are running dynamic content managed systems. These sites are far more complex than your typical static HTML website and thus they are far more resource intensive, making the performance optimization task that much more important.
– 47% of visitors expect a web page to load in 2 seconds or less.
– 40% of people abandon a website that takes more than 3 seconds to load.
– 79% dissatisfied with website performance are less likely to buy from the same site again.
– 52% of online shoppers claim that quick page loads are important for their loyalty to a site.
When the World Wide Web was first introduced to the public, it was a fairly simple place, full of plain HTML documents and a few graphics. Today, things have changed dramatically. The web is now a complex place that’s home to a multitude of technologies. Unfortunately, this diversity in technologies has caused a negative effect on the overall performance of many websites. When we talk about optimizing the performance of a website, we are referring to making the site as efficient as possible while still providing the content and functionality that the site owner wishes to provide. This is a critical step because website performance can have a direct impact on a company’s bottom line. A recent study conducted by Akamai and JupiterResearch found the following:
1.2. Benefits of local optimization
WordPress Local optimization is a process that is designed to improve the visibility of a website or webpage in a local market. This can be beneficial to a wide range of local businesses such as restaurants or law firms that are looking to generate more business from local consumers. Local optimization is much different than traditional search engine optimization as it focuses on more specific results. People tend to search for a product or service by what they are looking for and the city that they are in. A website that is search engine optimized and is using global SEO might not have a defined location to tie to it and might be a business that is located online only. This would cause it to appear in a search that is a local-based search without a specific location. A local optimization of the website would allow the website to define the region that it wants to be visible in. For example, if the business wanted to only be visible to Ottawa residents, the website would be optimized to target Ottawa consumers and there would even be a way to specify the city or region on the keywords that the website uses.
2. Analyzing Website Performance
We should determine which elements of the website are causing performance bottlenecks. A “bottleneck” is a point at which the website’s performance is impaired, and is usually the result of one element consuming a disproportionately large amount of resources relative to the rest of the site. They can be caused by bad code, server problems or a multitude of other issues. In order to locate these elements, we must examine each component of the site. Print out or make a list of all the pages on your website. For each page, make a list of all the elements on that page. This should include the HTML, scripts, CSS, images, etc. Now we must determine the size of each of these components by looking at the properties of each file. You should record all this information so that you can easily compare the sizes of the different components and identify anything that is unusually large. Now that we have a list of all of the elements on your site and their file sizes, we need to determine how these elements are affecting the website’s performance. This is done using various web performance analysis tools that simulate a page load or run various tests on the site. These tools can provide a large amount of useful information, so I won’t go into all of it here, but for what we’re doing the most useful functions will be the ability to test how long a page takes to load and the ability to get recommendations on how to improve the site’s performance. Once we have run tests on how long it takes to load the page, we can compare this with the size and number of elements on the page that we recorded earlier. If a page is taking a long time to load and it has a small amount of data, then this is a clear indicator that there is a performance problem. Now we need to track down the cause of the problem and apply the recommendations given by the performance analysis tool to improve the page’s load time. This may require going back and forth between testing the effects of changes made to the site and re-analyzing the performance until the page is running at an acceptable speed.
2.1. Identifying performance bottlenecks
A performance bottleneck is a part of your website which is slowing down the rest of your website. The first step in resolving a bottleneck is to find it. There are a number of strategies for identifying where performance degrades. For example, you could use a profiling proxy server to analyze each page, or a network analyzer to identify high latencies, or simply use your knowledge of your application and its use to predict where the bottlenecks are likely to be.
When identifying where performance is degrading, a key strategy is to compare the performance of the part of the page you are concerned about when it is working well, to when it is working poorly. If the page is never fast, then take a snapshot of a time you think is acceptable. A noticeable difference between the two states will highlight a problem.
With this strategy in mind, the following are some common symptoms and their likely causes of performance degradation from the PHP code and SQL perspectives. Remember that this is just a starting point to get you thinking in the right direction for solving your problem.
2.2. Measuring website speed and load times
As we have already discussed, a target is an important aspect of performance analysis. Load time is obviously relevant but what about pages which have all the appearances of being loaded, yet fail to respond to user input for a significant period of time? This may be the result of some gradual degradation over a long period of time, or it may be due to some far more drastic changes made recently. In order to judge whether recent optimization attempts have had a positive effect, it is useful if not essential to have a historical record of some form which can be used to compare current performance to past performance.
Historical data is also essential for any kind of capacity planning. If you expect your website to grow substantially in the number of users or the number of served documents, you will need to know how much your expected increase in load will affect the speed of your pages. If you are running close to the line in terms of page load time now, you may need to upgrade hardware or optimize the configuration/code of the web application, in order to maintain an acceptable level of performance. And it would be quite an incompetency to do such an upgrade without first assessing whether it was successful in achieving its goals.
3. Optimizing Website Content
Reducing website load times is a critical element of any website optimization effort. Often in development, the effects of changes are only felt in the end stage of the project, or even worse, on a live website. This can have a crippling effect on website load times. If you suspect that a recent change is the cause of sluggish load times, Pingdom Tools provides a very useful file request history feature. This helps to identify if a specific file is the cause of the problem by showing a line by line list of files requested during the page load process. This feature can also be utilized to compare load times before and after changes to find problematic files. A service such as Talaria at VividCM is dedicated to the optimization of images for websites. File compression and images are usually the best target for any internet-based optimization effort as often the smallest relative changes result in the largest load time improvements. Although the best method is to compress and replace images, there are many occasions in content management systems where this isn’t possible. If you have a predominantly HTML website or blog, the WP Super Cache plugin is a great tool for post-publishing optimization. It’s a 1-click install that generates static HTML pages of posts, in effect bypassing the heavier WordPress PHP scripts. A more versatile but complex method, which can be used in conjunction with file and server-side caching, is the usage of a Content Delivery Network (CDN). This is the process of serving a cached version of your website content from a location closer to the end user’s server, in effect speeding up the access to these files. With most CDNs (such as MaxCDN), it’s just a case of signing up, providing your URL, replacing your server address with a new CDN address, and the content is mirrored and cached from that point on. This can be a low-cost method with major results for any website with a global audience.
3.1. Compressing images for faster loading
One of the most common causes of slow loading times is the use of unoptimized images. As website owners tend to add more and more media content to their sites, the issue of data bloat from images becomes increasingly prevalent. However, there are several ways to compress the media content on your site without sacrificing too much quality to load your site faster. One approach is to use a plugin called WP Smush.it that will “smush” the data out of your images as you upload them to your site. This will effectively strip the unutilized data from your images, reducing the file size substantially while not hindering the image quality. The only downside is that this plugin can be server intensive when smushing a large quantity of images, and due to integrating with Yahoo’s Smush.it service, could be less reliable if the service is down or becomes defunct. For a more robust and reliable solution, it is recommended to use the EWWW Image Optimizer. This plugin has the same basic functionality of WP Smush.it, but development is ongoing, it has significantly more settings/configurability, and the image smushing is done locally using the jpegtran, optipng, and gifsicle binaries. Additionally, EWWW Image Optimizer will perform lossless optimization on all thumbnails as well as the original images. And with a one-click conversion to the paid API version, you can enable the ability to compress any newly uploaded images on the fly. Finally, images that have already been uploaded can be smushed in bulk from the Media Library.
3.2. Minifying CSS and JavaScript files
It is essential to minify CSS and JavaScript files in order to improve website performance. Minification means removing any unnecessary characters from your source code, thus reducing the file size and improving load times. This process can be applied manually by going through your source code and removing these characters; however, this can be extremely time consuming and leaves a lot of room for error. A much simpler way to minify your code is by using various plugins. These are available for most types of code that you may write, and can be found easily via a Google search. They will save you huge amounts of time and will apply an effective minification to your code.
In the case of CSS, a highly recommended tool would be CSSMin. This can be easily uploaded to WordPress and will apply a solid minification to any CSS files that you may have. An alternative would be CleanCSS which can also be uploaded as a plugin and will also remove any unnecessary elements from your code. For JavaScript files, it is again a similar process and there are various tools available online. A recommended tool would be JSMin which again will remove any unnecessary elements, thus reducing the file size and improving load times. Another alternative would be Closure Compiler by Google which is a highly advanced tool that can also help to detect and remove any coding errors in your JavaScript files.
3.3. Utilizing caching techniques
Caching is the process of storing frequently accessed data/information in memory, and is often used to store web data such as HTML pages, images, and web objects. For WordPress users, the WP Super Cache and W3 Total Cache plugins are key tools that provide caching solutions. Both plugins generate static HTML files from your dynamic WordPress blog. Instead of loading the heavy PHP scripts and querying the database each time a user requests a page, the static HTML file is loaded, providing a significant performance increase. The static files are then served to the vast majority of users, but because the WordPress site is dynamic, a user that is logged in or has left a comment on your website will be served the dynamic content.
W3 Total Cache is a more feature-rich caching tool and has recently been used on the Yoast website. It allows for secure and transparent content delivery network integration and provides an extensive framework designed to improve user experience and page load times. W3 Total Cache is recommended for users who have a basic understanding of web performance and are confident with tweaking plugin settings for optimal performance. Please note that the use of two caching plugins at the same time could lead to problems and should be avoided. Step-by-step installation guides for WP Super Cache and W3 Total Cache are outside the scope of this article, but these will be provided at a later date.
4. Database Optimization
Data stored on your website and database may accumulate over time and include unneeded information. This can be in the form of post revisions, spam comments, trashed pages, and more. Spammed data and unneeded information will add to the size of your database and site load time, and will have negative effects on website performance. Database optimization includes the clean-up of unnecessary data, and optimization of database queries.
Post revisions are a great feature in WordPress, but over time the number of revisions for each post can become a large amount. For example, if you make 2 revisions for every post, and you have 100 posts, you will have 200 post revisions. In this case, MySQL will store every single post revision. In order to delete these revisions and optimize it is a good idea to run a SQL query to remove post revisions. The SQL query can be found from the WordPress website here. An alternate method is to limit the number of revisions that are stored. This can be done by adding a line of code to the wp-config.php file. An example is shown on the WordPress website. Note that adding this code will only affect future post revisions that are made.
4.1. Cleaning up unnecessary data
Database performance is critical to website speed. WordPress sites are driven by content published into a MySQL database. Each time you save a new post or page, WordPress creates a revision of that post or page. If you have a lot of post revisions, your database can become bloated and slow. This can affect not only site performance but your ability to restore data in the case of a loss.
The same is true for the trash feature on WordPress. When you delete a post, page, or comment, it moves to the trash bin (just like on your PC or Mac). But items in the trash are still stored in your database until you set them to be permanently deleted.
Automatic spam and trashed comments can also become a huge problem on popular websites. With a moderate to large number of user comments, the spam and trashed comments can quickly add up to fill your database with unnecessary data.
4.2. Optimizing database queries
Database queries are the instructions that take user input and then perform an action on a database. In the case of WordPress, this almost always means MySQL queries. Optimizing such queries can speed up the page generation process and reduce server load. This is done by reducing query load and also decreasing query execution time. Once you have identified slow queries, you should attempt to eliminate them. This usually involves one of the SQL query functions in WordPress. If the slow query is due to a plugin function, try to find an alternative way of achieving the same output. If this is not possible, consider contacting the plugin author or even making your own local modification. Be sure to test the modified query, as a mistake could break your WordPress installation. If the slow query is in your own code, this should be relatively simple to fix. Try following the query optimization tips in the WordPress codex. With any code modification, always ensure that you have a working backup and be wary of making changes on a live site. For some queries, it may not be possible to find an alternative method. In this case, you will have to try and optimize the query itself. Always test the query on a staging WordPress installation or at least make a full backup of your site and database, as it is very easy to make a mistake and corrupt data. This would generally involve changing the SQL syntax or adding/removing parameters in an attempt to obtain the same output with less overhead. A vast topic in itself, many books have been written on SQL and database query optimization.
5. Choosing the Right Hosting Provider
Evaluating server performance and reliability Your website’s speed and performance is greatly dependent upon your hosting provider and the type of hosting plan you have in place. A shared hosting plan is a good choice for small websites, but this type of hosting can have a negative effect on your larger website due to the fact that it shares a server with other smaller sites, which can cause server overloading. As an upgrade, a virtual private server is a better option because although it shares the same server with other sites, it has higher performance and a more reliable server for the price. The best available option (but also the most expensive) is a dedicated server, which is a server that is entirely dedicated to your website with no other sites on it. With server performance and reliability in mind, it might also be a good idea to look for hosting providers that offer servers in specific regions with higher performance and connection speeds towards your target audience region. Considering local hosting options Another option to consider would be local hosting. Local hosting is generally a hosting server location that is in close proximity, usually within the same country or state. There are many benefits of hosting locally, such as faster connection speeds and latency to local visitors. This can be very beneficial for a website in New Zealand that is hosted on an overseas server to change to a local server to greatly increase its connection speeds for New Zealand visitors. However, on a global scale, local hosting may not be an ideal option for some websites that target an international audience due to the fact that it will decrease connection speeds and latency in higher distant regions.
5.1. Evaluating server performance and reliability
The server is the foundation of your website, and its performance has a direct impact on the speed of your website. Testing a server’s performance is a critical yet often overlooked stage of your web projects. Also, it is not a simple task, and different results can be gathered depending on what you are trying to test, as well as the environmental factors during the testing. Before you do any testing, you should make a list of what is important to your application and what you would like to test. For example, if your site is a blog, the database may be the most important factor. If it is rich in images and static content, you will want to test the bandwidth from a standard web server. If it is an AJAX application, you will want to test the raw power of the CPU. This seems simple but it can become more complex when you have multiple factors to test at the same time, i.e. testing CPU and database performance at the same time.
One simple method to test the server’s raw PHP execution speed is to use a simple benchmark script. This script includes WordPress’s wp-blog-header.php and simply echoes the time it took to execute the script. After this, it then performs a simple SELECT query on the WordPress database and echoes the time it took to execute the query. This is then repeated a number of times and the averages are taken. This may only test raw PHP and MySQL execution speeds and is not a true representation of the server’s performance, but it can give you a good indication as to whether you are getting your money’s worth from your hosting.
5.2. Considering local hosting options
One of the most crucial factors that can influence website performance is server location. The physical distance between the server and the end user impacts latency and load times. While most hosting companies have servers in the US or Europe, those who have a primarily local website audience should consider a local hosting provider. An easy way to find out where a website is hosted is by performing a server lookup using IP addresses from the hosting company. This will provide a good indication of where the server is physically located. It is also important to note that some hosting companies may have servers in the US but provide a localized service with local technical support and reliable connectivity options. These can be suitable alternatives to overseas hosting.
The decision to go with a local host will depend on the nature of the website and target audience. Clients with local business websites will obviously benefit most from local hosting. It’s also about weighing the benefits of server location against the cost and features of hosting packages. This is not to say that it is always best to go with local hosting. There are many clients with an international audience or limited budget who may still benefit from an overseas hosting solution. In the case of clients with an international audience, the ideal solution may be to use CDN in conjunction with an overseas host. This way the website can take advantage of the CDN’s global content distribution and still maintain a central server location.
6. Utilizing Content Delivery Networks (CDNs)
Content delivery networks (CDNs) are a system of distributed servers that deliver webpages and other web content to a user based on the geographic locations of the user, the origin of the webpage, and a content delivery server. The goal of a CDN is to serve content to end-users with high availability and high performance. CDNs serve a large fraction of the internet content today, including 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.
A CDN operator is in the business of content delivery, not hosting, and usually has a small server farm which is often located close to the end users. This is a mirror of the central database which has the content, generally a website in the case of an online retailer. Usually when a visitor comes to a retailer’s website, they will be redirected to the operator’s server farm via DNS. This server farm will act as the host to the website’s content. A server farm is usually a cluster of FPM (File Placement Manager) machines. When these FPM machines need the content, they will then go to the central DB. The content is pulled from the DB and through the use of virtualization technology, a copy of the content is made on the FPM.
CDNs also provide protection from large surges in traffic. CDNs provide the end server with a “shield”, and when a large surge in traffic is detected, the CDN re-routes the traffic to its own servers. This also provides load balancing.
6.1. Understanding the benefits of CDNs
The main advantage of using CDNs lies in the concept of distributing website content to end users with high availability and high performance. CDNs serve pages depending on which data center is closest to the user, this is determined by the location of the CDN. Most modern CDNs will cache static content such as CSS, JavaScript, and image files but some can also cache dynamic content. The first benefit CDNs offer is in loading website content much faster than hosting it on a single server. Static content is cached and replicated across all data centers whereas dynamic content is dynamically cached and stored on the edge server. This means users will receive content from the closest possible server location. With the majority of internet users being in Europe and North America, if a server is located in the UK and a user from the USA requests data from that server, it will take much longer to retrieve the data than if there was an available US server. This is because the data will have to travel a far greater distance which results in higher latency and slower loading times. CDNs eliminate this issue by serving the content from a US server and therefore increase load time for the end user.
6.2. Configuring a CDN for your WordPress site
According to Wikipedia, a content delivery network (CDN) is a system of computers containing copies of data placed at various nodes of a network. It is a way to deliver content to the user with great performance, scalability, and reliability. CDNs serve a large fraction of the internet content today, including 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. CDN is a good option when your visitor is far away from your original server location. Let’s say your server is located in the US and your visitor is from Asia. Load time is going to be longer because the request needs to travel across the ocean. This is where CDN comes to the rescue. By serving your static content on separate servers, it enables parallel connections, offloading, and caching. Static content could be your images, stylesheets, and scripts. A good example of a free static CDN is Google Ajax Libraries API. They host popular JavaScript libraries and users could include them directly from Google. This way, the cloned content is served from the closest server to the user and cuts down the travel time of the request. Static content is often cached in the user’s browser too, so the next time they visit your site, the load time is even faster. CDNs also have great uptimes compared to the actual host, so your users can have a smooth experience browsing your site.
7. Implementing Performance Plugins
Several plugins have been developed for use with WordPress to increase its overall performance. By far the most well known is WP Super Cache. This plugin generates static HTML files from dynamic WordPress content. After an HTML file is generated, your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts. Other plugins to explore include WP Widget Cache and WP Minify.
The method of switching to a faster DNS server can result in a faster website. On almost every computer, the TCP/IP settings are set to the default dynamic settings. By switching to a faster, more reliable DNS server, you can actually make your PC run faster when pulling information from the web. OpenDNS is one of the free and reliable public DNS services.
Another method to speed up your website is to offload the DNS resolving and resource downloading to a different hostname. This can increase the number of concurrent downloads and page load speed. To do this, you need to create a sub-domain and point this to your current web hosting account. This can be complicated and generally isn’t recommended for beginners.
In summary, to get the best possible performance, using WordPress will require an initial learning curve and some experimentation. By using the outlined methods, you can easily achieve lower load times, a better user experience, and potentially move up in search engine rankings. Utilizing the content from these tips and plugins will see the best results and offer an advantage over the vast majority of other WordPress websites.
7.1. Exploring popular WordPress performance plugins
WordPress has a massive community and there are always new authors releasing cutting-edge plugins to enhance your blog. However, often the decision to install a plugin which has a lot of features you want leads to the site owner finding out that only one of the features is active and the rest of the features are loading unnecessary scripts and data. P3 Plugin Profiler aims to tell you how much load each plugin is putting on your site, and if you are using Autoptimize or W3 Total Cache you can first deactivate certain plugins, then rerun the performance plugin and see if the total load on your site has been reduced. This plugin is useful for finding out which plugins to delete and source a lighter alternative for. In terms of actual performance improvement, WordPress has 2 main types of caching: browser caching and server caching. W3 Total Cache is a plugin which covers all areas of caching in WordPress and is the best of its kind. It has too many features to list and can be a bit confusing for the average user, but by simply turning on Page Cache and Minify you can expect to see great improvements in site load time and a reduction in server load.
In recent times, WP Super Cache has become a more popular choice of caching plugin. It is easy to use and very effective. Although not providing as much functionality as W3 Total Cache, the average user will find it a lot easier to use and it will give you all-round solid performance improvements.
7.2. Configuring and optimizing plugin settings
When optimized, performance plugins can significantly improve website speed and load times, making them essential tools for local site improvement. The WordPress Plugin Directory contains various free and premium performance plugins that will benefit your site. Before making a choice, it’s a good idea to read plugin reviews to ascertain which ones are most effective. It’s equally important to test plugin performance using P3 (Plugin Performance Profiler), which will show you which plugins are slowing your site. By using performance testing, you can avoid using plugins that are counterproductive.
Plugin configurations vary, but most will have an option to turn on/off features and adjust settings. The key to effective plugin optimization is understanding what each feature does, and how it will affect your site. This information is usually available from the plugin author. If it’s not, you may need to do some research or experimentation. When configuring a database optimization plugin, you may be given the option to delete post revisions, clean auto-drafts, and delete spam/trashed comments from your database. A caching plugin will allow you to enable browser caching, adjust cache lifetimes, and disable/enable various caching options. Be sure to research plugin settings thoroughly to ensure correct configuration. Incorrect settings may cause the plugin to malfunction or negatively affect your site’s performance. Plugin feature and setting changes should be tested using performance tools mentioned in 9.2 to ensure they are benefiting your site.
8. Mobile Optimization
Designing responsive themes for mobile devices WordPress themes are a popular way to create websites. It’s an easy way to get a good looking site, and most of the time you can do it for free. One thing many people don’t take into consideration is mobile device users. This could be an honest mistake or it could be that the designer just doesn’t think it’s worth the time. One thing you have to take into consideration is the search engine and competition. If you’re aiming to get the most traffic possible, you can’t ignore mobile devices. The shift to mobile is happening at an alarming pace, and it’s not predicted to slow down for a long time. Responsive themes are designed to adjust their layout to the device being used. This means less pinching, zooming and scrolling for users. It’s an efficient way to tap into the mobile market without creating a separate mobile site. If you happen to be an advertiser or affiliate marketer, mobile traffic is also a great place to test out new offers. Due to less competition, you’ll often find that payouts are higher. A responsive theme could be your moment to enter an all new market.
Optimizing website performance on mobile One question many people will ask is if page speed is still a factor with mobile devices. The answer is a definite yes. In fact, due to slower load times and lesser technology, it’s even more important. Way back in 2009 Google added a feature which shows load times on search results. Now, they’ve extended this feature to mobile devices. How exactly do load times compare to PC with mobile devices? Unfortunately, load times are actually slower, and 71% of page load time happens to be used with images. While currently there are less data restrictions on mobile devices than back in the days of WAP (Wireless Application Protocol) sites, people still want fast load times. Often times mobile devices are used for quick information on the go. If you have a slow loading page, expect many people to hit the back button. This can also add to your bounce rate, which isn’t a good thing. Just like page speed is a factor with search ranking, bounce rate is also a factor. High bounce rate on your site will push it down search rankings. In short, slow load times equals less traffic. Every second counts, and people will just move on to a faster site.
8.1. Designing responsive themes for mobile devices
When designing a responsive theme, the main goal is to keep the website looking clean and easy to navigate, regardless of the device used. Transitioning a desktop site to a mobile one can be a big challenge. The mobile environment calls for simpler navigation and prioritized information. This takes time to plan and create a thoughtful, effective design.
The most popular technique for making a website mobile friendly is by utilizing a responsive theme. Responsive themes respond to the device being used and the orientation of the device by adjusting the layout of the website to present the information in an optimal viewing format. With a responsive theme, there is no need to create and maintain a separate mobile site, making it easier and more cost effective to transition the current website to a mobile friendly format. There are many responsive themes available from WordPress and other theme providers. If you are considering using a responsive theme, make sure to preview it on your mobile device before implementation to ensure it meets your expectations.
8.2. Optimizing website performance on mobile
After designing a responsive theme, mobile device specific improvements can be made to further optimize a site for mobile users. Due to the disparity in mobile browser capability, some mobile devices may load the full site even though it was designed with a specific mobile URL. It’s best to detect mobile browsers and direct them to a mobile specific site. Mobile specific sites are designed for the small screen and different user interface of mobile devices. It’s faster to load and more effective at delivering specific mobile content. Keep the mobile site on the same domain as the full site and link between the two. This avoids SEO issues and makes it easy for users to switch between the full and mobile site. WordPress’ mobile detect and mobile pack plugin are useful for implementing this setup. If you’re using a content management system other than WordPress, you can configure a mobile redirect in PHP with the use of a user agent. Mobile sites can also benefit from the use of a content delivery network. A CDN will deliver your site’s static content from servers located all around the world. When a user visits your site, this ensures that they will receive the static files from the server location that is best optimized for their location. This can greatly decrease load times for mobile users in particular, who may be accessing the internet through a shaky 3G connection. To set up the CDN for only mobile user agents, I recommend incorporating the PHP Mobile Detect class into the CDN plugin’s configuration.
9. Monitoring and Testing
Setting up website monitoring can be as simple as signing up to a SaaS tool. Pingdom, from Swedish company SolarWinds, is one of the most popular. The tool will regularly check your site availability and response times, and alert you when something is wrong. You can get a good idea of your global response times by setting a few uptime checks from different locations around the world. This is useful for seeing how well your hosting provider, or a new hosting provider, serves your website to different global markets. If you suspect that your server is being slow to serve your site, it’s likely that you can see something funny in failed checks against various locations. It’s also a good monitor to have running when you update your site. If response times increase drastically after a change, you’ll have a good idea that something has gone wrong. Another alternative is uptrends. This tool also does uptime monitoring and provides detailed reports of your site’s availability and response times. A recent up-and-coming tool is called Hyperping. Hyperping is built by the team at Hyper.co and features more than just uptime monitoring. It also has features that monitor the functionality of contact forms and attempt to find errors on your site and notify you. This is a good tool for those who want to keep an extra vigilant eye on the functionality of their site. If you’re thinking of setting up monitoring with more features, such as server resource monitoring and maintenance scheduling, it might be worth looking into using a server management service. Server management services like Cloudways offer VPS servers with various cloud providers, and have server and website monitoring features included. If your site’s performance is integral to your business and any substantial downtime could mean lost revenue, it might be worth investing in the services of a WordPress maintenance team such as WP Radius. These guys specialize in maintaining and protecting WordPress websites.
9.1. Setting up website monitoring tools
Website monitoring tools range from free resources such as the Google Webmaster Console and Google Analytics, to commercial grade software that can track and produce reports on your website performance and return on investment (ROI). Picking the correct tools for your website will depend upon what you are attempting to measure. Many small businesses will need to know the ROI on their website, and with the increasing emphasis on social media and its effect on business you might need to track how effective your Twitter and Facebook campaigns are. Other sites may need to monitor website uptime and performance in order to ensure that they keep a high level of customer service. Steps to consider: Read reviews and product information to determine what tool is best for you. Make sure to consider what it is you actually need to measure for your website, and then determine what tools provide this information. Many tools have free trials or basic packages that can be utilized to test and compare which one works best for you. Always make sure you fully understand how to use the tools and how the data is produced. Many tools will require you to insert tracking codes or have other certain set up requirements, and failing to do this properly can lead to inaccurate data.
9.2. Conducting regular performance tests
Regular performance tests are the final step in setting the foundation of a performance optimization strategy. If undertaken when the site is running at its best, they will give you a good idea of how well the site will perform under stress. Where problems are identified, then more time can be taken to investigate in order to find the cause. The tests themselves vary in complexity and should be chosen dependent on how critical performance is to the site. Load Impact is an effective tool for testing how well a site will perform under a high load. It works by recording the typical usage patterns of visitors to a site and then simulating these as closely as possible. If a site is in its early stages and the budget is tight, setting up a development server and using the Apache JMeter application would be a more cost-effective solution. JMeter works by sending loads of different types of requests to the server and displaying the results in a number of different ways. A comparison of the resources used during each test can help to identify both positive and negative changes in optimization.
10. Security Considerations
Maintaining the status quo of website security is essential to your website’s performance. In 2008, an average of 75 PHP and SQL website hacks were reported each week. The internet is a place of great opportunity and risk. The same great features and flexibility that attract users to PHP sites can also attract those with less honest intentions. Protecting your website from vulnerabilities is a crucial part of the maintenance of website performance.
So you’ve been following the previous chapters and making great strides with your website’s performance. Like anything else you’ve built, you need to protect it. Like the walls of a sandcastle from the tide of the sea, you need to defend it from external forces. Those forces are often the same issues you’ve been working against.
Vulnerabilities can be found in a variety of ways. The troublesome issues are often with themes or plugins. Features are a primary focus in creation and often security is an afterthought. Plugin vulnerabilities constituted 54% of the reported issues in 2009. Themes, 11%, and the rest was split between misconfiguration, outdated software, and miscellaneous issues. The issues with outdated software are a part of why performance and security go hand in hand. Remember the different performance plugins we’ve discussed and your ultimate goal of keeping your site up to date with the latest standards? This is to ensure the best possible functionality and minimization of security issues. In many ways, having a site with great performance is a step towards having a secure site.
10.1. Protecting your website from vulnerabilities
Vulnerabilities can manifest from numerous sources, from the server your website is hosted on to the various scripts that are used in its operation. The best protection is a proactive approach that keeps all software up-to-date and minimizes the use of potentially vulnerable scripts. WordPress as a platform is not any more or less secure than others that have similar features. It is, however, more of a target due to its high visibility. As a platform that is frequently updated, has a large developer community, and is being used by an increasing number of corporations, there will always be attempts to exploit it. For more information on this topic, the WordPress Codex has a very in-depth article on hardening WordPress, which delves into server-level security and the more intricate aspects of keeping the platform secure. Outdated software is the number one reason for security breaches. This is not limited to WordPress but many other web-based software. When software is updated, developers often include fixes for bugs or vulnerabilities that existed in previous versions. By updating software, you decrease the chance of an exploit being used on your site. Using lesser-known software can sometimes be seen as security through obscurity. However, it is more likely to reduce the amount of attacks on your website. This can apply to the various plugins and themes that you may use with WordPress. When evaluating software, be sure to check its update frequency and its level of support. Software that is updated infrequently or has little developer support is usually best avoided. Oftentimes, site owners are hacked due to exploits in old versions of software. Be sure it is easy to keep the software up-to-date.
10.2. Ensuring secure data transmission
When data is transmitted from one computer to another, it is vulnerable to capture and misuse. To reduce the risk of sensitive information getting into the wrong hands, we can encrypt the data being sent so that even if it is captured, it will be unreadable. All data transmitted over the internet is divided into smaller units called packets. Each of these packets is treated as an independent message and follows the best path available. This means that packets from the same message can travel different routes and can arrive in a different order than they were sent. When we encrypt data, we are ensuring that it is secure and that it cannot be tampered with. This means we need to ensure that the data remains intact and in the correct order when it is being decrypted at the other end. Any change in the data or the order of the packets in which they arrive will mean that the decryption will produce nonsense and the data will be lost. So we need a way to guarantee the integrity of our data transmission. In addition to this, we want to be certain of the identity of the machine to which we are sending data and vice versa. We do not want to be sending our sensitive information to an imposter.
11. User Experience Optimization
Improving website navigation and usability. Ease of use and navigation are key factors in the success of a website. Poor navigation and complex user interface can frustrate visitors and send them to another site. A well thought out navigation and site layout can do wonders for your site’s performance. On the other hand, a haphazard interface can doom even the most promising site. Take the time to think through what you want to achieve with your website. Consider the end result of your site, and what you want most from it. Now put yourself in your visitors’ shoes and try to imagine what course of action would be most natural to achieve that. Diagram a rough sketch of how you would like your site to be laid out. This will provide a great reference that you can consult when actually building the site. Now think about what elements are most important, and how you would like to display them. Group related items, and attempt to form a clear path of navigation from the entry to the end goal. As a rule of thumb, no page on the site should be more than three pages away from any other page. This ensures that if a user finds a particular page, he will be able to find related material without difficulty. Now, taking your path of navigation into consideration, build the navigation system. An ideal system is often a text link site map on the main page, with the main navigation located in an include file that can be added to all pages. Dropdown menus are also an effective way of displaying a lot of information in a small area. Stick on course and try not to deviate from the original plan. Always keep the end goal in mind and make it so that the user is never more than a few clicks away from it.
11.1. Improving website navigation and usability
Many websites focus on content and SEO, but seem to overlook the importance of navigation and user experience. A well-designed, easy to understand navigation system can do wonders for improving the user experience of any website. On the other hand, a poorly designed navigation will lead to users becoming frustrated and will result in higher bounce rates and lower user retention.
Ensuring that your website has clear, consistent navigation is an important part of ensuring overall usability. This gives users a clear path to follow and makes it easy for them to find the information they are seeking. Consistent navigation will also make it easier for repeat visitors to your website to find new content or information that they may have missed during their previous visits.
By building a solid information architecture for your website, you will help users to find information more easily and will also help search engine spiders to crawl your website, indexing pages that they may have otherwise missed. Users hate to click and click through pages trying to find what they are looking for. Providing them with an easy way to search your site is the best way to avoid this. A good search feature will allow users to search by keyword, and will also provide them with an easy way to narrow their search using categories or tags.
A successful website is one that gets a high amount of returning visitors. These users are the most likely to spread the word about your website and in some cases can become loyal customers. Measures should be taken to ensure that they have an enjoyable experience when they visit your website. This may involve surveying your current users to find out what could be improved, or doing usability testing to see if there are any obvious problems that need to be addressed. Always be on the lookout for ways to tweak and improve your navigation and the overall user experience of your website.
11.2. Optimizing page layouts and design
In addition to improving website navigation and usability, an essential aspect of user experience optimization is to improve page layout and design. This includes ensuring consistency in design throughout the site, designing pages for user’s common behaviors, and adding features to improve the user’s experience, such as a better navigation menu. The following are steps that you can and should take to improve your website’s page layout and design.
Improve page layout consistency – Consistency in design is achieved by applying the same set of styles to all elements of the same type. The overall layout should then be divided into sections, and each section should have a consistent style. A highly consistent layout makes the site easier to scan, which is an often cited reason for learning to read on the web. Users tend to be habitual in their navigation around a site and will be able to learn the location of page elements more quickly if they remain in a relatively consistent location.
Design for common user behaviors – It is well known that web users tend to read in an “F” shaped pattern. Eyetracking visualizations show that users often read web pages in a hierarchical manner, starting in the upper left corner of a page and scanning down the left margin. Designing your page to put the most important information along the left margin and headings can improve the likelihood that the important information will be read. Another common behavior is quick scanning for links, images, or other standout elements. This can be augmented by providing clear visual clues on the clickable or interactive page elements. Finally, reading is often interspersed with moving back to the previous page or accessing another part of the site. This behavior can be assisted by providing a clear idea of where the user is on the site and an easy, always present method of navigating to other parts of the site.
12. SEO Optimization
One of the most important factors in getting good rankings for your site in the search engines is making sure that your site is easily traceable by their spiders. This means doing whatever you can to increase the PageRank of your site’s main page. The assembly of high quality backlinks that direct to your website will act as a catalyst in increasing the Page Rank of your site. This in turn will cause your site to be indexed more frequently by the search engines, ensuring that changes to your site will be reflected on long term keyword rankings. This can be done successfully through article marketing, directory submissions and social bookmarking. Blogging and participating in forums are also a great way to assemble more backlinks and increase traffic to your site. However, it is absolutely crucial to make sure that whatever method you employ in increasing backlinks to your site, do not under any circumstances use link building software.
A site’s load speed has also been confirmed as a large factor in the quality of its rankings. Ensuring that your site is fast and efficient is conducive to good rankings and it is one of the many ways that building a WP site can be highly advantageous to your SEO campaign. WordPress has various plugins such as WP Super Cache which are designed to optimize site load speed. In order to further maximize site load speed, it is recommended that large self-hosted video files should be embedded from content delivery networks. Implementing a suitable permalink structure is a further recommendation. This can be done through accessing the permalinks option in WordPress settings and then selecting the ‘post name’ radio button.
12.1. Optimizing website structure for search engines
When considering website search engine optimization, a good initial step is to ensure your website is well structured and easy to navigate. This not only makes it easier for search engines to find and index your pages, but it also makes it easier for users to find information on your website as well. Creating a website “map” is an effective way to plan the structure of your website. This is a list of all the pages on your website. You could make a simple bulleted list on a word processing document or a complex diagram using a program such as Visio.
The first step is to decide what the main topics or features of your website should be and list these. They will become the main sections or “silos” of your website. Next, underneath each of these topics, list the subtopics or points that are related to the main topic. These will become the individual pages of your website. Now that you have planned how your website should be structured, you can begin to organize it accordingly. When using WordPress, creating categories and subcategories that match the topics and subtopics you have listed is an excellent way to begin. After these have been created, you can create individual pages which will be dedicated to one of the subtopics you have listed. Finally, you should link these individual pages posts to the category pages that are relevant to them. This can be done manually during the post/page creation step or there are plugins that will do this for you.
Another important aspect of website structure is the URL of your pages. You will want each URL to reflect the content of the page and to include relevant keywords. Instead of using the default URL that WordPress assigns your pages, you can set permalinks to a custom structure that will include the name of the page or post. On the permalinks settings page, I would recommend using the /%category%/%postname%/ structure as it includes the categories of your pages as well. This structure can also be used for pages and posts in subcategories, keeping everything well organized.
12.2. Enhancing website speed for better SEO
Complicated and complex JavaScript/CSS coding can slow down website speed, and compressing (also called minifying) these files can greatly enhance website performance. The process of compression involves removing any unnecessary code or formatting from your CSS and JavaScript files, and there are various online tools (e.g. jscompress.com) that can be used to achieve this. Alternatively, if you’re uncomfortable modifying your code, various WordPress plugins are available which can automatically compress these files. Though it’s always a good idea to backup your data before making any changes like this to your theme in case anything should go wrong.
Utilizing a caching system is imperative for any website that regularly receives high traffic volumes. Caching creates a static version of your website, with the exception of any dynamically generated content, which is then served to your users. This is a highly efficient method of website acceleration as content does not need to be reloaded from the server, and can be configured to set expiry times for different types of content. There are various WordPress plugins available for caching, the most popular of which is WP Super Cache.
As stated above, using a CDN can significantly enhance website speed and is an excellent method of SEO optimization. The net effect of using a CDN is that your website content is delivered to users using servers which are physically closer to them, with the end result being significantly decreased loading times. Gaining the maximum benefit from a CDN requires configuring it to serve all of your website’s static files. This may be a complex and daunting task for many readers who aren’t as tech savvy, and it should be noted that some assistance from a web developer could be required in order to implement this effectively.
13. Tracking and Analytics
Integrating Google Analytics with your WordPress site is quick and painless. With minimal effort, you can have valuable data at your fingertips. The first step in tracking your site’s data is to get a Google Analytics account. If you have a Google account, you can use that same login for Analytics. Once you’re logged into your account, you can start the process of setting up a new account for your site. You will be asked to provide an account name, website name, and website URL. After you provide this information, you will be given a tracking code to place on your site. Typically, this code would be inserted into the footer.php file in your WP theme, but many people will recommend using a plugin to avoid having to manually add code to your theme. If manual code changes make you nervous, there are plenty of plugins that can do this for you. This process only takes a few minutes and is well worth the effort. With Google Analytics, you can now track various pieces of data about your site and its visitors. The WordPress.com Stats plugin will show you a view similar to the one above, but without having to leave your site. This is a matter of preference, but the deeper functionality is definitely with Google Analytics.
13.1. Integrating Google Analytics for performance tracking
Tracking changes in page load times, bounce rates, and other user behavior metrics is crucial to understanding the effects of your optimization efforts. Google Analytics is an excellent free tool that provides a wide array of metrics on user behavior, detailed in a way that makes it possible to pinpoint problem areas on your site. To fully utilize Google Analytics for tracking your website performance, it is recommended you link your Google and Webmaster Tools accounts, if you have not already done so, and enable auto-tagging on your URLs, if it is not already enabled.
By linking Google and Webmaster Tools accounts, you will be able to import data from Webmaster Tools into your Google Analytics account. This will be quite useful as you can match user behavior changes with organic search variations and/or traffic changes in general from a Google update. To link your accounts, navigate to the Traffic Sources Tab on the left side and click on Search Engine Optimization. From there, there will be a link to set up your accounts.
Enabling auto-tagging on your URLs is also recommended as it will allow Google Analytics to provide additional information on the source of a particular visit. This can be turned on through your Admin tab on the profile settings page under the Account section.
13.2. Analyzing website metrics and user behavior
In order to achieve any significant optimization goal, we first need to establish a baseline of website performance. This requires implementing a system for tracking performance and user behavior, and continuously analyzing and re-evaluating this data.
Google Analytics is a popular tracking system, which can help us define key performance indicators (KPIs). These are some industry specific measurable values which demonstrate how effectively a company is achieving key business objectives. Common KPIs for online business include increasing site engagement, reducing bounce rate, and increasing conversion rate. These KPIs are a reflection of user behavior. Site engagement is a very broad metric composed of visitor duration, pages per visit, and event tracking. This in itself is a relevant performance indicator, as a slow loading page will deter the user from viewing more than one page. Therefore, an increase in page load times will likely negatively affect site engagement. You may note, however, that there are a variety of factors affecting these lower level engagement metrics, and we don’t want to jump to conclusions about performance issues which may not exist. For example, a high bounce rate could be due to slow page load times, or it could be because the content of a landing page (which should also be assessed on its own merits) did not meet visitor expectations.
14. Performance Maintenance
Outdated versions of WordPress and your installed plugins can be a primary reason for your website’s poor performance. New releases generally include fixes and enhancements that are geared towards increasing both efficiency and security. Unfortunately, the updates themselves can sometimes cause issues resulting in a slow website or even total downtime. Because of this, the best course of action is to wait until the updated application has been tested on a staging environment or local server that mimics the live environment. If you can’t do this, it is often best practice to wait a few days after a release to see if there is any news of widespread issues. If all else fails, you should be familiar with how to roll back to a previous version and have recent backups of your website files and database. Always check to ensure that your plugins are compatible with your WordPress version as well.
After implementing the above changes, it’s important to verify their effectiveness and find any new problems that may arise. To do this, regularly perform speed tests and monitor your website for performance anomalies. If you are using a CDN, ensure that it is properly configured and its performance is satisfactory. Check your website on different browsers and devices to make sure that there are no specific compatibility issues. If at any time you encounter a sudden decrease in performance, reflect on any recent changes you have made to isolate the cause. If necessary, consult the support forum of the plugin or theme that you have modified. By spending time to pinpoint and eliminate potential issues, you can prevent the gradual decrease in website performance that often goes unnoticed.
14.1. Regularly updating WordPress and plugins
WordPress is an open-source platform that is constantly being improved and updated. Developers and community members are regularly working to identify and fix bugs, and to create and implement new features. By staying updated with new WordPress versions, you can take advantage of these new features, as well as be secure in the knowledge that you’re using the latest standard of code.
Updating your WordPress installation is very easy and, like anything else on your website, should be done first in a test environment and then applied to the live site. Many web hosting companies offer one-click WordPress installation which allows for an even easier upgrade process, and there are a multitude of tutorials on how to do this if required. It’s always best practice to backup your website before doing any form of update. This ensures that if anything does go wrong, you can quickly roll back to the previous state of your website. A handy tool for backing up your WordPress is the Online Backup for WordPress plugin. This will email you your website’s files and a backup of your database, which can then be stored on your computer or any other backup device.
14.2. Monitoring and resolving performance issues
When performance issues occur, they can often be attributed to recent changes in your website configuration. Whether it be a new plugin, theme or customization, your first course of action is to attempt to isolate where the issue originated. If the issue derived from a newly added piece of content, it is likely a conflict in which case the only solution is to disable the recent customization. If you are unable to link the performance issue to the recent change, it could be the result of your website growing in data or traffic. In this case, you will have to look to the following performance optimization guides relevant to your issue, as this is the most likely place where the issue can be resolved. At times, you may find the performance issue occurring before or after a major change has taken place on your WordPress installation. Should you have no backup to compare the changes with, you will have to rely on identifying the symptomatic problem. Given the broad range of performance issues and their many diverse symptoms, this can often be the most trying and time-consuming method in resolving the problem. In any case of a website crash or failure, your first point of call should be contacting your hosting provider. If the issue derived from a hosting error, the information on the problem should be attainable at no extra cost. The most severe performance issues can be the result of a faulty WordPress installation. In this situation, it is highly recommended that you consult with a WordPress professional or attempt to reinstall WordPress on your own.
15. Conclusion
By implementing the guidelines and tips presented in this guide, WordPress users should notice a significant improvement in their website performance. The process described involves common sense, careful planning and prioritizing the user experience. In terms of website performance, every little bit helps, so hopefully users will see some valuable takeaways from this guide. For the WordPress newbies, some of this may have been overwhelming, but understand that creating a fast, efficient, and highly optimized WordPress site takes time, patience, and lots of practice. Some of these tips may not apply to you, but for the more experienced users, they should serve as a solid reminder of the process that needs to be taken in order to have a successful website. Always keep a cautious eye on the changes that were made, as they could affect the website in unanticipated ways. Step by step improvements will lead to a well performing website.
Call to action: Ready to elevate your WordPress local presence? Let this best web development company guide the way! Visit them at webcasa.com to transform your website into a local powerhouse today!
