When it comes to speed & performance there is not a given rule that can address the problem in all scenarios. A possible problem with speed can be caused by multiple different factors. For example, two sites using the same WordPress theme can have completely different results depending on the server and depending on the content.
When it comes to performance it's important to distinguish between Speed and Metrics:
- Speed: this is the true speed of a website as perceived by the user, and it's generally measured in seconds. Speed is the most important value because it is the real User Experience of a website. More info...
- Metrics: these are a set of "scores" that can be used by website developers to get information on possible optimization areas of a site. More info...
Examples of fast Uncode websites
These are some Uncode websites taken from our Showcase that can be used as examples of good speed results that can be achieved following best practices. This also helps you to understand that possible speed problems are not caused by the theme, but many factors come into play:
- www.anywhereweroam.com
- www.dazze.studio
- www.hostpress.de
- www.matt-thomas-photography.co.uk
- www.hardandware.com
How to optimize for speed and performance
Speed is critical to the success of any website, and there are plenty of ways to optimize the performance. If your site is not running as fast as you’d like, there could be a few different issues. Here we outline some common issues that can slow down your site, and some of the steps you can take to speed it up.
1. Use a performing hosting service
The quickest win you can have with page speed is upgrading from a cheap shared hosting provider to a better host. Cheap hosts are good for when you are starting out, but for ultimate performance, you can’t match a solid hosting provider. If you spend a few dollars each month you cannot expect your site's loading times to be performing. First of all, you need to evaluate your host's performance based on the 'Server response time' or SRT (it is the amount of time between the web browser requesting something from the server and the webserver responding to that request back), and based on the 'Time to First Byte' or TTFB (it is the amount of time a browser waits to receive a response from your server after a request).
2. Use a cache plugin
By using a cache plugin you can bypass the PHP server-side creation of the page and provide the user with a saved version of the page implementing load times considerably. If you’re running Uncode we’d recommend giving WP Rocket a try first. WP Rocket is more than just a caching solution and it also enables you to minify your site’s files. Setting up WP Rocket is amazingly simple, you’ll just need to read about the tool’s basic settings or ask their awesome support, and it runs perfectly alongside Uncode right out of the box.
3. Deactivate not essentials plugins
Plugins are one of the great aspects of WordPress. We can find a plugin that does a specific job, install it, and have that functionality out of the box. But plugins add to the number of requests the site makes when loading a page, so it’s best to be prudent when adding new plugins. Also, note that not all plugins that are part of the Uncode package are essential to your site. For example, we have seen over time that many users activate both Slider Revolution and LayerSlider simultaneously. These are two quite heavy (though popular) plugins for creating animated sliders, and they are two plugins with the same functionality. Moreover, we never use them in our demos, and they are only included in the package for user convenience. When adding plugins to your site, the basic rule of thumb is to add a plugin if you need that functionality, and be aware that this can also cause a drop in performance.
4. Optimise images and contents
It is very critical that your images be optimized for the web. This is one of the most common reasons for slow websites. Having images larger than they need to be in file size, can drastically slow down your site speed. Graphic files tend to take up a lot of space, and optimizing yours can help your website load much faster. Before uploading your images, be sure to have them saved with the Save for Web option and that you have used optimization tools like JPEGMini or Optimizilla. Once uploaded on the WordPress Media Library, you can also use a fantastic plugin like WWW Image Optimizer or ShortPixel to optimize and compress thumbnails and crop versions that will probably be created in your installation (like the Adaptive Images or the Srcset Images).
5. Consider using a CDN service
A CDN (Content Delivery Network) is a highly distributed platform of servers that helps minimize delays in loading web page content by reducing the physical distance between the server and the user. This helps users around the world view the same high-quality content without slow loading times. Your site may benefit from a CDN (Content Delivery Network), like Cloudflare. CDNs utilize their own servers which are located in between the origin infrastructure (server where the content is actually located) and the end-users. CDNs cache content in servers that are located closer to the end-user, which means faster access as the distance to traverse is shorter. The use of CDN systems to serve images, and even non-native WordPress formats such as Webp. A great plugin that does both is the aforementioned ShortPixel.
6. Remove unused resources
A theme uses several scripts that are enabled and run on the same page. However, you don’t need to use all of them and to improve the speed of your website, it’s better to prevent those styles and scripts from loading. For instance, you might use a plugin that generates contact forms, and it loads its assets (.css and .js files) on every page of your website instead of doing it only on the /contact page (if that’s the only place where you need it). "Asset CleanUp" scans your page and detects all the assets that are loaded. When editing a page/post, all you have to do is to select the CSS/JS files that are not necessary to load, reducing the bloat.
7. Optimise your database
All the information that’s stored on your site has to go somewhere, and in most cases, that is somewhere in your database. Over time, yours can become bloated and start handling requests too slowly unless you clean it up. Your site’s database is where all of your content and settings are stored. Over time, it will pick up a ton of trash in the form of Post revisions, trashed posts, and comments. While you’re unlikely to see a massive improvement in front-end page load times from merely cleaning your database, optimizing your database does ensure that your database runs more efficiently. WP-Optimize can help you clean this junk out of your database. The plugin that I’ll talk about in the next section can help stop it from accumulating in the first place.
8. Optimise your design
It's important to remember that if you want to improve your website speed and perform better on the new speed tests, you have to optimize the design. For example, it is necessary to avoid using Header Sliders and carousels of images. In short, the design needs to be optimized for simplicity. Websites that focus on loading speed don't have big images or lots of effects that can weigh down the page loading, and that's a given. Here you can find an interesting article which explains, for example, how a single carousel can penalize speed tests.
About Speed Tests (PageSpeed, and GTmetrix)
Speed Tests like PageSpeed and GTmetrix are performance tools that take raw performance metrics and convert these into a score.
First of all, it is essential to specify that you will hardly get high values with a multipurpose commercial theme like Uncode. If you test other similar multipurpose WordPress themes (like Avada, Bridge, etc.), you can see that the results will be practically the same. With the new version of Google PageSpeed and GTmetrix, these kinds of themes are penalized. Specifically, the tests penalize the use of big files (Javascript primarily and CSS), but this is unfortunately normal because the theme has numerous features ready to meet numerous scenarios.
It is also important to point out that Lighthouse, the backend engine that powers these tools, applies network throttling to emulate the ~85th percentile mobile connection speed even when TO run on much faster fiber connections. In a nutshell, the tests are performed by a 3G connection, much slower than the current 4G connections we all use or the new generation 5G connections.
Contrary to what many users believe, these tests do not measure a site's speed but provide metrics that can help with optimization. It is crucial to understand if you are trying to optimize your site because you have a real speed problem (you can find the list of steps you can take to speed it up at the top of this page), or if you are interested in vanity scores. The popular WordPress Speed Up Facebook group's slogan claims, "Page Speed is in seconds - NOT in A, B, C, 85, 90, 100 seconds/grades". In this regard, here is an important article by the authors of WP Rocket (the most popular cache plugin for WordPress) that we recommend you to consult.
On the other hand, other users are frightened by particular articles they've read online about Google. On May 28, 2020, Google announced that Core Web Vitals would soon become a new ranking signal, stating that user experience will affect rankings. Their announcement lists Core Web Vitals as signals "important for delivering a good page experience in Google Search". This proves that site speed is being considered, but there is also evidence that it does not outweigh other on-page factors. So, when it comes to site speed as a ranking factor, Google isn't looking for a website with lightning-fast speed. It's looking for one that can meet a user's intent. As such, user experience and content should be the focus of any SEO campaign. Site speed is merely a small piece of the puzzle.
According to the optimization suggestions of the Speed chapter, you must first have a fast website to have good metrics on speed tests. You will also have to make some compromises in terms of content, features, and design. It's impossible to expect to have a slider in the header that loads three fullscreen images and has good metrics on modern speed tests. If you want to score highly, it’s best to experiment with a range of measures and see what works best for your site and server setup. After all, every situation is different.
We list here some GTmetrix reports of Uncode users who have optimized their websites following the best practices, we invite you to analyze the metrics and test the browsing speed:
Below are some optimized pages from our demo. As you can see, only the type of design and assets loaded can affect the speed metrics (in fact, all these pages are within the same site, but the results change):
- www.undsgn.com/uncode/homepages/portfolio-classic
- www.undsgn.com/uncode/homepages/portfolio-freelance
- www.undsgn.com/uncode/homepages/classic-consultants
- www.undsgn.com/uncode/homepages/classic-saas
- www.undsgn.com/uncode/uncode-woocommerce-theme
Optimization is a process that must be approached by the user according to each site's specific needs. The same theme, installed on different servers, with different content, and different designs, can produce completely different results. For this reason, it's not the theme author's responsibility to optimize your website. If you are interested, on the Uncode Facebook Group, you can confront other Uncode users about these topics. Always on this group, you can find Uncode experts who provide help for free, or freelance quotations:
Comments
0 comments
Article is closed for comments.