Hosting is a popular topic when it comes to WordPress sites. Many users often find it difficult to choose the right hosting solution for their website and sometimes it could become a tedious task. The reason is simple, you have a lot of options available out there and you can’t test them all.
Normally, almost all websites use the searching function supplied by WordPress. It works well with basic needs. But if you want to use advanced features to improve the user experience, the default search box is not enough.
Website owners and developers as well usually care about improving the website’s loading speed. One of the most effective techniques to do that is removing the unused CSS and Javascript files. This execution is quite simple. We are going to show you how to find unused CSS and JS files, and then clean up CSS and JS with a dedicated plugin or a self-created plugin in WordPress.
Azure is a top cloud vendor offering a wide range of cloud storage services, which you can use to host your WordPress site. This article examines the key pros and cons of hosting WordPress on Azure, explains the installation process, and explores four pro tips you can use to optimize your Azure-based WordPress site.
What Is Azure Web Hosting?
Azure is a platform for cloud computing that is available in software as a service (SaaS), platform as a service (PaaS), and infrastructure as a service (IaaS) formats. You can use Azure to gain access to storage, computing, or networking resources as well as pre-built services like backends for web apps or machine learning tools.
Some of the most valuable features of Azure cloud services include:
Scalability—you can manually or automatically scale resources to meet traffic demands and optimize resource use.
Flexibility—you can deploy Azure resources with most operating systems, frameworks, and tools. You can also deploy fully in the cloud or in hybrid configurations.
Reliability—Azure resources are provided with a service level agreement (SLA) ensuring 99.5% availability.
Global—Azure provides access to globally distributed resources with data centers available in all regions of the world.
Cost-effective—you can use resources and pay-as-you-go, avoiding upfront costs or fees for unused services.
Hosting WordPress on Microsoft Azure: Pros and Cons
When deciding which provider to host your site with, there are several pros and cons about Azure that you should consider.
Pros of Hosting WordPress on Azure
The benefits of hosting on Azure resources include:
Better user experience—Azure enables you to distribute traffic workloads across multiple resources with low latency. This can help ensure that content loading happens smoothly for all users regardless of how many active requests you have.
Autoscaling—your resources can scale up or down as needed. This can help ensure that your services remain available with consistent performance. It can also help you save costs by scaling down when traffic demands decrease.
Integrated content delivery network (CDN)—Azure offers a built-in CDN that you can use to cache static, high-bandwidth content. It also includes functionality that enables you to use edge computing for faster delivery of dynamic content.
Reliability—any data stored in Azure is automatically replicated across resources to ensure availability and protect you from single points of failure. You can also easily backup data via Azure Backup.
Cons of Hosting WordPress on Azure
The downsides of hosting on Azure include:
Price—Azure works well for enterprise-level sites that require significant resources or bandwidth. However, for smaller sites, the cost is often too high because you cannot benefit from purchasing resources in bulk.
Database speed—if you try to host WordPress with the free database option you may not have enough connections or storage. You can upgrade your database and optimize it with plugins but this costs extra. If you do want to go this route, you can use plugins like WP-Optimize which enables you to clear irrelevant data.
Migration—if you are currently hosted on-premises or in another cloud, you should keep in mind the complexity of migrating your database to Azure. Migration requires some extra effort but can be made easier with the use of Azure’s Data Migration Service.
How to Install WordPress on Microsoft Azure
Once you’ve decided that Azure is right for your site, or if you want to see what setup in Azure is like, you can take the following steps.
Sign up for Azure
If you are new to Azure you can create a free, trial account to get started. This trial provides 12 months of access to Windows and Linux machines and up to 750 hours of computing time. This is roughly equal to a month of free hosting. The trial also grants access to 5Gb of storage, 250GB of SQL database, and 15GB of bandwidth.
After your account is created and verified, you can sign into the Azure Portal. If you already have an Azure account, you can sign in directly.
Create a New Resource
In the portal, from the main Dashboard, select the + button and choose to create a new resource. You should see a prompt allowing you to search the Azure Marketplace. There you can find pre-built WordPress configurations.
Select the setup you want and click Create.
Click Create.
Resource Configuration
Once your resource is selected you can define your desired configuration. After you are finished, select Create. Options to configure include:
App name—a unique name to help you identify your WordPress installation.
Subscription—defaults to the account you are currently signed in under.
Resource group—defaults to the app name you define.
Database provider—should default to Azure Database for MySQL.
App service plan/location—select the data center nearest to the majority of your site users.
Database—define unique database credentials. It’s a good idea to make a note of these in case you need to directly access your database later.
Application insights—leave the default value.
WordPress Install Wizard
From the Azure dashboard, you should be able to select your resource. You’ll then see a temporary URL of your WordPress site. Select the URL link to run the WordPress wizard.
Follow the wizard prompts, entering information as necessary. Once you’re finished, you can open your site to verify that it’s active.
How to Optimize WordPress On Microsoft Azure
Once your site is operational there are a few practices you can apply to optimize your performance.
Compress images—large images consume more bandwidth and can significantly slow your site loading times. Rather than delivering images as is, consider using Azure blob storage to store multiple versions of each file. You can then deliver the optimal image to each device, for example, high-resolution images for users with large screens, and smaller images for smartphones.
Reduce dependency requests—reducing your CSS and JavaScript to single files can help you reduce the number of requests for dependencies. You can use plugins like Better WordPress Minify to combine style sheets. You should also try to store all files in your site storage rather than relying on third-party libraries.
Azure Redis Cache for object caching—you can use object caching to store query results from your site or web applications. This can help speed your site performance and makes it easier to scale since objects can be delivered from the cache rather than requiring more database traffic. Learn more in the documentation.
Use Azure CDN—you can use Azure CDN to automatically check where users are and serve content from the nearest server to them. You can also use the CDN to deliver optimized images or other media. If you’re not familiar with CDNs, learn more about how CDNs work.
Conclusion
When hosting your WordPress site on Azure, you gain fast loading speed, autoscaling according to traffic demands, built-in content delivery network (CDN), and high reliability. However, Azure pricing is often too high for users unable to purchase resources in bulk.
Additionally, the free database storage is typically not enough for good speed loads, and upgrading your database will cost you extra funds. To save on bandwidth costs, you can compress images. You can also reduce deployment requests to improve performance, and Azure CDN can automatically ensure users are served optimized content.
Change is the only constant, and the world is evolving every day with innovative ideas to enhance web-based platforms. Keeping track of these changes will help developers to stay updated with new technologies and current trends. Digging through each and every content might become very exhausting in the hustle of your everyday life. However, you can resort to newsletters to minimize the stress and get useful information from your desired influential industry.
In this article, we list the best newsletters that developers should subscribe to. They will provide you with invaluable information and impressive curated content.
I’ve just had a nice experience improving and modernizing a large JavaScript codebase in a WordPress plugin. The original code was written in an old-fashioned way with jQuery in a single large file. Using modern EcmaScript and tools like Webpack, I was able to split it into modules and improve the code structure. The new code is much more readable and maintainable, and of course, fewer bugs. In this tutorial, I’ll show you how I did that.
The Coronavirus crisis (COVID-19) is spreading all over the world. It affects all of us and our businesses. Your company might switch to work from home, and your sales might decrease. In this hard time, many companies are showing their generosity. They offer their products and services for free or at huge discounts to help people to get through this time.
While choosing the best WordPress themes for your upcoming websites, it is critical to consider much more than simply its overall aesthetic appeal. Are you in search of an easy and effective way of building and customizing your WordPress site? You must consider using WordPress page builders that help you in creating, editing, and customizing your website layout but this does not involve writing any code. Let us explore the top page builder compatible WordPress themes.
Google Fonts is always a bottleneck for website performance. The Google Fonts' CSS is a render-blocking resource, which means that the browser won't render any processed content until the CSS is loaded. It also causes a blank space when the font is being loaded.
In the previous post of this series, I have shown you a way to get rid of these problems using a script from PerfPerfPerf. Since then, Google Fonts has some updates and the PerfPerfPerf's becomes outdated. And we need a better way to load Google Fonts now!
Google Fonts loading problems
Before going into the solution, let's summarize 2 issues, as they are the most important problems with Google Fonts. And these are the problems we're going to resolve in this article.
Google Fonts Render Blocking CSS
When Google Fonts is being loaded, no further content (text, images, CSS, JavaScript, etc.) is loaded. That means your whole page is blocked until Google Fonts finishes loading its CSS.
This problem is critical because it freezes your website when loading and increases the First Contentful Paint (FCP) of the page. FCP is an important, user-centric metric for measuring perceived load speed because it marks the first point in the page load timeline where the user can see anything on the screen—a fast FCP helps reassure the user that something is happening. It's a part of the Web Core Vitals and is an SEO factor. So if you have it high, your site might get a lower ranking.
Blank space while loading Google Fonts
Another problem with Google Fonts is that when it's being loaded, the text is completely vanished before your eyes. Only until it's finished loading, you can see the text. This effect is called FOIT (Flash Of Invisible Text).
That causes a really bad experience for your users. And if the loading time is huge, your users might think your website is broken (because they see nothing!).
And FOIT also affects the First Contentful Paint (FCP) as well, and thus might affect your search ranking.
How to fix Google Fonts problems
Load Google Fonts asynchronously
To solve the 1st problem of render-blocking, we need to load Google Fonts asynchronously. That means we'll load the Google Fonts' CSS without blocking loading or rendering other resources.
There are 2 solutions:
Preloading CSS with rel="preload"
preload is a mechanism to load resources without any effect on loading the other ones. It also puts a higher priority on the resources that are preloaded. That means these resources will be load before other resources. You can read more about this on MDN.
Let's assume you want to load Roboto font. Google gives you the HTML like this:
The CSS is now preloaded. And when it finishes loading, it'll be applied.
The preload technique works well in all modern browsers.
Using media type
Another solution is using media type, which is supported by all browsers. This technique is created by Filament Group. The HTML markup is simple as follows:
What it does is loads the CSS for the print-based media. In other words, the CSS is applied only when the users try to print the page. The loading process is now asynchronous (since we're on browsers). And when it's done, the CSS is applied for all media (which includes browsers).
I've been testing this technique for a while and see a good improvement in font loading. You can test on MetaBox.io and docs.metabox.io websites to see how it works.
Using font-display: swap
To solve the 2nd problem with a blank is when loading fonts, we need to use font-display: swap. Basically, it allows us to display the text first with a fallback font family (usually serif or sans-serif). And when the font is loaded, it swaps the text into the wanted font. This effect is called FOUT (Flash Of Unstyled Text). Unlike FOIT (Flash Of Invisible Text), users still see the text while the font is loaded. So, the user experience is better. And also the FCP (First Contentful Paint) is lower.
The good news is Google Fonts now supports font-display: swap by default. You can see it in the font URL like this:
Notice the display=swap in the URL. The CSS loaded for the font will have font-display: swap.
This technique works in all modern browsers, and it's safe to use.
Just a note that the solution in the 1st part of this series, which uses PerfPerfPerf script, tries to add font-display: swap to the Google Fonts' CSS. It's not needed anymore.
So the final code to load Google fonts now is either of these:
Apply Google Fonts loading techniques in WordPress
The best way to apply the techniques above is adding the code into your theme's header.php file. Or you can create a child theme and modify the header.php file. So your header.php file will look like this:
I find it's harder to do this if you use page builders. You need to disable default Google Fonts and apply the code above. The only plugin I found that disables the Google Fonts is Autoptimize. Unfortunately, it removes our manual link tag, too.
The best solution for page builders is using Autoptimize to preload the Google Fonts. You can turn it on the settings page:
After applying the new techniques to our websites, I'm quite happy with the result. The loading speed is increased and the FOUT effect is minimal. Users probably don't notice the font change (swapping). And of course, the Google PageSpeed Insights score is higher than before (in my test for MetaBox.io's homepage, it has 100 scores for desktops).
I think optimizing the loading speed for Google Fonts is very important for both users and search engines. And you should do it now. Feel free to discuss this with us on the Facebook group, or leave a comment below.