7 Best WordPress CDN Services in 2024 (Compared)

We get thousands of global visitors every day on WPBeginner, so we know how important content delivery networks are for website performance.

A CDN is a service that can significantly speed up your website. It works by caching and serving your website content from the servers nearest to your user’s location, reducing your page load time.

While we use Cloudflare on our own site, we know there are lots of other great options for WordPress users. That’s why we have tested the top options on the market, paying attention to the location and number of data centers, pricing, and user-friendliness.

In this article, we will show you the best WordPress CDN providers to speed up your website.

Best WordPress CDN Services

Expert Tip: Are you looking for more ways to speed up your WordPress website? It might be time to call in the experts.

Our experts will do a full performance audit on your website and then optimize it for lightning-fast loading times. Check out our WPBeginner Site Speed Optimization Service today!

How Does a CDN Help WordPress Sites?

A CDN is a global network of servers that saves your website’s static content, such as HTML, CSS, and JavaScript files, in a cache. When a user visits your site, the CDN will serve the content from the server closest to the user, making it load faster.

With a CDN, your website will be much faster and less likely to crash when the traffic is high. This is because your site will rely on multiple CDN servers (called edge servers) instead of just a single origin server to deliver your content.

Here are some benefits of using a CDN:

  • You get a faster page load speed. CDNs can decrease latency, or the time it takes for a server to deliver content to a browser.
  • Your site will also be more SEO-friendly. This is because Google prioritizes web pages with good user experience, such as how fast your pages load.
  • You get better uptime. CDNs use load balancing, so when one of the edge servers fails, the others can cover for it and keep the site running.
  • You can make your WordPress website more secure against distributed denial of service (DDoS) attacks. The CDN will absorb and route the attack’s traffic to the network of servers to avoid overwhelming the origin server.
  • You can reduce your WordPress hosting’s bandwidth usage, meaning you won’t need to upgrade to a more expensive hosting plan.

For these reasons, many WordPress website owners use CDNs to make their sites faster and more secure. So, let’s take a look at some of the top WordPress CDN services and how they stack up against each other.

Why Trust WPBeginner?

At WPBeginner, we have 16+ years of experience in running WordPress websites, optimizing them for speed, and reaching readers all over the world. We have also thoroughly tested each of the CDN services mentioned in this article.

For more details, just see our editorial process.

1. Bunny.net

Bunny.net CDN service

Out of all the CDN services we have reviewed, Bunny.net is the best WordPress CDN on the market. Their WordPress plugin is easy and fast to set up, so you can start using the CDN right away.

Our team has been using Bunny CDN on OptinMonster because their pricing is very affordable for small businesses. If you are based in North America, then the pricing is just $0.01 per GB.

Not sure how much the total will be? Bunny.net has a handy calculator you can use.

Bunny.net's monthly bill calculator

They also have data centers worldwide, so you can reach users anywhere they are based. Simply select one of its 123 PoP (point of presence) locations across North America, South America, Asia, Africa, the Middle East, and Oceania.

Bunny.net knows that beginner WordPress users may be new to CDN services. That’s why they provide 24/7 customer support through live chat to help their customers, and they typically respond within an average of 5 minutes.

Pros of Bunny.net:

  • User-friendly control panel to manage your CDN features, like activating your free SSL certificate in one click or clearing your cache to keep your content updated.
  • Wide network coverage with its 123 and growing PoP locations.
  • Video CDN to load videos faster.
  • Up to 80% image optimization to reduce the size of your image files.
  • 99.99% global Service Level Agreement, which means if your website is down, you will be eligible for credits to offset any loss caused by the outage.
  • Real-time analytics to help you pinpoint performance issues on your website.

Cons of Bunny.net:

  • There is no free tier, though there is a 14-day free trial.

Why we recommend Bunny.net: This high-performance CDN service is one of the best options for beginner WordPress users. Despite their affordability, Bunny.net has everything you need to make your website faster and offer a better user experience.

2. Cloudflare

Cloudflare CDN's landing page

Cloudflare is known as the best free CDN for small business WordPress websites. With a global network of 310 cities and 120 countries, you can rest assured that your site will always be online.

Setting up Cloudflare CDN in WordPress is easy. All you need to do is sign up for a plan, add your website to Cloudflare, and replace your domain’s nameservers with Cloudflare’s.

Cloudflare’s free plan also includes unmetered DDoS protection. This means Cloudflare will detect and mitigate DDoS attacks without limiting the traffic volume that can be protected.

We actually use Cloudflare for their paid security and CDN services on WPBeginner, and we have been very happy with their fast performance, huge CDN network, and excellent uptime.

For more details, you can see why we switched from Sucuri to Cloudflare.

Pros of Cloudflare:

  • Cloudflare’s global network coverage is vast.
  • The CDN has a built-in web application firewall to protect users against not just DDoS attacks but also other threats, like email spammers.
  • Simple bot mitigation to differentiate legitimate bots, like search engine crawlers, from malicious bots like DDoS attackers or phishing campaigns.
  • Special tools to handle dynamic content caching and delivery to make your site faster.

Cons of Cloudflare:

  • There is no uptime guarantee for Free and Pro plan users.
  • Direct support is only available for paid plan users.

Why we recommend Cloudflare: We use a paid Cloudflare plan on WPBeginner for our security and CDN needs. Overall, we appreciate how fast the Cloudflare CDN is, along with its advanced firewall rules to keep our website safe.

3. Sucuri

Sucuri's CDN landing page

Sucuri is one of the most popular website security companies out there. Besides offering powerful website security features, they provide an easy-to-use CDN that’s optimized for WordPress.

To use Sucuri’s CDN, you need to sign up for one of their website security platform plans, which includes a web application firewall (WAF).

You can then add your site to the WAF, activate the firewall by changing your site’s DNS settings, and choose a CDN caching option. Besides speeding up your site and preventing DDoS attacks, the WAF also blocks spam and malware.

Sucuri’s data centers are vast, with locations in North America, Europe, and Asia. They also have CDN edge servers operating on Amazon Web Services in Australia and Brazil.

Pros of Sucuri:

  • According to Sucuri, they can improve website performance by 60%.
  • Multiple caching options, so you can choose the one that suits your site’s needs best. These include minimal caching, which is great if your site has lots of dynamic content (e.g., personalized text).
  • Automatic SSL certificate installation for your firewall server to protect your data as it is being transmitted.
  • Automatic malware removal, meaning Sucuri will delete any malware that it detects right away.
  • For small business owners, Sucuri offers a basic firewall with CDN plans that start at $9.99 per month.

Cons of Sucuri:

  • You cannot use the CDN alone as you have to purchase it with Sucuri’s main security features.

Why we recommend Sucuri: Sucuri is a great option if you are looking for a combination of WordPress security features and a CDN. It’s also pretty affordable, making it an excellent choice for small businesses.

4. KeyCDN

KeyCDN's homepage

KeyCDN is another good option for a WordPress CDN service. It has a user-friendly CDN Enabler plugin that can automatically rewrite your website URLs to serve them through the CDN.

With the CDN Enabler plugin, you get more control over how your CDN works. For example, you can select what type of files need to be served using the CDN to focus on only the essential elements of your website.

KeyCDN's CDN Enabler plugin

You can also instantly purge your CDN cache right from your admin area. As a result, you can keep your website content up-to-date.

KeyCDN’s network of servers is spread across the Americas, Africa, Europe, Asia Pacific, and Oceanic regions. This way, your site always performs fast no matter where your audience is.

Pros of KeyCDN:

  • High-performance CDN with support for HTTP/2, GZIP compression, IPv6 support, and image processing, all of which are important features that contribute to faster load times.
  • Instant CDN purge right from the CDN Enabler plugin to easily update your website content.
  • Pay-as-you-go pricing with a low minimum charge of $4 per month.
  • Free 14-day trial with no credit card required.

Cons of KeyCDN:

  • Despite the low minimum charge, you must purchase a minimum of $49 worth of credit to use KeyCDN.

Why we recommend KeyCDN: This CDN service’s wide network coverage, easy-to-use plugin, and affordable pricing make it worth recommending for small business owners who are just starting out. Just remember to have at least $49 worth of credit in your account to use it.

5. RocketCDN

Rocket CDN's homepage

RocketCDN is a WordPress CDN service offered by the same team as WP Rocket, one of the most popular WordPress caching plugins. That plugin has powered over 3 million websites, so you know you are in good hands with RocketCDN.

RocketCDN is powered by Bunny.net, which means they also have a global network of over 120 edge locations. However, what makes them different is their respective pricing models.

Instead of a pay-as-you-go scheme, RocketCDN comes in a single plan costing $8.99 per month. This already includes unlimited bandwidth for all regions, so you won’t have to worry about hitting any data caps or slow speeds due to limited resources.

When you activate RocketCDN, they will automatically adjust the settings of your website to ensure that it runs smoothly and quickly. These settings include Gzip compression and serving assets over HTTP/2.

Pros of RocketCDN:

  • Monthly pricing with unlimited bandwidth, which can be a good option if you don’t want the hassle of calculating your own resource usage.
  • Easy WordPress setup, as you only need to install their plugin and activate their API key.
  • Everything is enabled for you once the CDN is active, from Gzip compression, and HTTP/2 support, to serving all images using CDN.
  • Automatic canonical header setup so that search engines know which version of your website to show even though some of your assets are served using a CDN address.

Cons of RocketCDN:

  • Compared to other CDN solutions on the list, RocketCDN’s features may seem too basic.
  • No free trial.

Why we chose RocketCDN: Many WPBeginner users use WP Rocket for their websites, and RocketCDN is one of the best solutions to complement this caching plugin.

6. Imperva

Imperva CDN

Imperva is a cyber security company that offers many website and application protection solutions, including a CDN. They have 62+ data centers with 10 TB per second capacity, which is very high.

If your site receives 1 million visitors per day, and each visitor downloads 1 MB of data, Imperva could handle all that traffic without breaking a sweat.

Additionally, Imperva has self-service customization. This means you can decide how content is cached or traffic is routed based on factors like device type and user location. This feature can help optimize your website’s performance and reduce costs.

Pros of Imperva:

  • Large bandwidth capacity to handle high traffic volume, making it perfect for online businesses.
  • Self-service customization feature to configure how the CDN behaves to optimize performance.
  • 99.999% uptime guarantee with a 3-second mitigation SLA, which means downtime is extremely low, and Imperva promises to fix any issue within 3 seconds.

Cons of Imperva:

  • The self-service customization feature may be too advanced for the average WordPress user.
  • There is no fixed pricing, and you have to contact their team for custom pricing.

Why we chose Imperva: When reviewing Imperva, we were thoroughly impressed by their high-performance CDN and advanced features that not all CDNs provide. We recommend Imperva if you have a growing, multinational business.

7. Amazon CloudFront

Amazon CloudFront's homepage

Last but not least, we have Amazon CloudFront. It’s a powerful WordPress CDN service for people who use Amazon services like Amazon SES and Amazon Web Services (AWS).

That said, despite its name, this WordPress CDN solution works with many other hosting providers, not just AWS.

When you use CloudFront, you will also get the AWS Shield Standard automatically enabled. This technology is like a more comprehensive version of DDoS protection, securing your website against attacks at all network layers.

Amazon CloudFront has 600+ points of presence in 90 cities across 47 countries, so its CDN service has vast coverage. It also offers a free tier that allows you to send 1 TB of data from CloudFront each month at no extra cost.

Pros of Amazon CloudFront:

  • Seamless integration with AWS services, so it’s a great option if you already use them.
  • A global network of servers, with hundreds of points of presence worldwide.
  • Robust security features at the edge servers to protect your content from DDoS attacks, malware, phishing, and other threats at all levels.
  • Generous free tier plan, as 1 TB of data transfer can serve approximately 1 billion web pages.

Cons of Amazon CloudFront:

  • Not the most beginner-friendly setup.

Why we chose Amazon CloudFront: If you run WordPress on AWS, then you already have a great WordPress CDN service at your disposal. The vast network and generous free-tier plan also make CloudFront worth recommending.

Bonus: Use a Hosting Provider With Free CDN

These days, many WordPress hosting providers come with their own custom CDN solutions. This way, you won’t have to pay extra to make your website fast and secure.

Hostinger, for instance, has a built-in CDN available for Business plan users or above. It includes features like WebP image compression, CSS and JavaScript minification, and a handy under-attack mode to fight rapid DDoS attacks.

Hostinger's built-in CDN

SiteGround also has an excellent CDN feature designed specifically for users who receive traffic from multiple countries. The team behind it has reported that loading speeds have increased by 20% on average.

While a free plan is available, they also have a premium plan with unlimited monthly bandwidth.

On the other hand, some hosting providers like Bluehost and WP Engine have integrated third-party CDN services like Cloudflare.

Which Is the Best WordPress CDN Provider for Your Site?

After carefully evaluating all these top WordPress CDN services, we believe that Bunny.net is the best WordPress CDN on the market. It has a wide global network coverage and offers a great set of features at a reasonable price.

For people on a tight budget, Cloudflare’s free CDN plan can do the job. It comes integrated with popular web hosting providers like Bluehost and WP Engine. Plus, you get unmetered DDoS protection.

If you want a CDN focusing on security, then Sucuri is the one for you. Besides multiple caching options, you can get a powerful WAF with automatic malware removal and SSL installation.

WordPress CDN Services: Frequently Asked Questions

Now that we’ve covered the best WordPress CDN services, let’s cover some frequently asked questions about using a CDN.

Which CDN does WordPress use?

The WordPress software does not use any CDN as it is only a content management system that requires a hosting service to run. Instead, the user has the freedom to choose any CDN service they prefer.

How do I choose a CDN for my WordPress website?

To choose a CDN for your WordPress website, you can consider your website needs, your own budget, and the platform’s ease of use.

If you need a beginner-friendly CDN with affordable pricing, then look no further than Bunny.net. On the other hand, if your website handles a lot of sensitive data, then you may want a CDN with a good set of security features, like Sucuri.

Can I use Cloudflare CDN with WordPress, and how does it compare to other CDN services?

Yes, you can use Cloudflare CDN with WordPress. In fact, many hosting providers like Bluehost and WP Engine have Cloudflare integrated into their dashboards, so you can immediately use it.

While Cloudflare CDN is free, it has great unmetered DDoS protection. However, there is no direct support.

Does CDN increase website speed?

Yes, a CDN can increase your website speed and make it faster. It will cache your website content into multiple servers spread worldwide. When users visit your site, the server closest to them will deliver the content.

That said, many factors affect website speed, so we recommend implementing other best speed optimization practices as well. For more information, check out our ultimate guide to boost WordPress speed and performance.

Ultimate Guides to Boost Your WordPress Site Performance

We hope this article helped you find the best WordPress CDN solution for your website. You may also want to see our ultimate WordPress performance guide or our expert pick of the best website speed test tools.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 7 Best WordPress CDN Services in 2024 (Compared) first appeared on WPBeginner.

5 Reasons Why WPBeginner Switched From Sucuri to Cloudflare

At WPBeginner, we used to use Sucuri for a long time as our website firewall, security, and CDN solution. We recently switched to another firewall and CDN service, Cloudflare.

At WPBeginner, we are transparent about the technologies we use behind the scenes. We have consistently shared that expertise and knowledge with our users for the last 14 years.

In that tradition, we’ll share why we switched from Sucuri to Cloudflare and what performance and security gains we achieved.

Note: This article is part of our WPBeginner Insider series, where we introduce you to the products we use at WPBeginner. We publish WPBeginner Insider every other Thursday.

Why we switched from Sucuri to Cloudflare

Background Story

Before we talk about the switch, let’s briefly talk about Sucuri and Cloudflare and what services they provide to website owners.

They are both website security and performance services and offer DNS-level website firewalls and CDN solutions.

What is a website firewall?

A website firewall acts as a security checkpoint between your website and its traffic. It detects and blocks malicious requests like attackers, bots, malware, hackers, and more.

Now, some firewalls work on the server level. However, they are less efficient because the malicious requests may have already reached your server by the time they are blocked.

Sucuri and Cloudflare are both DNS-level firewalls. They re-route your website traffic through their servers and block them before they reach your site.

What is CDN?

A CDN (Content Delivery Network) is a global network of computers spread around the world.

Normally, when a user visits your website, they send their request to your hosting server. It takes more time for users to see your website if they are in a different geographic location.

A CDN service solves this problem by sending static and cached data of your website to the user from a much closer server. This will make your website load faster for all your users.

About Sucuri and Cloudflare

At WPBeginner, we used to use Sucuri for a long time as our website firewall, security, and CDN solution.

It is one of the best WordPress security plugins and has helped us secure WPBeginner against Brute Force attacks.

Cloudflare is the industry leader in CDN and website security industry. Over the years, it has grown incredibly, and so has its technology stack, infrastructure, and expertise.

Recently, we moved from Sucuri to Cloudflare CDN, and here we’ll share the reasoning behind that decision.

Reasons Why We Switched from Sucuri to Cloudflare

At WPBeginner, we always recommend our users choose a solution that fits their needs.

We use the same principle in our business by investing in tools and services that fulfill our needs.

Over the last several years, WPBeginner’s needs outgrew Sucuri. Several reasons made us decide to finally switch over to Cloudflare.

Here, we’ll explain each one of them so that you can get a behind-the-scenes look at how we reached that decision.

1. Faster and Largest CDN Network

Cloudflare is one of the world’s largest CDN networks. With servers in 310 cities across 120+ countries, Cloudflare directly connects to over 13,000 networks, including every major ISP, cloud hosting provider, and enterprise service.

Cloudflare global network

This means Cloudflare is the nearest server to users’ locations and often the fastest with the lowest latency.

In easier words, Cloudflare is like a fast lane to the internet.

At WPBeginner, our users are from all over the world. Switching to Cloudflare meant reduced latency, faster page loads, and great performance no matter where our users come from.

In comparison, Sucuri has a smaller CDN network with servers spread across strategic locations. It did help speed up website performance, but not as much as Cloudflare, which has more servers across the globe.

Being able to deliver our content to more people, faster, made Cloudflare the obvious choice.

2. Better Granular Firewall Rules

A website application firewall like Sucuri and Cloudflare automatically detects and blocks malicious attacks at the DNS level.

Larger websites are more frequently targeted by hackers with malicious intent.

Those attacks are sometimes more sophisticated than common DDoS / brute-force attacks.

Because of that, we needed more control over the firewall and attack-blocking rules to combat this.

We are now on the Cloudflare Enterprise plan and have ‘Layer-3 Network DDoS Protection.’ We have access to many pre-made rulesets like Cloudflare WordPress, CF PHP, and more at this level.

We now have extensive options and granular control over what firewall rules we use, which helps us protect and block even larger and more sophisticated attacks before they can reach our servers.

3. Centralized DNS Management

DNS (Domain Name System) is crucial for translating human-readable domain names into IP addresses that computers understand.

Normally, the web hosting company or domain registrar handles DNS management for websites.

How domain name system works

If a website is hosted in New York, and a user types in the domain from Tokyo, the request will take longer to resolve due to the distance between the DNS servers.

It is a negligible performance sacrifice for smaller websites. However, slow DNS resolution is a noticeable performance issue for larger and more popular websites like WPBeginner.

Previously, we used Sucuri with Constellix to improve performance. Constellix is a DNS server company with servers across the globe to ensure faster resolution of DNS regardless of the user’s geographic location.

Switching to Cloudflare gave us centralized DNS control and the ability to control DNS permissions better.

It also gives us a performance bump due to Cloudflare’s larger DNS server network, routing rules, and short TTLs.

This means when someone types in WPBeginner.com in their browser, the DNS resolution takes place much quicker because the response is closer to their location.

4. Uptime Reliability

This is a pretty major reason that we switched from Sucuri to Cloudflare. We noticed that occasionally, Sucuri would have regional outages, especially in Europe.

This would require our DevOps team to route European traffic away from Sucuri and direct it to our servers, which isn’t ideal from either a security or performance standpoint.

Imagine an outage occurring simultaneously when our website is under a DDoS attack. This could potentially degrade our website performance for users in other regions as well.

Cloudflare is more reliable in this regard.

They have a larger network, more data centers, and regional connectivity, all of which add more redundancy to their infrastructure, ensuring uptime.

This uptime reliability is crucial for performance and a big relief for our DevOps team.

5. Better DNS Analytics

Monitoring our website traffic using Google Analytics helps us make data-driven decisions about our business.

However, this data does not include information about DNS requests and their resolutions because website analytics tracking begins after the DNS resolution.

Access to DNS analytics helps us understand DNS requests and queries to our DNS servers. We can also see which requests were blocked, where they originated, and more.

Sucuri simply didn’t provide much of this information. Cloudflare has a handy DNS Analytics dashboard. They also offer an API to the Enterprise users to fetch data from their DNS logs.

Like the granular control of rules, being able to pull DNS logs and monitor requests and queries helps provide the best service we can to WPBeginner users.

Sucuri vs. Cloudflare – Which Do We Recommend?

Both Sucuri and Cloudflare are great solutions for the security and performance of a WordPress website. We would not have used Sucuri for as long as we did, if it weren’t a solid service.

You can take a look at our detailed comparison of Sucuri vs. Cloudflare for more information.

Which one do we recommend? It depends on your business needs and requirements.

For instance, if you are starting a blog or small business website, Cloudflare free CDN would be a great starting point.

It gives you access to basic website security and CDN network. Even at the free level, this improves your website performance and security.

On the other hand, if you can spend a little or have a limited budget, we will recommend the Sucuri website firewall. They are cheaper than Cloudflare’s more expensive plans and still offer a robust security solution to WordPress users.

Lastly, if your business can support it, we recommend upgrading to a Cloudflare Business or Enterprise plan. It will give your website a significant performance boost with enterprise-grade security and reliability.

We hope this article helped you learn the process behind our decision to switch to Cloudflare. You may also want to see our WPBeginner Insider case study of why we switched from Mailchimp to Drip for email marketing.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 5 Reasons Why WPBeginner Switched From Sucuri to Cloudflare first appeared on WPBeginner.

How a Million-Dollar Niche WordPress Business Uses WPMU DEV Reseller

Did you know our sister company, CampusPress, uses WPMU DEV white label reseller tools? Learn how it leverages our Reseller platform and how you can use the same tools to build your own million-dollar niche WordPress empire.

The possibilities are literally endless in terms of what kind of business you can create with our Reseller platform.

To prove it, we’re giving you an example of a real million-dollar niche WordPress business that uses the same Reseller tools you have at your disposal.

There’s nothing stopping you from creating a similar WordPress niche business, so stick around if you’re interested to see how CampusPress uses Reseller, and how you can start doing the same.

Here’s what we’re covering, feel free to skip ahead if something catches your eye.

About CampusPress

A screen of the CampusPress home page
There’s nothing stopping you from building a WP niche business like CP with Reseller.

For over 18 years, CampusPress has provided enterprise-grade WordPress solutions, support, and training for education.

It is a world-leading niche WordPress business that generates millions in revenue, trusted by over 280 of the largest and most significant educational institutions in the world.

It also leverages the same cutting-edge hosting, site management, client portal, and template tools that WPMU DEV members can easily resell themselves.

On that note, let’s get into how CampusPress uses Reseller to give you an idea of how you might also use it for your own niche WordPress business.

How CampusPress uses WPMU DEV Reseller

Hosting plans and infrastructure

One of CampusPress’s primary services is enterprise-level hosting for education. CP clients will typically use this for anything from university & school websites, to student blogs and portfolio websites.

An image showing CampusPress's pricing plans
CampusPress’s enterprise-grade hosting is built on the same infrastructure as WPMU DEV.

CampusPress’s hosting is also built on the same hosting infrastructure, servers, and cutting-edge technology that WPMU DEV uses.

This includes a number of the features and tools available with our hosting plans, such as our 121-point global CDN, which CP clients can leverage for their sites.

Of course, CampusPress also provides its clients with a range of additional benefits, tools, and support services specific to the education niche on top of this, including fully custom hosting architecture options.

Want a similar setup for your own niche business? Read our reseller hosting blueprint article for a full rundown of how to set up and resell our hosting plans.

Site management and white label client portal

CampusPress uses WPMU DEV’s The Hub site manager and Hub Client plugin to power their white label client portal and site management interface.

This is where clients can conveniently manage their websites, hosting, account, billing & invoices, and more. They get access to handy WPMU DEV features like the WordPress plugin manager, as well as site monitoring & analytics tools.

They can also easily create new education websites in a few clicks and choose from a set of curated education templates (more on these below).

Of course, the interface is branded with CampusPress colors and custom logo. Read our full guide to learn how you can create your own white label client portal for clients.

A view of the CampusPress client portal interface
CampusPress offers fast and convenient site & account management with The Hub.

Custom site templates

When CP clients sign up, they can choose from a range of education site templates to suit their organization. The templates are bundled with hosting, site management, and expert 24/7/365 expert support.

A screen showing where CampusPress clients can choose a site template
CP clients can select from a range of expertly-made site templates to suit their organization.

They’re all meticulously planned and put together by our CampusPress team, drawing on over 18 years of experience working with a diverse range of universities and schools.

This allowed them to come up with the best formula for ready-made templates that new clients could use right away.

Practically, the templates were created with the help of WPMU DEV’s site creation, template, and cloning tools, which allow anyone to create similar custom templates for their chosen niche.

We also have over 100 one-click templates of our own that you can use if you’d prefer not to start from scratch.

Curated WordPress plugins

Every CampusPress client can access a library of expertly curated WordPress plugins they can use for website optimization.

A screen showing CampusPress's plugins landing page
CampusPress clients can use various WordPress plugins to optimize their sites.

This includes both WPMU DEV plugins and education-based plugins which provide specific functionalities for educational websites and installations.

WPMU DEV’s plugin suite also powers various areas of the CP client portal, including the security, performance, and SEO tabs.

Security tools and procedures

Security, privacy, and data protection is especially critical for universities, schools, and other educational institutes.

A screen showing CampusPress's security landing page
Security is crucial for university and school websites, CP’s security tools and protocols gives clients ultimate peace of mind.

Along with education-specific procedures and policies that ensure they’re meeting industry standards, CampusPress uses a number of WPMU DEV tools which play a critical role in the protection of every CampusPress site.

These include: Web Application Firewall (WAF), two-factor authentication, and malware scanning and detection tools.

CP also relies on WPMU DEV’s built-in product security for plugins and hosting services, giving them peace of mind that these products are as safe and secure as possible.

Client onboarding and payments

CampusPress uses WPMU DEV’s billing platform + Reseller to allow their clients to make payments, check out directly from the CP website, and continue to manage their account, sites, and billing ongoing.

A look at the billing interface inside of CampusPress
CampusPress clients can easily manage their accounts and billing in one place.

CampusPress also uses the same automated onboarding flow that WPMU DEV members can set up for their own clients with Reseller.

A screen showing the account registration page on CampusPress
CampusPress clients can easily create a new account when they’re ready to sign up.

New clients can create an account, select their plan, a site template, hosting server location, and then continue to secure card payment.

All without having to leave your website, all completely hosted and branded as your own.

A look at the checkout screen of CampusPress
CampusPress clients can sign up for services and check out directly from the website.

Learn how easy it is to create your own automated client onboarding experience in our complete Reseller setup guide.

Client support and live chat

One of the most important services CampusPress offers is 24/7/365 expert support, with dedicated account managers for each client.

And while you can’t resell and white label WPMU DEV support (yet! Watch this space…).

Like CampusPress does, you can easily add a live chat integration to your client portal where they can reach out to you directly, visit a dedicated contact page, or browse helpful resources.

We’re also in the process of building a fully integrated ticketing system that will streamline the way you communicate with your reseller clients. And as always, our support team is only a live chat away from helping solve any client issues.

A look at the CampuPress support page
CampusPress provides its clients an easy link to support from their portal where they can enquire or get direct help quickly.

Build your own niche WordPress empire with the same Reseller tools CampusPress uses

Whether it’s a localized hosting agency or a WordPress niche services business like CampusPress, we’re excited to see what our members continue to create with Reseller, the possibilities really are endless.

Speaking of Reseller possibilities, full domain automation is just around the corner! Making it even easier to add another profitable service to your overall client package.

If you’re interested in Reseller, it’s available with an Agency membership, which also gives you access to a bunch exclusive tools and features, including $144 free yearly hosting credit and access to VIP 50% off pricing.

A full 30-day money-back guarantee is also included if you’re not fully satisfied during that time.

Plus, want an exclusive walkthrough of Reseller? We are currently offering free demos with our team.

It only takes 30 minutes, and you get a full look at the platform and how it works before committing to anything. Schedule a free demo on our Reseller landing page.

CDNs: Speed Up Performance by Reducing Latency

Welcome back to this series all about file uploads for the web. In the previous posts, we covered things we had to do to upload files on the front end, things we had to do on the back end, and optimizing costs by moving file uploads to object storage.

  1. Upload files with HTML
  2. Upload files with JavaScript
  3. Receive uploads in Node.js (Nuxt.js)
  4. Optimize storage costs with Object Storage
  5. Optimize performance with a CDN
  6. Secure uploads with malware scans

Today, we’ll do more architectural work, but this time it’ll be focused on optimizing performance.

Get Instant Answers About WPMU DEV Products and Services… Meet Our New AI Assistant!

We’ve got some exciting news… now you can ask our new AI-powered support chat bot anything related to WPMU DEV and get answers…fast!

G2.com customer review of WPMU DEV.
Our 24/7 support is now even more stellar with the launch of our newest AI star!

Before you even ask, the answer is “Yes” …

  • Will I still have access to 24/7 expert support from living, breathing, humans?

Yes, you will. We have no intention of replacing our excellent support team with robots. Our AI assistant is designed to enhance and complement our support offering.

  • Will this help me get answers faster so I can get back to my business sooner?

Yes, it will. That’s a great question and thanks for asking! Keep reading to learn how our AI assistant will help to speed up your business.

  • Will the AI assistant automatically grow a successful business for me?

Yes, it will not. Our CEO’s name is James Farmer, not James Cameron (you can check out our James’ Avatar here) and he likes to keep it real. So, don’t hold your breath until your face turns blue waiting for some other-worldly futuristic flight of fancy, cause we’re all about delivering real support with real people (we’re just not opposed to using the latest AI technologies and tools if it helps us serve you better).

In this article, we’ll cover:

Why Introduce an AI Assistant to WPMU DEV?

WPMU DEV Ai Assistant interface.
Hi WPMU DEV bot, pleased to meetcha!

While we are very much a “team human” company (no ifs or bots about it), our membership is growing. We offer 24/7 support to all WPMU DEV members (and your team members too as an add-on).

As we are committed to providing all members (and your clients) with the highest level of quality support, we are always looking for tools and ways to help us better help and support you and your business.

Using an AI-powered chat bot is just another tool that can help us to provide a better service.

So, the aim of introducing the AI assistant is not to replace our human support team, but to help speed up the quality and effectiveness of our support service to you.

We understand that customer support is essential to the success of any product or service. We want to assure you that our goal is to continue delivering on our commitment to deliver the best customer support available in the WordPress universe while enhancing your experience and providing faster and more efficient assistance through the addition of our AI-powered chat bot.

The AI-powered chat bot is designed to work alongside our human support team, not replace them. Our human support team is still available 24/7 to provide a personalized touch to the support experience and handle any complex issues that may arise.

How to Access AI-Powered Support 24/7

WPMU DEV’s assistant is available to WPMU DEV members via The Hub.

You can access it from any screen in The Hub by simply clicking on the Help button…

WPMU DEV AI Assistant - Help button
Access the AI Assistant anywhere on The Hub with just a click of the Help button.

Or select it from the Support tab…

The Hub - Support- Ai Assistant
Access the AI Assistant in The Hub’s Support tab.

Launch the AI Assistant, enter your question, and hit the Submit button. That’s all there is to using it!

WPMU DEV AI Assistant - Chat Bot
Type your question into the chat field and hit Submit …it’s that simple!

You’ll get an answer in seconds…

WPMU DEV AI Assistant response
Get answers in the blink on an AI!

And it even provides the sources of its response, so you can

WPMU DEV AI assistant - sources.
Click on the Source links to view the documentation or tutorials used to generate the reply and get more information.

Now that you know how to use the tool (honestly, it’s that simple!), let’s look at why we think you should use it.

Benefits of Using WPMU DEV’s AI Assistant

With our AI assistant, you can expect immediate access to support 24/7 and a faster resolution to your issues and inquiries.

The addition of an AI-powered chat bot to our support team is aimed at allowing us to provide you with a faster and more comprehensive and efficient support experience for common questions and issues that we already have documented answers for.

This saves you time searching our documentation and frees up our human support resources to handle more complex problems and provide more personalized solutions and expert assistance when required.

WPMU DEV AI Assistant - Example of question and reply.
Using the bot to handle questions that we have documented answers for allows our human support team to handle your more complex issues.

We are confident that this improvement will enhance your experience and enable you to not only get the most out of our products and services but more importantly, help you get back to your own business sooner whenever you need to interact with us.

The benefits of using our AI-powered help bot include:

  • Immediate assistance: Get immediate responses to commonly asked questions 24/7 without the need to wait or be placed in a queue.
  • 24/7 availability: Our AI assistant is always available, as is our human support team for round the clock support any time of day or night.
  • Faster issue resolution: Experience less frustration as our AI assistant can quickly identify and help you resolve common issues.
  • Consistent responses: We are continually improving our bot to provide consistent and accurate responses to inquiries, ensuring that you receive the same high-level of support that we aim to provide to all of ourv members.
  • Increased efficiency: With the AI assistant handling common inquiries and issues, our human support team can focus on providing you with more complex and personalized support when needed, increasing the overall efficiency of our services and providing you with a higher quality level of support.
  • Self-service option: Find the tutorials and help articles you need faster and with greater ease.
  • Multilingual support: Our AI assistant supports multiple languages, providing you with assistance in your preferred language.
WPMU DEV AI Assistant's response in Portuguese.
Need multilingual support? No problema!

What Can WPMU DEV’s AI Assistant Help You With?

We’ve used OpenAI’s GPT technology to train WPMU DEV’s AI assistant on all of our documentation, blogs, and tutorials.

I wanted to know what kind of questions we can ask our friendly AI help bot, so instead of bugging our busy support team for answers, I thought why not put the tool to the test and ask it directly…

WPMU-DEV AI Assistant with prompt.
Hey AI Assistant…I’ll have the bot with the lot and a side order of crisply replies!

Here’s the reply I got…

WPMU DEV AI Assistant's response to topics it can assist users with.
Thanks a lot, AI bot!

I then repeated this a few times and compiled the following list of areas you can expect the bot to provide reasonable answers:

  • WPMU DEV plugins and services
  • WordPress user management
  • WordPress updates and upgrades
  • WordPress troubleshooting
  • WordPress themes and templates
  • WordPress SEO
  • WordPress security
  • WordPress performance optimization
  • WordPress multisite
  • WordPress hosting
  • WordPress eCommerce
  • WordPress development
  • WordPress design and theming
  • WordPress customization
  • WordPress community and events
  • WordPress best practices
  • WordPress backups and restores

That’s quite a list.

Questions You Can Ask WPMU DEV’s AI Assistant

But…what about asking it “real” questions? How does the AI assistant handle these?

Well, fortunately one of our human team members (thanks, Marcel!) carefully analyzed and reviewed over 1,200 questions from real users and compiled a report listing all the correct, almost correct, and even wrong answers given by the AI assistant.

Here is just a sample of some of the actual questions the AI assistant provided quality responses for (as judged by our team of human experts). Feel free to ask the bot the above questions and check out the replies for yourself:

  • Is there a limit to how many images Smush Pro can compress?
  • Does Defender work with the hosted site WAF?
  • Is it possible to move non-hosted domains in and can all domains have unlimited email forwarding?
  • Can I use WooCommerce on a silver/bronze plan?
  • Can Forminator forward the form data that the customer entered to the email notification feature?
  • A new site showed up in My Sites that ends with .local, where did this come from?
  • I’m getting a Error 504 – Gateway timeout on [domain]
  • Can I import Gravity forms into Forminator
  • If I associate a client with a domain, will that client automatically be billed for it?
  • Can I set my own pricing for domains?
  • Where i can find code epp
  • How to change the admin email address?
  • How can I submit a feature request
  • Will I be charged to add a connected domain to Domains
  • I want to do specific changes to my forms I integrated via forminator.
  • Can I schedule cron jobs?
  • If I cancel my subscription, will I still have access to the pro features until the next renewal?
  • Enabling CDN breaks the images when we enable it for the first time. Can I push the images to CDN manually before enabling the CDN on the site to prevent image issues on the live site?
  • How to fix image resize report
  • Can I have a mix of free and paid sites?
  • Can I recover a deleted site?
  • Why is my images blurry with Smush?
  • What does suspend site do?
  • Can I connect a multi-site WordPress site network and install all the plugins on all of the site even If I only have the Basic Plan?
  • Does WPMU hosting have GD PHP Library installed?

Avoid Asking These Questions

You can ask the AI Assistant anything you like, but unless it’s about WPMU DEV products and services or WordPress-related, don’t expect to get a helpful reply.

WPMU DEV AI Assistant's reply to non-related question.
The bot will spit out replies like this if fed questions it’s not trained to answer.

More importantly, the bot does not have access to your personal details or account information, so it can’t answer questions like:

  • “My website is down”
  • “Why is my site not loading XYZ?”
  • “What are the best templates to use for my website?”
  • “Why didn’t I get hero points for commenting on last week’s DOTW?”

For assistance with anything like the above, please contact the support team.

It’s The Best Bot We’ve Got (And We’ll Improve It A Lot!)

WPMU DEV’s AI Assistant still has some ways to go and some challenges to overcome but we believe you will find this tool will become increasingly useful when you need fast answers to many commonly-asked questions.

As the tool is still new and still being trained, it doesn’t always give you the answer you expect, but you can help us train it just by using it, so it will get better at serving you and all of our members.

Simply ask a question, and if you like the answer, click on the “thumbs up” (Helpful) icon below the response.

WPMU DEV AI Assistant - Helpful Response.
Clicking on the thumbs up icon helps us train the assistant to become more helpful.

Our AI assistant is continuously improving through machine learning algorithms. Your feedback will be taken into account in the bot’s learning process to provide more accurate and relevant responses over time and help deliver you a better experience.

If you find that the bot’s reply doesn’t answer your question or help to resolve your issue, don’t fret, don’t sweat, our helpful humans are still the best help you’ll ever get…and they’re only a click away!

If the answer you get from the bot is not helpful, click on the “thumbs down” (Not helpful) icon below the response and then click on the Contact support now link and you will be immediately put through to our support channel.

WPMU DEV AI Assistant - Not Helpful Response.
If the answer is not helpful, click the thumbs down button and the link to go straight through to our support team.

In some cases, the assistant will even recommend that you contact the support team for help.

An example of a reply from WPMU DEV's AI Assistant.
Our thoughtful bot even encourages you to contact our support team when it thinks you may need additional help or assistance.

And of course, you can always just click right through to our support team directly…it’s always your choice!

Get Faster Answers With WPMU Dev’s 24/7 AI Bot and Live Team Support

G2.com customer review of WPMU DEV.
We aim to make our support even more outstanding with our new AI assistant.

We know from hundreds of genuine user reviews and user-driven awards that our expert and dedicated support is essential to the success of our members and we assure you that our goal is to continue delivering the best customer support in the WordPress universe while providing faster and more efficient assistance.

As mentioned earlier, the aim of bringing you WPMU DEV’s AI-powered assistant is not to replace our human support team, but to help speed up the quality and effectiveness of our support services. Our team is always available 24/7 to provide personal support and handle any questions or issues you experience in your WordPress business.

WPMU DEV’s AI assistant and access to our 24/7 expert support team is available to all WPMU DEV members. If you’re not a member yet, we invite you to try us today for free.

Thanks a bot!

File Uploads for the Web (2): Upload Files With JavaScript

Welcome back to this series about uploading files to the web. If you missed the first post, I recommend you check it out because it’s all about uploading files via HTML. The full series will look like this:

  1. Upload files With HTML
  2. Upload files With JavaScript
  3. Receiving File Uploads With Node.js (Nuxt.js)
  4. Optimizing Storage Costs With Object Storage
  5. Optimizing Delivery With a CDN
  6. Securing File Uploads With Malware Scans

In this article, we’ll do the same thing using JavaScript.

How to Create a Truly Anonymous Website (Step by Step)

Do you want to create an anonymous website?

Some users may need to create a website anonymously to protect their privacy and additional security.

In this step-by-step guide, we’ll show you how to easily create a truly anonymous website. We’ll also talk about protecting your identity online.

Creating an anonymous website

Why Create an Anonymous Website?

An anonymous website conceals the identity of who runs or owns a particular website.

Some users may want to remain anonymous for a number of reasons.

  • Whistleblowers trying to expose corruption.
  • Journalists under authoritarian regimes
  • Citizen watchdog groups
  • Or users who just want to remain anonymous for privacy reasons

Creating an anonymous website makes it difficult to find out who created and runs the website.

Important: Please keep in mind that there is no guaranteed way to remain completely anonymous. While you can make it difficult to trace, there is still a chance that it can be tracked.

What Do You Need to Create an Anonymous Website?

You’ll need the following items to create a basic anonymous website.

  • Anonymously purchased domain name and hosting
  • A separate encrypted email account
  • A secure and reliable VPN service

Now, let us explain why you’ll need those things.

First, you will need to create a new separate email account. You’ll be using that account to manage your website.

To remain anonymous we recommend creating an email account using privacy-focused email services like Proton Mail.

Next, you will need to hide is your IP address. The easiest way to do that is by using a VPN service. We recommend using IPVanish.

IPVanish

Once you have created an email account and turned on the VPN on your computer, you can go ahead and buy a hosting plan.

Normally, you can just go to any of the top hosting companies and start a website in a few minutes.

However, many of these companies require credit card information. This means your personal information will be stored and can be traced back to you.

That’s why we recommend using Hostinger.

Currently, they are giving WPBeginner users a generous discount and a FREE domain name. Basically, you can get started for $2.78 per month.

→ Click Here to Claim This Exclusive Hostinger Deal ←

Hostinger is one of the best WordPress hosting companies on the market and allows you to pay using Bitcoin and other cryptocurrencies to keep your purchase as anonymous as possible.

Buying Hosting and Domain Name Anonymously

First, you need to make sure you have VPN turned on whenever you are working on your anonymous website.

After that, you need to visit the Hostinger website and click on the ‘Start Now’ button.

Hostinger start now

This will bring you to the pricing and plans selection page.

We recommend choosing a 48-month plan which gives you the best discount. Plus, you wouldn’t need to worry about future payments for a long time.

Choose your hosting plan

Click to select the plan you want to buy, and then go to the payment section.

From here, first, you need to provide the anonymous email account you created earlier.

After that, you need to select ‘Coingate’ as the payment method and then click on the ‘Submit Secure Payment’ button.

Choose payment method

This will take you to the payment wizard.

First, you need to select a cryptocurrency that you want to pay with and click Continue.

Choose cryptocurrency

Next, you need to enter your anonymous email address and click on the ‘Continue’ button.

Note that you don’t need to create a Coingate account to pay using this method.

Provide email address

On the next screen, you’ll see the QR code to make the payment through your Bitcoin wallet app.

You can also pay manually, by sending the amount to the Bitcoin wallet address mentioned on the screen.

Pay with BitCoin

Upon completion of the transaction, you will be redirected back to the Hostinger website.

You will receive an email from Hostinger with a link to log in to the hosting control panel.

Once you log in to your hosting account control panel, you’ll see a notification to claim your free domain name.

Claim free domain

During domain registration, ICANN requires website owners to provide their personal information such as name, address, email, and phone number.

You need to provide at least the email address you created earlier so that you can be reached for verification.

During the registration, you may also see an option to turn on Domain Privacy.

This feature hides any information you provide during domain registration from WHOIS searches. Anyone who checks will see Hostinger’s proxy info.

After domain registration, you may receive an email to verify your registration.

Installing WordPress to Make Your Anonymous Website

Now that you have completed the domain name and hosting setup, it is time to install WordPress.

Hostinger allows you to easily create a WordPress website. Click on the ‘Manage’ button next to your URL under the hosting panel.

Manage hosting

This will bring you to your back-end dashboard.

From here, you need to visit the Website » Auto Installer page and then click on the ‘Select’ button under WordPress.

Hostinger auto installer

This will launch the auto-installer wizard.

Simply follow the on-screen instructions to finish the setup.

After that, you will see your new website options under the Hostinger control panel.

From here, first, you need to click on the ‘Install’ button next to the ‘SSL Certificate’ option.

Turn on SSL

After that, you need to click on the toggle next to ‘Force HTTPs’ option.

SSL (Secure Sockets Layer) allows your website to use secure HTTPs. Using it improves your WordPress security by encrypting all traffic to and from your website.

Having an SSL certificate is also a factor in ranking well in search engines and a part of a solid website SEO plan.

Finally, click on the ‘Edit Website’ button to launch and start editing your new WordPress website.

Edit website

Working on Your WordPress Website Anonymously

By design, WordPress is privacy-conscious software to the extent that you can choose what information you want to share on your website.

First, you may want to visit the Users » Profile page and choose a pseudonym for the default admin or author of your website.

Change name

Don’t forget to click on the ‘Update Profile’ button to save your changes.

Next, you need to decide whether you want to allow users to comment on posts and pages across your website.

Simply go to Settings » Discussion page to configure comments. Uncheck all options under the ‘Default Post Settings’ section to disable comments, trackbacks, and pingbacks.

Disable comments

Don’t forget to click on the ‘Save Changes’ button to store your settings.

Adding Content to Your WordPress Site

WordPress comes with two default content types called posts and pages. Posts are part of a blog and are displayed in reverse chronological order, meaning that newer posts appear first.

Pages are standalone pages that are not part of a blog. They are used to create a website structure and layout. See our list of must-have WordPress pages for all types of websites.

To add a page, simply visit the Pages » Add New to create one.

WordPress block editor

WordPress comes with a powerful editor called the Block Editor. See our complete WordPress block editor tutorial to familiarize yourself with the interface.

Similarly, to create a post you will need to visit Posts » Add New page.

Choosing a Theme (Template) For Your Website

WordPress comes with a powerful templating engine that allows you to change the appearance of your website by installing themes.

There are thousands of free and paid WordPress themes available. You can choose one that looks closer to what you have in mind for your website.

WordPress Theme Stats

You can look for themes under the Appearance » Themes page. It will show you a bunch of default themes that come with your WordPress install.

For more themes, click on the ‘Add New’ button at the top to find more free themes.

Add new theme

For premium or paid WordPress themes, you can try trusted WordPress theme shops like SeedProd, Thrive Themes, Astra, Elegant Themes, and more.

However, there is such an abundance of WordPress themes that it may become difficult for beginners to decide which theme they want to use.

We recommend choosing a minimalist design with plenty of white space. This provides you plenty of room to customize the theme and make it your own.

For more details, see our guide on how to choose the perfect theme for your website.

Install Privacy Friendly WordPress Plugins

Plugins are like apps for your WordPress website. They allow you to add new features and extend the functionality of WordPress.

There are more than 60,000 free plugins available in the WordPress.org plugin directory alone. Plus, there are premium WordPress plugins sold by third-party developers with priority support and guaranteed updates.

WordPress plugins

However, you also need to consider which plugins you need to use to keep your WordPress website secure, private, and anonymous.

Following are our top picks for the best WordPress plugins to install on your anonymous website.

  • WPForms – It is the best WordPress contact form plugin and allows you to easily create forms for your website.
  • All in One SEO for WordPress – It is the best WordPress SEO plugin on the market and helps your anonymous website get more traffic from search engines.
  • SeedProd – It is a powerful WordPress page builder that allows you to use a drag-and-drop interface to create any type of page for your website.
  • OptinMonster – It is a conversion optimization software, which helps you convert website visitors into email subscribers and customers.
  • MonsterInsights – The best WordPress Google Analytics plugin which helps you see where your visitors and coming from and what they see on your website.

For more plugin recommendations, see our full list of essential WordPress plugins for any kind of website.

FAQs About Running an Anonymous Website

Following are some of the most commonly asked questions about creating an anonymous website.

1. Is it possible to create a fully anonymous website?

Yes, it is possible to create a fully anonymous website. However, you’ll need to be very vigilant about it. Each internet activity creates an information trail leading back to the person who initiated the activity. This trail can be traced by hackers, government agencies, and ISPs. As an anonymous website owner, it will be your job to anonymize all activities.

You can do this by minimizing the activities around your website and using a VPN to hide your IP address. Be careful about any social interactions as they may reveal personally identifiable information.

2. What is anonymous offshore hosting?

Anonymous offshore hosting is a website hosting service that allows users to purchase hosting and domain name without providing real name or credit card information.

Some of these lesser-known companies host their servers in countries with stricter privacy laws. These companies also promise to not store user logs or share them with third-country agencies.

However, these anonymous offshore hosting companies often have very bad customer service and outdated technology.

3. Can a website owner be traced?

Yes, a website owner can be traced even if they are trying to remain anonymous. However, an anonymous website owner can use privacy tools to make it harder to be traced.

Even then if someone is determined to figure out and has the technology, tools, and resources, then they may be able to find out who is running an anonymous website.

4. Can I buy a domain name anonymously?

Yes, you can buy a domain name anonymously from a domain name registrar that accepts cryptocurrencies as a payment method.

Hostinger, also allows you to register additional domain names using cryptocurrencies. During the registration, you can use a separate anonymous email account as the contact address for your domain name.

We hope this article helped you learn how to create a truly anonymous website. You may also want to see our guide on how to create a private blog or take a look at our complete WordPress security guide to keep your anonymous website secure.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a Truly Anonymous Website (Step by Step) first appeared on WPBeginner.

How Much Traffic Can WordPress Handle? (+ Expert Scaling Tips)

Are you wondering how much traffic WordPress can handle?

When equipped with the right set of tools, WordPress can handle virtually unlimited traffic. We have seen it handle billions of impressions every month.

In this article, we’ll talk about how much traffic can a WordPress website handle, and how to prepare for heavy traffic on your WordPress site.

Analyzing the amount of traffic WordPress can handle

Here is a quick list of topics we’ll cover in this article.

How WordPress Manages Website Traffic?

A WordPress website stores content in a database. When a user visits a page on your site, WordPress fetches that content and generates the page which then appears on the user’s screen.

As you get more traffic, WordPress has to repeat this process for every user.

As software, WordPress is just code, and it needs some hardware to run on. This hardware is provided by your WordPress hosting company.

It includes a type of computer called a server with software to handle website traffic (Apache and Nginx tend to be the most popular server software). This machine is connected to the internet 24/7 to make sure that your website is always online.

A faster web hosting server allows WordPress to process more requests faster.

A slower web hosting server limits WordPress’ ability to generate those pages quickly.

For more information, take a look at our tutorial on how WordPress really works (behind-the-scenes infographic).

How Much Actual Traffic Can WordPress Handle?

WordPress can handle virtually unlimited website traffic, depending on your hosting platform and caching setup.

The only limit on how much traffic your WordPress website can handle is your hosting platform.

And that’s not just WordPress. All websites, regardless of what website builder they are using, need to rely on the hosting provider to handle more traffic.

Depending on how much traffic you are getting, you can then add more resources to your hosting plan to manage more traffic.

That being said, let’s take a look at some real numbers.

We’ll break it down into different types of hosting plans and how much traffic your WordPress website can manage on those platforms.

How Much Traffic Can WordPress Manage on Shared Hosting?

Shared hosting is the most common type of hosting plan used by the majority of WordPress websites.

It is suitable for small business websites, new blogs, and low-traffic websites.

Shared hosting plans are budget-friendly because they split sever resources among several customers.

To make sure that all customers get good service, shared hosting companies place different limits on how much traffic a customer can get on their websites.

These limits vary from one hosting provider to another, and they are not made public to prevent abuse.

Some shared hosting providers have incredibly fast servers, and access to larger data centers with high bandwidth. This allows them to provide generous resources to their shared hosting customers.

Other providers may cut costs by choosing low-cost data centers with restrictive bandwidth caps. They may not be able to offer much flexibility and will start blocking requests more frequently during peak hours.

Our top pick for shared hosting providers include Bluehost, SiteGround, and Hostinger.

All three of these companies provide generous resources for small businesses, and they each have hosting plans to grow with you as your business grows while keeping the costs affordable.

They have ultra-fast servers operated by state-of-the-art data centers, higher bandwidth, and superior technical expertise to provide a much better user experience to their customers.

They deploy in-house solutions to handle traffic, with built-in caching and behind the scene server tweaks.

We ran our own tests on Bluehost servers to see how much peak traffic they can handle. Here are the results:

Bluehost stress test

We gradually increased traffic to 100 users at a time within a 5-minute period. As you can see that it didn’t crash and remained quite stable throughout the test.

The folks at Bluehost are offering WPBeginner users a generous discount on hosting with a free domain name. You can start with just $2.75 / month.

How Much Traffic Can Shared WordPress Hosting Handle?

A good shared hosting company can comfortably handle traffic between 10,000 pageviews to 100,000 pageviews per month.

However, you’ll need to optimize WordPress performance to get better results. Some hosts automatically add WordPress acceleration and optimization to help you handle more traffic.

For example, Hostinger on their shared Pro plan can handle up to 200,000 visitors monthly.

Whereas, SiteGround on their GoGeek plan can handle upwards of 400,000 visitors monthly.

Your experience may still differ from the estimates above based on how complex your website is and what resources it requires, but the above estimates are true for vast majority of small business websites.

Don’t worry, we’ll talk later about saving those server resources to efficiently use your hosting plan.

How Much Traffic Can Managed WordPress Hosting Handle?

Once you have utilized your shared hosting plan to the maximum, you will need to upgrade your hosting plan.

Managed WordPress hosting is like the concierge service for WordPress websites. Your hosting provider will take care of updates, security, backups, and more.

Since they are focused on WordPress websites, they deploy additional tweaks to their server technologies to make WordPress run faster and perform reliably under stress.

On top of that, managed WordPress hosting plans make it super easy to scale up your server resources when you get sudden huge traffic spikes.

WP Engine is our top recommendation for a managed WordPress hosting platform.

They are pioneers in the managed WordPress hosting industry and leading the way with state-of-the-art infrastructure and top-notch customer support.

We ran our own tests on WP Engine by sending up to 100 virtual visitors within a short period of time. Here are the results:

WP Engine stress test

As you can see, our test site remained stable throughout the period with a very low response time.

If you want to look for an alternative, then we recommend SiteGround. They are also a WordPress-recommended hosting provider.

How Much Actual Traffic Can a Managed WordPress Hosting Plan Handle?

A managed WordPress hosting plan can easily handle traffic of 400,000 visitors into millions of page views per month.

For example, SiteGround on their GoGeek plan can handle upwards of 400,000 visitors monthly.

WP Engine on their Managed Scale plan can also handle upwards of 400,000 visitors monthly.

And both of them offer custom plans for sites that are larger than this.

For example, our WPBeginner website along with other sites are hosted on SiteGround’s custom managed platform, and we receive hundreds of millions of requests each month.

We also know several super large websites that receive tens of millions of visitors that use WP Engine.

When you’re on a managed WordPress hosting platform, they can handle any amount of traffic needed. You just have to pay the additional hardware costs.

How Much Traffic Can WordPress Handle on Cloud Hosting?

For shared and managed WordPress hosting, you share server resources with other customers.

On a cloud hosting platform, you get guaranteed resources on a cloud platform made up of several servers. If one server fails, your website will remain available on other servers.

Due to this redundancy, guaranteed resources, and enterprise-grade availability, cloud hosting is suitable for large businesses, busier eCommerce stores, and other enterprise clients.

We recommend using SiteGround Cloud Hosting. They use the Google Cloud Platform and offer free CDN, unique IP address, enhanced security, and priority support 24/7.

WP Engine, Kinsta, Rocket.net, and others can also create custom cloud platforms based on your hosting needs.

How Much Actual Traffic Can WordPress Handle on Cloud Hosting?

A proper cloud hosting platform can allow WordPress to handle millions of pageviews per month without any hiccups.

For example, Rocket.net public pricing shows that they can handle upwards of 5,000,000 visitors on their Enterprise plan because they use 20+ server locations along with a smart Cloudflare cache.

You can see our performance test results in our detailed Rocket.net hosting review.

Handling Billions of Monthly Requests in WordPress

Now when most people think about WordPress, they think of it as a blogging platform, but the reality is that WordPress is the most popular website building platform on the planet with over 43% market share.

There are even full-blown SaaS apps that are built using WordPress.

For example, we built a popular conversion optimization software OptinMonster which underneath is powered by WordPress.

We process billions of requests each month, and that’s all WordPress.

So when someone says WordPress doesn’t scale, they are clearly misinformed, or simply lack the expertise themselves to do it.

You should challenge their perspective and find another WordPress consultant that has the expertise to scale WordPress.

What do you need to handle really large traffic in WordPress?

This is where you need Enterprise Custom Cloud Hosting on platforms like Amazon Web Services or Google Cloud.

These companies provide cloud servers that you can sign up for and create your own custom hosting environment.

You can add as many CPU resources, memory, storage, or geographical locations as you need.

You will be billed on a pay-as-you-go basis for the resources you have utilized. That’s why you’ll need your own team of server admins to efficiently use these resources.

Luckily, you don’t have to become a DevOps team either. Companies like WP Engine, SiteGround, and others can build and manage these custom clouds for you.

How Much Traffic Can Enterprise Cloud Hosting on AWS or Google Cloud Handle?

Enterprise custom-built cloud hosting on AWS or Google Cloud can handle extremely large volumes of traffic.

They can be configured to handle millions of hits per day or even billions of pageviews per month.

Our app OptinMonster runs on AWS and powers billions of requests without any hiccups.

You can combine it with a CDN and web-application firewall like Cloudflare for further scalability.

For example, our WPForms website is hosted on Google Cloud managed by SiteGround. We use Easy Digital Downloads to handle our eCommerce and software licensing which means for a plugin with over 5 million active installs, we’re receiving billions of requests each month across our portfolio.

Aside from Google Cloud, we’re using Cloudflare to efficiently scale our WordPress eCommerce site.

Tips on Managing Heavy Traffic on a WordPress Website

WordPress does a very good job of reducing the server load and processing requests so your users can get to your website as quickly as possible.

However, there are so many things that you can do to further optimize that performance. Below, we outline some of the most important practices that you can implement on your website for the best performance.

1. Always Get The Best WordPress Hosting for Your Budget

The web hosting industry is highly competitive, and there are tons of companies offering unlimited bandwidth, unlimited this, and unlimited that.

Don’t fall for false advertisements. Do your own research and sign up for the most trusted hosting providers in the industry. Unlimited rarely actually means unlimited.

For instance, if you were looking for a shared hosting provider, you can compare these top WordPress hosting companies as a starting point.

Choosing an unreliable WordPress hosting company will make your website slower, and it will not be able to handle much traffic.

2. Turn on a Caching Plugin

What if instead of generating pages repeatedly, you save them temporarily on your WordPress server and reuse them?

How caching works

This technique is called caching. When you update something on your website, the cached version is deleted, and the newly updated content is served to your users.

Most WordPress hosting companies like Bluehost, Hostinger, and SiteGround come with their own built-in caching solutions that are turned on by default. However, if you are unsure, just ask their support staff to turn it on for your website.

Alternatively, you can use WP Rocket, which is the best WordPress caching plugin on the market.

WP Rocket dashboard

It is beginner friendly, and once you turn it on, you don’t need to worry about the technical stuff as it automatically configures the best settings for most websites.

3. Use CDN for Static Content in WordPress

Using a CDN or content delivery network allows you to serve static files like images, javascript, and CSS, using separate servers.

This reduces the load on your WordPress server and frees up resources to process more traffic requests at faster speeds.

We recommend using Bunny.net they are one of the best CDN services on the market. Adding it to your WordPress website is super-easy even for absolute beginners.

Bunny.net

Alternatively, you can use the Cloudflare Free CDN, which some hosting providers such as SiteGround include as a base option within their platform.

4. Filter Bad Traffic with Firewall

Bad traffic is the traffic generated by malicious spam bots, hackers, and DDoS attacks. These are not genuine website visitors, and they could waste a lot of your server resources and make WordPress slower.

A DNS-based website firewall service blocks such traffic even before it reaches your website. This saves you a ton of server resources and your WordPress website can cater to your genuine visitors.

We use Sucuri on the WPBeginner websites and Cloudflare on others. See our list of the best WordPress firewall services on the market.

We hope this article helped you learn how much traffic WordPress can handle. You may also want to follow our WordPress performance optimization handbook or take a look at these tips on making high converting sales funnel.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How Much Traffic Can WordPress Handle? (+ Expert Scaling Tips) first appeared on WPBeginner.

Adding CDN Caching to a Vite Build

Content delivery networks, or CDNs, allow you to improve the delivery of your website’s static resources, most notably, with CDN caching. They do this by serving your content from edge locations, which are located all over the world. When a user browses to your site, and your site requests resources from the CDN, the CDN will route that request to the nearest edge location. If that location has the requested resources, either from that user’s prior visit, or from another person, then the content will be served from cache. If not, the CDN will request the content from your underlying domain, cache it, and serve it.

There are countless CDNs out there, but for this post we’ll be using AWS CloudFront. We’ll look at setting up a CloudFront distribution to serve all our site’s assets: JavaScript files, CSS files, font files, etc. Then we’ll see about integrating it into a Vite build. If you’d like to learn more about Vite, I have an introduction here.

Setting up a CloudFront CDN distribution

Let’s jump right in and set up our CloudFront CDN distribution.

For any serious project, you should be setting up your serverless infrastructure with code, using something like the Serverless Framework, or AWS’s CDK. But to keep things simple, here, we’ll set up our CDN using the AWS console.

Head on over to the CloudFront homepage. At the top right, you should see an orange button to create a new distribution.

CloudFront CDN Distributions screen.

The creation screen has a ton of options, but for the most part the default selections will be fine. First and foremost, add the domain where your resources are located.

CloudFront CDN distribution creation screen.

Next, scroll down and find the Response headers policy dropdown, and choose “CORS-With-Preflight.”

CloudFront response headers settings.

Lastly, click the Create Distribution button at the bottom, and hopefully you’ll see your new distribution.

CloudFront CDN distribution overview screen.

Integrating the CDN with Vite

It’s one thing for our CDN to be set up and ready to serve our files. But it’s another for our site to actually know how to request them from our CDN. I’ll walk through integrating with Vite, but other build systems, like webpack or Rollup, will be similar.

When Vite builds our site, it maintains a “graph” of all the JavaScript and CSS files that various parts of our site import, and it injects the appropriate <script> tags, <link> tags, or import() statements to load what’s needed. What we need to do is tell Vite to request these assets from our CDN when in production. Let’s see how.

Open up your vite.config.ts file. First, we’ll need to know if we’re on the live site (production) or in development (dev).

const isProduction = process.env.NODE_ENV === "production"; 

This works since Vite sets this environment variable when we run vite build, which is what we do for production, as opposed to dev mode with hot module reloading.

Next we tell Vite to draw our assets from our CDN like so, setting the base property of our config object:

export default defineConfig({
  base: isProduction ? process.env.REACT_CDN : "",

Be sure to set your REACT_CDN environment variable to your CDN’s location, which in this case, will be our CloudFront distribution’s location. Mine looks something (but not exactly) like this:

https://distributiondomainname.cloudfront.net

Watch your VitePWA settings!

As one final piece of cleanup, if you happen to be using the VitePWA plugin, be sure to reset your base property like this:

VitePWA({
  base: "/",

Otherwise, your web.manifest file will have invalid settings and cause errors.

Let’s see the CDN work

Once you’re all set up, browse to your site, and inspect any of the network requests for your script or CSS files. For starters, the protocol should be h2.

Showing the assets served via CDN caching in DevTools. Each file name includes a unique random string of letters and numbers.

From there, you can peek into the response headers of any one of those files, and you should see some CloudFront data in there:

Screenshot of a response header.

Cache busting

It’s hard to talk about CDNs without mentioning cache busting. CDNs like CloudFront have functionality to manually “eject” items from cache. But for Vite-built assets, we get this “for free” since Vite adds fingerprinting, or hash codes, to the filenames of the assets it produces.

So Vite might turn a home.js file into home-abc123.js during a build, but then if you change that file and rebuild, it might become home-xyz987.js. That’s good, as it will “break the cache,” and the newly built file will not be cached, so the CDN will have to turn to our host domain for the actual content.

CDN caching for other static assets

JavaScript, CSS, and font files aren’t the only kinds of assets that can benefit from CDN caching. If you have an S3 bucket you’re serving images out of, consider setting up a CloudFront distribution for it as well. There are options specifically for S3 which makes it a snap to create. Not only will you get the same edge caching, but HTTP/2 responses, which S3 does not provide.

Advanced CDN practices

Integrating a CDN here was reasonably straightforward, but we’re only enjoying a fraction of the potential benefits. Right now, users will browse to our app, our server will serve our root HTML file, and then the user’s browser will connect to our CDN to start pulling down all our static assets.

Going further, we would want to serve our entire site from a CDN. That way, it can communicate with our web server as needed for non-static and non-cached assets.

Conclusion

CDNs are a great way to improve the performance of your site. They provide edge caching and HTTP/2 out of the box. Not only that, but they’re reasonably easy to set up. Now you have a new tool in your belt to both set up a CDN and integrate it with Vite.


Adding CDN Caching to a Vite Build originally published on CSS-Tricks. You should get the newsletter.

How to Install and Setup W3 Total Cache for Beginners

Do you want to install and set up W3 Total Cache on your WordPress website?

W3 Total Cache is a popular WordPress caching plugin that helps you to improve your website speed and performance.

In this beginner’s guide, we’ll show you how to easily install and set up W3 Total Cache on your WordPress website.

W3 Total Cache installation and setup guide for WordPress beginners

Editor’s Note: We don’t use W3 Total Cache on our website anymore and have switched to WP Rocket which is a premium caching plugin. W3 Total Cache is still a fine solution that works well.

What is W3 Total Cache?

W3 Total Cache is one of the best WordPress caching plugins that allows you to easily improve WordPress performance and speed.

By default, WordPress uses PHP to dynamically generate each page on your website when it is requested by a user.

PHP is a server-side programming language. This means each user request increases the load on your server. This affects your website’s performance, user experience, and SEO.

WordPress caching plugins help you reduce this by skipping PHP and serving a cached copy of your webpage.

How caching works

It also allows you to easily connect your website to a CDN (content delivery network) to further improve your website performance.

Installing W3 Total Cache in WordPress

Before you install the W3 Total Cache plugin in WordPress, you’ll need to make sure that you deactivate any other caching plugin on your website. This would help you save server resources and prevent any plugin conflicts.

After that, you can go ahead and install and activate the W3 Total Cache plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, W3 Total Cache will add a new menu item labeled ‘Performance’ to your WordPress admin sidebar. Clicking on it will launch the plugin’s setup wizard.

W3 Total Cache set up

Simply click on the Next button to continue.

First, you will be asked to turn on Page Cache. Click on the Test Page Cache button to continue.

Configure page cache

W3 Total Cache will show you different storage engine options. You need to choose one that saves you the most time. Usually, it will be the ‘Disk: Enhanced’ option for most shared hosting platforms.

Click on the Next button to continue.

Now, you will be given the option to Test Database Cache. We recommend choosing None. For most small to medium sized websites your MySQL server will be able to fetch data more quickly than the Database cache.

Database cache

Click on the Next button to move on to the next step.

This will bring you to the Object Cache section. Object Caching allows W3 Total Cache to store database queries for dynamic pages and reuse them to improve performance.

Object cache in W3 Total Cache

If the test result shows barely a few milliseconds difference then you can choose None.

Click on the next button to continue.

After that, click on the Test Browser Cache button and then select the ‘Enabled’ option under the test results.

Browser cache

This option requests user’s browsers to store a copy of the web page for a limited time. Loading a page from browser cache is much faster than loading it from your web server’s cache.

Click on the next button to move on to the next step.

Lastly, the setup wizard will ask you to enable lazy loading for images.

Now, WordPress comes with built-in lazy loading for images. However, some older browsers may not have support for that feature.

W3 Total Cache uses JavaScript to add lazy loading for images, which can be even faster and more efficient.

Enable Lazy Loading

After that, click on the Next button to finish the setup wizard and view W3 Total Cache dashboard.

Advanced Caching Options in W3 Total Cache

The basic settings would work for most websites. However, there are many advanced options that you can configure to further improve performance.

Let’s take a look at the most important ones.

Minifying JavaScript and CSS in W3 Total Cache

The term ‘minify’ is used to describe a method that makes your website file sizes smaller. It does this by removing white spaces, lines, and unnecessary characters from the source code.

Note: Minifiying JS and CSS files can potentially break your website. If you turn it on and your website doesn’t look right, then simply disable these options.

W3 Total Cache allows you to easily minify JavaScript, CSS, and HTML source code as well. However, we recommend only minifying JavaScript and CSS files.

Simply head over to Performance » Minify page and scroll down to the JS section.

Enable JS minify in W3 Total Cache

Check the box next to ‘JS minify settings’ to enable it.

Now, scroll down to the CSS section and enable CSS minify settings the same way.

Enable CSS minify

Don’t forget to click on the Save All Settings button to store your settings.

For alternate methods, see our guide on how to minify JavaScript and CSS files in WordPress.

Enable CDN Support in W3 Total Cache

CDNs or content delivery networks help you further improve your website performance by serving static files like images, CSS, JavaScript from a global network of servers.

This reduces the load on your WordPress hosting server and improves page load speed.

W3 Total Cache comes with built-in support for various CDN platforms.

We recommend using Bunny.net which is the best CDN solution on the market. This is what we use for our OptinMonster website.

First, you need to signup for a Bunny.net account. After signup, you need to create a Pull Zone for your website.

Bunny CDN dashboard

A pull zone adds a hostname to Bunny.net CDN. This hostname is then used to serve static files for your website.

Add a name for your pull zone and then provide your website’s domain name.

Create pullzone

After adding the pullzone, you need to visit the Performance » General Settings page and scroll down to the CDN section.

Enable CDN

Check the Enable box next to the CDN option and choose Generic Mirror next to the CDN Type option.

Don’t forget to click on the Save All Changes button to store your settings.

Next, you need to visit the Performance » CDN page and scroll down to the Configuration: Objects section.

Add CDN hostname

From here, you need to add the hostname you created earlier for your pullzone and click on the test mirror button.

W3 Total Cache will check the availability of your hostname, and will show the Test Passed message when it’s successful.

You can now click on the Save All Changes button to store your settings.

W3 Total Cache will now start serving your static resources from CDN server.

W3 Total Cache also works well with Cloudflare free CDN. Alternately, you can also use it with Sucuri which is the best website firewall service with built-in CDN service.

Troubleshooting W3 Total Cache Issues

Once you have configured W3 Total Cache properly, it should work seamlessly in the background to improve WordPress speed and boost performance.

Occasionally, you may come across issues where you don’t see changes you made to your website right away, or a plugin may not be working properly.

Most common reason for those issues is that you are probably seeing an old cached version of your website.

This can be easily fixed by clearing cache in WordPress.

Simply click on the Performance menu at the top and then select Purge All Caches option. W3 Total Cache will clear all cached content on your website.

Clear all cache in W3 Total Cache

If you are still seeing the old version of your website, then try clearing your browser cache too.

We hope this article helped you install and setup W3 Total Cache in WordPress. You may also want to see our complete WordPress security guide for beginners to strengthen your website security, or check out our comparison of the best GoDaddy alternatives that are cheaper and more reliable.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Install and Setup W3 Total Cache for Beginners first appeared on WPBeginner.

Creating Native Web Components

Native web components have been here for a while, but they still seem like the new kid on the block. Mainly due to the fact that they have a high barrier to entry, notably for beginners, and don’t have most of the features from the more established front-end frameworks. Nonetheless, they can be useful, especially for those who want to create framework-agnostic and reusable components. Today we will build some native web components with Minze, a simple JavaScript framework that makes it a breeze to create native web components.

Let’s get started!

Prior knowledge

This tutorial should be quite easy to follow for anybody familiar with the basics of HTML, CSS and JavaScript. Advanced knowledge in those fields is not required.

Outline

We will be building several web components for a fictive Smart Home dashboard application. You will learn some basic concepts of web components and how to create them with Minze. During this tutorial we will build 3 Components:

  • An accordion – for showing and hiding content.
  • A switch – that toggles between two states, exacltly like a light-switch.
  • A card – a simple encapsulated component that can be fed with content externaly

Following along

You can follow along in any environment by including a CDN link of Minze or by using this Codepen with the preloaded Minze script.

<script src="https://unpkg.com/minze@1.0.3" defer></script>

Accordion

Our first component is an accordion. It can be used to toggle content visibility.

1. Creating and registering the component

First, we need to extend from the MinzeElement class to create our component. Then we use the define method of the said component to register it. The component will be automatically registered in dash-case derived from its class name: sh-accordion. Web components should always consist of at least two words to prevent clashing with build-in html-components.

JavaScript

class ShAccordion extends MinzeElement {
  // ...
}

ShAccordion.define()

HTML Element

<sh-accordion>
  <div slot="title">
    Stats
  </div>

  <div slot="content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, similique!
  </div>
</sh-accordion>

2. Properties & Methods

Next, we define the properties and methods of our component. reactive defines well you guessed it, reactive properties, when they change a template re-render will be triggered. The first argument of the nested array is the name of the property, the second is the initial value. toggleOpen is a method that will toggle the open property between true and false.

class ShAccordion extends MinzeElement {
  reactive = [['open', false]]

  toggleOpen = () => this.open = !this.open
}

ShAccordion.define()

3. HTML

Here we are defining the html property as an arrow function for rendering the encapsulated HTML of the component. The template includes a slot tag that can be filled in when the component is used.

class ShAccordion extends MinzeElement {
  // previous code ...

  html = () => `
    <div class="title">
      <slot name="title"></slot>

      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20" fill="currentColor" class="arrow">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </div>

    <slot name="content"></slot>
  `
}

ShAccordion.define()

4. CSS

Styling can be added by using the css property. We are using the :host pseudo-class selector to style the component and the ::sloted CSS selector to style the externally inserted content. Note the use of ternary operators to conditionally apply styling based on the state of the open property.

class ShAccordion extends MinzeElement {
  // previous code ...

  css = () => `
    :host {
      background: rgb(228 228 231);
      font-family: sans-serif;
      border-radius: 2px;
      cursor: pointer;
    }

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      user-select: none;
      padding: 16px;
    }

    .arrow {
      transition: transform 0.2s ease-in-out;
      transform: ${this.open ? 'rotate(180deg)' : 'rotate(0)'};
    }

    ::slotted([slot=content]) {
      display: ${this.open ? 'block' : 'none'};
      padding: 16px;
    }
  `
}

ShAccordion.define()

5. Event listeners

Finally, we are adding a click event listener. The eventListeners property defines one or more event listeners inside the component. We are attaching a click handler to the title. The first argument of the nested array is a CSS selector, the second is the event type and the third is a callback function that runs when the title is clicked.

class ShAccordion extends MinzeElement {
  // previous code ...

  eventListeners = [['.title', 'click', this.toggleOpen]]
}

ShAccordion.define()

Result

Here is the full implementation of the accordion component.

See the Pen
ShAccordion
by Sergej Samsonenko (@sergejcodes)
on CodePen.light

Switch

Next up we will build the switch component.

1. Creating and registering the component

First, we need to extend from the MinzeElement class to create our component. Then we use the define method of the said component to register it. The component will be automatically registered in dash-case derived from its class name: sh-switch.

JavaScript

class ShSwitch extends MinzeElement {
  // ...
}

ShSwitch.define()

HTML Element

<sh-switch></sh-switch>

2. Properties & Methods

Next, we need to define the properties and methods for our component. reactive defines reactive properties, when they change a template re-render will be triggered. The first argument of the nested array is the name of the property, the second is the initial value. toggleActive is a method that toggles the active property between true and false.

class ShSwitch extends MinzeElement {
  reactive = [['active', false]]

  toggleActive = () => this.active = !this.active
}

ShSwitch.define()

3. HTML

Here we are defining the html property as an arrow function that holds the template of the component.

class ShSwitch extends MinzeElement {
  // previous code ...

  html = () => `
    <div class="indicator"></div>
  `
}

ShSwitch.define()

4. CSS

Now we are adding styling. We are using the :host pseudo-class selector to style the component. Note the use of ternary operators to conditionally apply styles based on the state of the active property.

class ShSwitch extends MinzeElement {
  // previous code ...

  css = () => `
    :host {
      width: 48px;
      height: 25px;
      display: flex;
      background: rgb(255 255 255);
      border: 1px solid rgb(228 228 231);
      border-radius: 9999px;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      padding: 2px;
    }

    .indicator {
      width: 20px;
      height: 20px;
      background: ${this.active ? 'rgb(161, 161, 170)' : 'rgb(228 228 231)'};
      border-radius: 9999px;
      position: relative;
      transform: translateX(${this.active ? 'calc(100% + 2px)' : '0'});
      transition: all 0.2s ease-in-out;
    }
  `
}

ShSwitch.define()

5. Event listeners

Finally, we are adding event listeners. The eventListeners property can define multiple event listeners inside the component. We are attaching a click handler to the element. The first argument of the nested array is a CSS selector, the second is the event type and the third is a callback function.

class ShSwitch extends MinzeElement {
  // previous code ...

  eventListeners = [[this, 'click', this.toggleActive]]
}

ShSwitch.define()

Result

Below is the full implementation of the switch component.

See the Pen
ShToggle
by Sergej Samsonenko (@sergejcodes)
on CodePen.light

Card

Our last element will be a card component.

1. Creating and registering the component

First, we need to extend from the MinzeElement class to create our component. Then we use the define method of the said component to register it. The component will be automatically registered in dash-case derived from its class name: sh-card.

JavaScript

class ShCard extends MinzeElement {
  // ...
}

ShCard.define()

HTML Element

<sh-card
  top-line="Outside"
  headline="Temperature"
  value="12°c"
  background="linear-gradient(220.64deg, #C8F5FF 0%, #B4B4FF 100%)"
></sh-card>

2. Attributes

Next, we need to define the attributes that can be added to the component.

class ShCard extends MinzeElement {
  attrs = ['top-line', 'headline', 'value', 'background']
}

ShCard.define()

3. HTML

Here we are defining the html property as an arrow function that holds the template of the component.

class ShCard extends MinzeElement {
  // previous code ...

  html = () => `
    <div class="top-line">${this.topLine ?? ''}</div>
    <div class="headline">${this.headline ?? ''}</div>

    <slot>
      <div class="value">${this.value ?? ''}</div>
    </slot>
  `
}

ShCard.define()

4. CSS

Adding styling for multiple nested elements inside the component. We are using the :host pseudo-class selector to style the `sh-card` element.

class ShCard extends MinzeElement {
  // previous code ...

  css = () => `
    :host {
      width: 200px;
      height: 180px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      background: ${this.background ?? 'transparent'};
      font-family: sans-serif;
      border-radius: 2px;
      padding: 24px 24px 16px;
    }

    .top-line {
      font-size: 16px;
      margin-bottom: 2px;
    }

    .headline {
      font-size: 20px;
      font-weight: bold;
    }

    .value {
      font-size: 36px;
      font-weight: bold;
      margin-top: auto;
    }

    ::slotted(*) {
      margin-top: auto;
      margin-bottom: 12px;
    }
  `
}

ShCard.define()

Result

Here is the full implementation of the card component.

See the Pen
ShCard
by Sergej Samsonenko (@sergejcodes)
on CodePen.light

Conclusion

As you can probably tell by now creating web components isn’t really rocket science. To see even more examples view the demo accompanied to this tutorial:

The post Creating Native Web Components appeared first on Codrops.

7 Best WordPress Image Compression Plugins Compared (2021)

Are you looking for the best WordPress image compression plugin for your website?

Image compression plugins allow you to easily optimize images in WordPress for better speed and performance automatically.

In this article, we have compared the best image compression plugins for WordPress.

7 best WordPress image compression plugins compared

When Do You Need a WordPress Image Compression Plugin?

Images are larger in size than plain text which means they take longer to load and can slow down your website.

However you’ve probably heard the saying: “a picture is worth a thousand words”. Images make your content more engaging and interactive.

To improve your WordPress website speed, you need to optimize your images for the web.

Since optimizing your images can make your site load faster, it will improve your WordPress SEO, and help you get more traffic.

The best way to do this is by using Photoshop or another image editing software before you upload the image to WordPress. This gives you a lot more control on the quality of images on your website.

However, not all users are comfortable working with an image editing program. For some people, optimizing every single image they upload sounds like a lot of work.

Luckily, there are several WordPress image compression plugins that can help you with that. These plugins optimize your images by automatically compressing them and using the smaller sized version on your website.

That being said, let’s take a look at the best WordPress image compression plugins, and how they stack up in terms of image optimization, performance, and quality.

1. EWWW Image Optimizer

EWWW Image Optimizer

EWWW Image Optimizer is the best WordPress image compression plugin. It is easy to use and can automatically optimize images you upload on the fly.

It can also compress and optimize your previously uploaded images in bulk.

Even though your images are being compressed, it’ll be very hard to tell the difference between compressed and uncompressed in terms of quality.

Plus, the entire process of compressing and optimizing is automated. This includes image scaling to fit the right size page and device, lazy loading, and even conversion into the next-gen WebP image format.

It can also optimize images generated by other WordPress plugins and stored outside your media library folders. This plugin support JPG, PNG, GIF, and even PDF optimization.

There is also a free version of the plugin available, which lets you perform image optimizations on your own server. This can be great for WordPress website owners concerned about privacy.

However, sites with a lot of images or sites that get a lot of traffic will want to opt for the paid plan, since it includes an image optimizing CDN, which will automatically compress and convert images as they are viewed.

Best of all, EWWW Image Optimizer is very affordable. Plans start at $7 per month and support unlimited images. If you have more than one site, then you’ll need a higher priced plan.

Included in your plan is a caching engine, CSS/JS optimization, and Google Font optimization to help your site load even faster.

2. Optimole

Optimole

Optimole is another excellent option for a WordPress image compression plugin.

Using this plugin requires a quick account creation and API key setup. After that, it’s straightforward to use and gives you complete control over your image optimization.

Optimole is powered by an image CDN, so your images will load quickly no matter where your visitors are coming from. With a CDN, your images are optimized in real-time and delivered to your website visitors in the perfect size.

You can view all of your optimized images in a single dashboard, making it easy to customize compression settings for individual images.

It lets you adjust things like the compression quality, large image resizing, lazy loading, and more.

There’s even a unique setting that will automatically watermark your images for you. This is great for photographers who are trying to protect their work.

Pricing is based on the number of visitors you have per month. The free plugin allows for up to 5,000 visitors per month. While the paid plans start at $19.08 per month when billed yearly and support up to 25,000 visitors per month.

3. ShortPixel Image Optimizer

ShortPixel

ShortPixel Image Optimizer is another great WordPress image compression plugin.

It’s packed with advanced features and gives you the ability to choose compression formats. It starts compressing images as soon you as activate plugin and stores your original images in a separate folder.

If you’re using the free plugin, then it requires you to get an API key by providing your email address.

The basic free account allows you to compress up to 100 images per month, and you will need to upgrade to their paid plans to increase this limit.

You can even simply convert PNG to JPEG and vice versa with the click of a button.

It’s also compatible with WooCommerce, NextGEN Gallery, and the WPML translation plugins.

If you’re using Cloudflare as your WordPress CDN, then you can integrate the service, so your images will be automatically updated with the new version.

ShortPixel is also very affordable. Plans are based on the number of images and start at $4.99 per month for up to 5,000 images per month.

4. reSmush.it

ReSmush.it

reSmush.it is another great choice for a WordPress image compression plugin. It allows you to automatically optimize images on upload as well as offer a bulk optimization option for older images.

You have full control over the image quality and compression with an easy to use slider.

It uses the reSmush API to optimize images and allows you to choose the optimization level for your uploads.

The downside is that it doesn’t have different compression levels. It also limits optimization to uploads lower than 5MB in size. You can exclude individual images from compression in case you need to add an image in full size.

5. Compress JPEG & PNG images

Compress JPEG & PNG images

Compress JPEG & PNG is created by the team behind TinyPNG, and you will need to create an account to use the plugin. You can only optimize 500 images each month with the free account.

It can automatically compress images upon upload, and you can also bulk optimize older images.

The plugin settings allow you to choose which image sizes you want to optimize. You can also set a maximum size for your original uploads. Images larger than that size will be automatically resized by the plugin.

You can also choose to save image data like time and date, copyright information, and GPS location on JPEG files.

6. WP Rocket

WP Rocket

WP Rocket is the best WordPress caching plugin in the market. It’s very beginner friendly and will help to make your site blazing fast.

There are image optimization features within WP Rocket, like lazy loading, which will only load images when they are viewed.

They also developed a plugin called Imagify. This plugin lets you optimize all of your images with a single click. It will also resize your images on the fly and lets you restore your images to their original size.

You also have full control over your image optimization and compression settings. All of your images will be optimized to your preferences.

7. Jetpack

Jetpack

Jetpack is a powerful WordPress plugin suite that combines essential WordPress features into a single plugin. The primary focus is security, performance, and marketing.

The image optimization features fall under the performance category. To enable image compression, all you have to do is turn on a single setting. There are no additional settings for you to set up.

What it does is automatically optimize your image and serve images to your visitors using a CDN. This reduces your server load and provides faster image loading for your visitors.

To access the image optimization, you can use the free version of the plugin as well.

If you like the idea of Jetpack, but are looking for plugins to replace all of Jetpack’s features, then see our guide on the best alternatives to the WordPress Jetpack plugin.

Comparison Test Scores for Image Compression Plugins

Now that you know about the different WordPress image compression options, let’s take a look at how they compare against each other in terms of performance.

To measure this, we ran test by uploading the same image using each of these plugins.

Testing JPEG Image Compression

We used the following JPEG image for our tests, it is 118.3 KB in file size.

JPEG test image

We didn’t touch any of the plugin settings and tested the compression with out of the box settings. Here are our test results:

PluginCompressed SizeSaved (%)Method
EWWW Image Optimizer64 KB54.24%Lossless
Optimole64 KB54.24%Lossless
ShortPixel Image Optimizer72 KB39.30%Lossless
reSmush.it78 KB20.81%Lossless
Compress JPEG & PNG images118.1 KB2 %Lossy

Testing PNG Image Compression

Next we wanted to test a PNG image to see how our contenders optimize it.

We used the following PNG image for the test, and it is 99.4 KB in file size.

PNG test image

Here are our test results:

PluginCompressed SizeSaved (%)Method
EWWW Image Optimizer97 KB1.9%Lossless
Optimole41 KB64%Lossless
ShortPixel Image Optimizer36 KB56%Lossy
reSmush.it36 KB56%Lossless
Compress JPEG & PNG images34.3 KB54%Lossy

Which is The Best Image Compression Plugin for WordPress?

If you are looking for the best image compression plugin, then EWWW Image Optimizer is the best choice.

It offers high levels of compression that don’t sacrifice image quality, plus it’s equipped with an image CDN and other features that will optimize your website for speed.

Another great option for sites that get less traffic is Optimole. It operates entirely in the background and takes care of image optimization for you, plus it’s free up to 5,000 visitors per month.

If you’re looking for an affordable plugin that offers high levels of compression and image conversion, then ShortPixel is worth checking out.

We hope you found this comparison of best WordPress image compression plugins useful. You may also want to see our beginner’s guide to image SEO to optimize images for search engines, and our expert picks of the best email marketing services for businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 7 Best WordPress Image Compression Plugins Compared (2021) appeared first on WPBeginner.

Gatsby Serverless Functions And The International Space Station

Gatsby recently announced the launch of Functions which opens up a new dimension of possibilities — and I for one couldn’t be more excited! With Gatsby now providing Serverless Functions on Gatsby Cloud (and Netlify also providing support via @netlify/plugin-gatsby), the framework that was once misunderstood to be “just for blogs” is now more than ever, (in my opinion) the most exciting technology provider in the Jamstack space.

The demo in this article is the result of a recent project I worked on where I needed to plot geographical locations around a 3D globe and I thought it might be fun to see if it were possible to use the same technique using off-planet locations. Spoiler alert: It’s possible! Here’s a sneak peek of what I’ll be talking about in this post, or if you prefer to jump ahead, the finished code can be found here.

Getting Started

With Gatsby Functions, you can create more dynamic applications using techniques typically associated with client-side applications by adding an api directory to your project and exporting a function, e.g.

|-- src
  |-- api
     -- some-function.js
  |-- pages
// src/api/some-function.js
export default function handler(req, res) {
  res.status(200).json({ hello: `world` })
}

If you already have a Gatsby project setup, great! but do make sure you’ve upgraded Gatsby to at least version v3.7

npm install gatsby@latest --save

If not, then feel free to clone my absolute bare-bones Gatsby starter repo: mr-minimum.

Before I can start using Gatsby Functions to track the International Space Station, I first need to create a globe for it to orbit.

Step 1: Building The 3D Interactive Globe

I start by setting up a 3D interactive globe which can be used later to plot the current ISS location.

Install Dependencies

npm install @react-three/fiber @react-three/drei three three-geojson-geometry axios --save

Create The Scene

Create a new file in src/components called three-scene.js

// src/components/three-scene.js
import React from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

const ThreeScene = () => {
  return (
    <Canvas
      gl={{ antialias: false, alpha: false }}
      camera={{
        fov: 45,
        position: [0, 0, 300]
      }}
      onCreated={({ gl }) => {
        gl.setClearColor('#ffffff');
      }}
      style={{
        width: '100vw',
        height: '100vh',
        cursor: 'move'
      }}
    >
      <OrbitControls enableRotate={true} enableZoom={false} enablePan={false} />
    </Canvas>
  );
};

export default ThreeScene;

The above sets up a new <Canvas /> element and can be configured using props exposed by React Three Fibre.

Elements that are returned as children of the canvas component will be displayed as part of the 3D scene. You’ll see above that I’ve included <OrbitControls /> which adds touch/mouse interactivity allowing users to rotate the scene in 3D space

Ensure ThreeScene is imported and rendered on a page somewhere in your site. In my example repo I’ve added ThreeScene to index.js:

// src/pages/index.js
import React from 'react';

import ThreeScene from '../components/three-scene';

const IndexPage = () => {
  return (
    <main>
      <ThreeScene />
    </main>
  );
};

export default IndexPage;

This won’t do much at the moment because there’s nothing to display in the scene. Let’s correct that!

Create The Sphere

Create a file in src/components called three-sphere.js:

// src/components/three-sphere.js
import React from 'react';

const ThreeSphere = () => {
  return (
    <mesh>
      <sphereGeometry args={[100, 32, 32]} />
      <meshBasicMaterial color="#f7f7f7" transparent={true} opacity={0.6} />
    </mesh>
  );
};

export default ThreeSphere;

If the syntax above looks a little different to that of the Three.js docs it’s because React Three Fibre uses a declarative approach to using Three.js in React.

A good explanation of how constructor arguments work in React Three Fibre can be seen in the docs here: Constructor arguments

Now add ThreeSphere to ThreeScene:

// src/components/three-scene.js
import React from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

+ import ThreeSphere from './three-sphere';

const ThreeScene = () => {
  return (
    <Canvas
      gl={{ antialias: false, alpha: false }}
      camera={{
        fov: 45,
        position: [0, 0, 300]
      }}
      onCreated={({ gl }) => {
        gl.setClearColor('#ffffff');
      }}
      style={{
        width: '100vw',
        height: '100vh',
        cursor: 'move'
      }}
    >
      <OrbitControls enableRotate={true} enableZoom={false} enablePan={false} />
+      <ThreeSphere />
    </Canvas>
  );
};

export default ThreeScene;

You should now be looking at something similar to the image below.

Not very exciting, ay? Let’s do something about that!

Create The Geometry (To Visualize The Countries Of Planet Earth)

This next step requires the use of three-geojson-geometry and a CDN resource that contains Natural Earth Data. You can take your pick from a full list of suitable geometries here.

I’ll be using admin 0 countries. I chose this option because it provides enough geometry detail to see each country, but not so much that it will add unnecessary strain on your computer’s GPU.

Now, create a file in src/components called three-geo.js:

// src/components/three-geo.js
import React, { Fragment, useState, useEffect } from 'react';
import { GeoJsonGeometry } from 'three-geojson-geometry';
import axios from 'axios';

const ThreeGeo = () => {
const [isLoading, setIsLoading] = useState(true);
  const [geoJson, setGeoJson] = useState(null);

  useEffect(() => {
    axios
      .get(
   'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_0_countries.geojson'
      )
      .then((response) => {
        setIsLoading(false);
        setGeoJson(response.data);
      })
      .catch((error) => {
        console.log(error);
        throw new Error();
      });
  }, []);

  return (
    <Fragment>
      {!isLoading ? (
        <Fragment>
          {geoJson.features.map(({ geometry }, index) => {
            return (
              <lineSegments
                key={index}
                geometry={new GeoJsonGeometry(geometry, 100)}
              >
                <lineBasicMaterial color="#e753e7" />
              </lineSegments>
            );
          })}
        </Fragment>
      ) : null}
    </Fragment>
  );
};

export default ThreeGeo;

There’s quite a lot going on in this file so I’ll walk you through it.

  1. Create an isLoading state instance using React hooks and set it to true. This prevents React from attempting to return data I don’t yet have.
  2. Using a useEffect I request the geojson from the CloudFront CDN.
  3. Upon successful retrieval I set the response in React state using setGeoJson(...) and set isLoading to false
  4. Using an Array.prototype.map I iterate over the “features” contained within the geojson response and return lineSegments with lineBasicMaterial for each geometry
  5. I set the lineSegments geometry to the return value provided by GeoJsonGeomtry which is passed the “features” geometry along with a radius of 100.

(You may have noticed I’ve used the same radius of 100 here as I’ve used in the sphereGeometry args in three-sphere.js. You don’t have to set the radius to the same value but it makes sense to use the same radii for ThreeSphere and ThreeGeo.

If you’re interested to know more about how GeoJsonGeometry works, here’s the open-source repository for reference: https://github.com/vasturiano/three-geojson-geometry. The repository has an example directory however, the syntax is slightly different from what you see here because the examples are written in vanilla JavaScript not React.

Combine The Sphere And Geometry

Now it’s time to overlay the geometry on top of the blank sphere: Add ThreeGeo to ThreeScene

// src/components/three-scene.js
import React from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

import ThreeSphere from './three-sphere';
+ import ThreeGeo from './three-geo';


const ThreeScene = () => {
  return (
    <Canvas
      gl={{ antialias: false, alpha: false }}
      camera={{
        fov: 45,
        position: [0, 0, 300]
      }}
      onCreated={({ gl }) => {
        gl.setClearColor('#ffffff');
      }}
      style={{
        width: '100vw',
        height: '100vh',
        cursor: 'move'
      }}
    >
      <OrbitControls enableRotate={true} enableZoom={false} enablePan={false} />
      <ThreeSphere />
+      <ThreeGeo />
    </Canvas>
  );
};

You should now be looking at something similar to the image below.

Now that’s slightly more exciting!

Step 2: Building A Serverless Function

Create A Function

This next step is where I use a Gatsby Function to request data from Where is ISS at, which returns the current location of the International Space Station.

Create a file in src/api called get-iss-location.js:

// src/api/get-iss-location.js
const axios = require('axios');

export default async function handler(req, res) {
  try {
    const { data } = await axios.get(
      'https://api.wheretheiss.at/v1/satellites/25544'
    );

    res.status(200).json({ iss_now: data });
  } catch (error) {
    res.status(500).json({ error });
  }
}

This function is responsible for fetching data from api.whereistheiss.at and upon success will return the data and a 200 status code back to the browser.

The Gatsby engineers have done such an amazing job at simplifying serverless functions that the above is all you really need to get going, but here’s a little more detail about what’s going on.

  • The function is a default export from a file named get-iss-location.js;
  • With Gatsby Functions the filename becomes the file path used in a client-side get request prefixed with api, e.g. /api/get-iss-location;
  • If the request to “Where is ISS at” is successful I return an iss_now object containing data from the Where is ISS at API and a status code of 200 back to the client;
  • If the request errors I send the error back to the client.

Step 3: Build The International Space Station

Creating The ISS Sphere

In this next step, I use Gatsby Functions to position a sphere that represents the International Space Station as it orbits the globe. I do this by repeatedly calling an axios.get request from a poll function and setting the response in React state.

Create a file in src/components called three-iss.js

// src/components/three-iss.js
import React, { Fragment, useEffect, useState } from 'react';
import * as THREE from 'three';
import axios from 'axios';

export const getVertex = (latitude, longitude, radius) => {
  const vector = new THREE.Vector3().setFromSpherical(
    new THREE.Spherical(
      radius,
      THREE.MathUtils.degToRad(90 - latitude),
      THREE.MathUtils.degToRad(longitude)
    )
  );
  return vector;
};

const ThreeIss = () => {
  const [issNow, setIssNow] = useState(null);

  const poll = () => {
    axios
      .get('/api/get-iss-location')
      .then((response) => {
        setIssNow(response.data.iss_now);
      })
      .catch((error) => {
        console.log(error);
        throw new Error();
      });
  };

  useEffect(() => {
    const pollInterval = setInterval(() => {
      poll();
    }, 5000);

    poll();
    return () => clearInterval(pollInterval);
  }, []);

  return (
    <Fragment>
      {issNow ? (
        <mesh
          position={getVertex(
            issNow.latitude,
            issNow.longitude,
            120
          )}
        >
          <sphereGeometry args={[2]} />
          <meshBasicMaterial color="#000000" />
        </mesh>
      ) : null}
    </Fragment>
  );
};

export default ThreeIss;

There’s quite a lot going on in this file so I’ll walk you through it.

  1. Create an issNow state instance using React hooks and set it to null. This prevents React from attempting to return data I don’t yet have;
  2. Using a useEffect I create a JavaScript interval that calls the poll function every 5 seconds;
  3. The poll function is where I request the ISS location from the Gatsby Function endpoint (/api/get-iss-location);
  4. Upon successful retrieval, I set the response in React state using setIssNow(...);
  5. I pass the latitude and longitude onto a custom function called getVertex, along with a radius.

You may have noticed that here I’m using a radius of 120. This does differ from the 100 radius value used in ThreeSphere and ThreeGeo. The effect of the larger radius is to position the ISS higher up in the 3D scene, rather than at ground level — because that’s logically where the ISS would be, right?
100 has the effect of the sphere and geometry overlapping to represent Earth, and 120 for the ISS has the effect of the space station “orbiting” the globe I’ve created.

One thing that took a bit of figuring out, at least for me, was how to use spherical two dimensional coordinates (latitude and longitude) in three dimensions, e.g. x,y,z. The concept has been explained rather well in this post by Mike Bostock.

The key to plotting lat / lng in 3D space lies within this formula… which makes absolutely no sense to me!

x=rcos(ϕ)cos(λ)
y=rsin(ϕ)
z=−rcos(ϕ)sin(λ)

Luckily, Three.js has a set of MathUtils which I’ve used like this:

  • Pass the latitude, longitude and radius into the getVertex(...) function
  • Create a new THREE.Spherical object from the above named parameters
  • Set the THREE.Vector3 object using the Spherical values returned by the setFromSpherical helper function.

These numbers can now be used to position elements in 3D space on their respective x, y, z axis — phew! Thanks, Three.js!

Now add ThreeIss to ThreeScene:

import React from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

import ThreeSphere from './three-sphere';
import ThreeGeo from './three-geo';
+ import ThreeIss from './three-iss';

const ThreeScene = () => {
  return (
    <Canvas
      gl={{ antialias: false, alpha: false }}
      camera={{
        fov: 45,
        position: [0, 0, 300]
      }}
      onCreated={({ gl }) => {
        gl.setClearColor('#ffffff');
      }}
      style={{
        width: '100vw',
        height: '100vh',
        cursor: 'move'
      }}
    >
      <OrbitControls enableRotate={true} enableZoom={false} enablePan={false} />
      <ThreeSphere />
      <ThreeGeo />
+     <ThreeIss />
    </Canvas>
  );
};

export default ThreeScene;

Et voilà! You should now be looking at something similar to the image below.

The poll function will repeatedly call the Gatsby Function, which in turn requests the current location of the ISS and re-renders the React component each time a response is successful. You’ll have to watch carefully but the ISS will change position ever so slightly every 5 seconds.

The ISS is traveling at roughly 28,000 km/h and polling the Gatsby Function less often would reveal larger jumps in position. I’ve used 5 seconds here because that’s the most frequent request time as allowed by the Where is ISS at API

You might have also noticed that there’s no authentication required to request data from the Where is ISS at API. Meaning that yes, technically, I could have called the API straight from the browser, however, I’ve decided to make this API call server side using Gatsby Functions for two reasons:

  1. It wouldn’t have made a very good blog post about Gatsby Functions if i didn’t use them.
  2. Who knows what the future holds for Where is ISS at, it might at some point require authentication and adding API keys to server side API requests is pretty straightforward, moreover this change wouldn’t require any updates to the client side code.

Step 4: Make It Fancier! (Optional)

I’ve used the above approach to create this slightly more snazzy implementation: https://whereisiss.gatsbyjs.io,

In this site I’ve visualized the time delay from the poll function by implementing an Svg <circle /> countdown animation and added an extra <circle /> with a stroke-dashoffset to create the dashed lines surrounding it.

Step 5: Apply Your New Geo Rendering Skills In Other Fun Ways!

I recently used this approach for plotting geographical locations for the competition winners of 500 Bottles: https://500bottles.gatsbyjs.io. A limited edition FREE swag giveaway I worked on with Gatsby’s marketing team.

You can read all about how this site was made on the Gatsby blog: How We Made the Gatsby 500 Bottles Giveaway

In the 500 Bottles site I plot the geographical locations of each of the competition winners using the same method as described in ThreeIss, which allows anyone visiting the site to see where in the world the winners are.

Closing Thoughts

Gatsby Functions really open up a lot of possibilities for Jamstack developers and never having to worry about spinning up or scaling a server removes so many problems leaving us free to think about new ways they can be used.

I have a number of ideas I’d like to explore using the V4 Space X API’s so give me a follow if that’s your cup of tea: @PaulieScanlon

Further Reading

I hope you enjoyed this post. Ttfn 🕺!

How to Build Your Software Distribution CDN Using Mirrorbits

Lots of independent developers use GitHub or its equivalents to host their code repositories. And since they're simple to use and well understood by the public, that's a great idea. But as anyone who's ever created a project that attracted a whole lot of attention can attest, the platforms aren't well-suited to distributing binaries and other software releases.

In most cases, GitHub projects that post binaries do so by having a single server or VPS get triggered by a webhook to compile whatever binaries the project requires. And that means every time a user tries to download the resultant binaries, they’ll be making requests to that same single server instance. That's both inefficient and a recipe for download problems.

A Complete Guide To Incremental Static Regeneration (ISR) With Next.js

A year ago, Next.js 9.3 released support for Static Site Generation (SSG) making it the first hybrid framework. I’d been a happy Next.js user for about a few years at this point, but this release made Next.js my new default solution. After working with Next.js extensively, I joined Vercel to help companies like Tripadvisor and Washington Post as they adopt and scale Next.js.

In this article, I’d like to explore a new evolution of the Jamstack: Incremental Static Regeneration (ISR). Below you’ll find a guide to ISR — including use cases, demos and tradeoffs.

The Problem with Static-Site Generation

The idea behind the Jamstack is appealing: pre-rendered static pages which can be pushed to a CDN and globally available in seconds. Static content is fast, resilient to downtime, and immediately indexed by crawlers. But there are some issues.

If you’ve adopted the Jamstack architecture while building a large-scale static site, you might be stuck waiting hours for your site to build. If you double the number of pages, the build time also doubles. Let’s consider Target.com. Is it possible to statically generate millions of products with every deployment?

Even if every page was statically generated in an unrealistic 1ms, it would still take hours to rebuild the entire site. For large web applications, choosing complete static-site generation is a non-starter. Large-scale teams need a more flexible, personalized, hybrid solution.

Content Management Systems (CMS)

For many teams, their site’s content is decoupled from the code. Using a Headless CMS allows content editors to publish changes without involving a developer. However, with traditional static sites, this process can be slow.

Consider an e-commerce store with 100,000 products. Product prices change frequently. When a content editor changes the price of headphones from $100 to $75 as part of a promotion, their CMS uses a webhook to rebuild the entire site. It’s not feasible to wait hours for the new price to be reflected.

Long builds with unnecessary computation might also incur additional expenses. Ideally, your application is intelligent enough to understand which products changed and incrementally update those pages without needing a full rebuild.

Incremental Static Regeneration (ISR)

Next.js allows you to create or update static pages after you’ve built your site. Incremental Static Regeneration (ISR) enables developers and content editors to use static-generation on a per-page basis, without needing to rebuild the entire site. With ISR, you can retain the benefits of static while scaling to millions of pages.

Static pages can be generated at runtime (on-demand) instead of at build-time with ISR. Using analytics, A/B testing, or other metrics, you are equipped with the flexibility to make your own tradeoff on build times.

Consider the e-commerce store from before with 100,000 products. At a realistic 50ms to statically generate each product page, this would take almost 2 hours without ISR. With ISR, we can choose from:

  • Faster Builds
    Generate the most popular 1,000 products at build-time. Requests made to other products will be a cache miss and statically generate on-demand: 1-minute builds.
  • Higher Cache Hit Rate
    Generate 10,000 products at build-time, ensuring more products are cached ahead of a user’s request: 8-minute builds.

Let’s walk through an example of ISR for an e-commerce product page.

Getting Started

Fetching Data

If you’ve never used Next.js before, I’d recommend reading Getting Started With Next.js to understand the basics. ISR uses the same Next.js API to generate static pages: getStaticProps. By specifying revalidate: 60, we inform Next.js to use ISR for this page.

  1. Next.js can define a revalidation time per page. Let’s set it at 60 seconds.
  2. The initial request to the product page will show the cached page with the original price.
  3. The data for the product is updated in the CMS.
  4. Any requests to the page after the initial request and before 60 seconds are cached and instantaneous.
  5. After the 60-second window, the next request will still show the cached (stale) page. Next.js triggers a regeneration of the page in the background.
  6. Once the page has been successfully generated, Next.js will invalidate the cache and show the updated product page. If the background regeneration fails, the old page remains unaltered.
// pages/products/[id].js

export async function getStaticProps({ params }) {
  return {
    props: {
      product: await getProductFromDatabase(params.id)
    },
    revalidate: 60
  }
}

Generating Paths

Next.js defines which products to generate at build-time and which on-demand. Let’s only generate the most popular 1,000 products at build-time by providing getStaticPaths with a list of the top 1,000 product IDs.

We need to configure how Next.js will “fallback” when requesting any of the other products after the initial build. There are two options to choose from: blocking and true.

  • fallback: blocking (preferred)
    When a request is made to a page that hasn’t been generated, Next.js will server-render the page on the first request. Future requests will serve the static file from the cache.
  • fallback: true
    When a request is made to a page that hasn’t been generated, Next.js will immediately serve a static page with a loading state on the first request. When the data is finished loading, the page will re-render with the new data and be cached. Future requests will serve the static file from the cache.
// pages/products/[id].js

export async function getStaticPaths() {
  const products = await getTop1000Products()
  const paths = products.map((product) => ({
    params: { id: product.id }
  }))

  return { paths, fallback: ‘blocking’ }
}

Tradeoffs

Next.js focuses first and foremost on the end-user. The "best solution" is relative and varies by industry, audience, and the nature of the application. By allowing developers to shift between solutions without leaving the bounds of the framework, Next.js lets you pick the right tool for the project.

Server-Side Rendering

ISR isn’t always the right solution. For example, the Facebook news feed cannot show stale content. In this instance, you’d want to use SSR and potentially your own cache-control headers with surrogate keys to invalidate content. Since Next.js is a hybrid framework, you’re able to make that tradeoff yourself and stay within the framework.

// You can cache SSR pages at the edge using Next.js
// inside both getServerSideProps and API Routes
res.setHeader('Cache-Control', 's-maxage=60, stale-while-revalidate');

SSR and edge caching are similar to ISR (especially if using stale-while-revalidate caching headers) with the main difference being the first request. With ISR, the first request can be guaranteed static if pre-rendered. Even if your database does down, or there’s an issue communicating with an API, your users will still see the properly served static page. However, SSR will allow you to customize your page based on the incoming request.

Note: Using SSR without caching can lead to poor performance. Every millisecond matters when blocking the user from seeing your site, and this can have a dramatic effect on your TTFB (Time to First Byte).

Static-Site Generation

ISR doesn’t always make sense for small websites. If your revalidation period is larger than the time it takes to rebuild your entire site, you might as well use traditional static-site generation.

Client-Side Rendering

If you use React without Next.js, you’re using client-side rendering. Your application serves a loading state, followed by requesting data inside JavaScript on the client-side (e.g. useEffect). While this does increase your options for hosting (as there’s no server necessary), there are tradeoffs.

The lack of pre-rendered content from the initial HTML leads to slower and less dynamic Search Engine Optimization (SEO). It’s also not possible to use CSR with JavaScript disabled.

ISR Fallback Options

If your data can be fetched quickly, consider using fallback: blocking. Then, you don’t need to consider the loading state and your page will always show the same result (regardless of whether it’s cached or not). If your data fetching is slow, fallback: true allows you to immediately show a loading state to the user.

ISR: Not Just Caching!

While I’ve explained ISR through the context of a cache, it’s designed to persist your generated pages between deployments. This means that you’re able to roll back instantly and not lose your previously generated pages.

Each deployment can be keyed by an ID, which Next.js uses to persist statically generated pages. When you roll back, you can update the key to point to the previous deployment, allowing for atomic deployments. This means that you can visit your previous immutable deployments and they’ll work as intended.

  • Here’s an example of reverting code with ISR:
  • You push code and get a deployment ID 123.
  • Your page contains a typo “Smshng Magazine”.
  • You update the page in the CMS. No re-deploy needed.
  • Once your page shows “Smashing Magazine”, it’s persisted in storage.
  • You push some bad code and deploy ID 345.
  • You roll back to deployment ID 123.
  • You still see “Smashing Magazine”.

Reverts and persisting static pages are out of scope of Next.js and dependent on your hosting provider. Note that ISR differs from server-rendering with Cache-Control headers because, by design, caches expire. They are not shared across regions and will be purged when reverting.

Examples of Incremental Static Regeneration

Incremental Static Regeneration works well for e-commerce, marketing pages, blog posts, ad-backed media, and more.

  • E-commerce Demo
    Next.js Commerce is an all-in-one starter kit for high-performance e-commerce sites.
  • GitHub Reactions Demo
    React to the original GitHub issue and watch ISR update the statically generated landing page.
  • Static Tweets Demo
    This project deploys in 30 seconds, but can statically generate 500M tweets on-demand using ISR.

Learn Next.js Today

Developers and large teams are choosing Next.js for its hybrid approach and ability to incrementally generate pages on-demand. With ISR, you get the benefits of static with the flexibility of server-rendering. ISR works out of the box using next start.

Next.js has been designed for gradual adoption. With Next.js, you can continue using your existing code and add as much (or as little) React as you need. By starting small and incrementally adding more pages, you can prevent derailing feature work by avoiding a complete rewrite. Learn more about Next.js — and happy coding, everyone!

Further Reading

How Not To Get Hacked – A Guide For WordPress Website Developers (And Their Clients)

You’ve built your clients their dream website. Don’t allow hackers to take it over and turn it into a nightmare. Our “how not to get hacked” guide shows you how…

When hackers start breaking into the security firms that are protecting us from hackers, you know it’s time to take security seriously!

Especially when you consider stats like these:

  • There is a hacker attack every 39 seconds.
  • 95% of cybersecurity breaches are due to human error.
  • 64% of companies have experienced web-based attacks.
  • 43% of cyber attacks target small businesses.

Source: Cybint

Yeah…But Not All Hacking is Done Via Websites

True, but here is the thing…

Most security threats are multidimensional.

This means that no matter how much time, money, and effort you invest into building and hosting a website securely, there are many factors that can threaten web security and allow hackers to wreak havoc on your website.

Take a look at this flowchart to see what I mean…

Security threat factors.
Security threats are multidimensional.

The above is my condensed version of the security threats classification model shown below…

ScienceDirect.com - Multi-dimensional Security Threats Model.
Multidimensional threats can affect the security of your website. (Source: ScienceDirect.com,  Classification of Security Threats in Information Systems.)

As you can see from the diagram above, web security threats can come from either:

  • External sources (e.g. unauthorized users and natural disasters) or
  • Internal sources (e.g. an employee with admin access to the site, server, or a network account).

Add in human, environmental, and technological agents with malicious or non-malicious motivation and accidental or non-accidental intent, and the security threats posed by any combination of these factors are further multiplied.

To put it simply…

Web Security is Freaking Complex!

A failure in any part of the system can threaten the security of the whole.

Even in situations where cyber attackers are not directly involved (e.g. natural disasters), these threats can create security blind spots that could impair your site and lead to:

  • Destruction of information – e.g. deletion of important files or data.
  • Corruption of information – e.g. corrupted database tables and files.
  • Disclosure of information – e.g. exposing confidential data to unauthorized users or the general public.
  • Theft of service – e.g. data theft or misuse, stealing server resources, etc.
  • Denial of service – e.g. a Distributed Denial of Service attack (DDoS).
  • Unauthorized elevation of privilege – e.g. exploiting a weakness in the system to gain admin privileges to the site or network,
  • Illegal usage – e.g. using the site to attack other sites, spread viruses, run scams, identity theft, etc.

To prevent sites from being hacked, damaged, or disrupted, then, all threat factors in this multidimensional security beast need to be considered.

DevMan vs Multidimensional Security Threats.
Keeping security threats out is tough, especially when you’re battling a multidimensional beast!

Now that we understand the enormity of what we’re dealing with, let’s narrow down how to tackle this web security beast.

We’ll focus on how to prevent your sites from being hacked by addressing the following areas:

  1. Mitigating Web Security Risks
  2. Defence is Your Only Plan of Attack
  3. Securing 95% of Vulnerabilities Against Hackers

1. Mitigating Web Security Risks

Many things can go wrong outside of your website and create an opportunity for hackers to get into your site.

These things include:

  • External Services – who and where you purchase services from or outsource to, including hosting, plugins, themes, other website developers, etc.
  • Processes and methods used to build, secure, and manage sites.
  • Human vulnerabilities – inadequate knowledge, understanding, experience, and skill level of security-related issues.

Mitigating Risks from External Services

As a WordPress developer, your main service providers include the following:

  • Your hosting company and data centers.
  • Third-party plugin and theme developers.
  • Integrated third-party platforms and software.
  • Outsourced developers, contractors, etc.

Data Centers

Webhosting companies typically own or lease space to house their servers within multiple data centers located around the world.

All of your hosting company’s hardware, data, and information processing takes place inside data centers, so it’s important for data centers to take physical and digital security seriously to mitigate all threats and risks of attacks and damage, and to ensure the safety and security of the servers housing your websites and data.

Most developers choose their web hosting company and the web host chooses their data center(s). Both hosting companies and data centers, however, have a shared responsibility to ensure website security.

Data Center responsibilities for ensuring security include managing things like:

  • Environmental controls – electronic equipment generates heat that can lead to failure, so it needs to operate at a safe temperature.
  • Backup power supplies – servers need to keep running even if the main power grid unexpectedly goes down.
  • Employing advanced security methods – this includes CCTV surveillance systems and technologies to ensure that hardware and people don’t enter or exit the center without approval, such as using trap rooms with biometrics and limited security access, single-entry doors (only one person allowed in at a time), server cages that enclose, protect, and segregate servers with sensitive data and equipment, metal detectors, etc.
  • Securing facilities – this includes employing guards and installing protective measures like bulletproof glass, high-impact crash barriers, weatherproofing, fire suppression systems, etc.

Your Hosting Company

Focusing on areas like server speed and reliability or recommending companies based on plan pricing, affiliate commissions, and reseller incentives without prioritizing security can put your clients’ sites at risk.

Performance factors and economic benefits should not be discounted, but it’s also important to evaluate your host’s commitment to security.

95% of breached records in 2016 came from three industries and technology was one of them (government and retail were the others). Companies that store a high level of personally identifiable information (PII) in their records are very popular targets. So, it’s important to know how your hosting company stores data and what active and passive security measures are in place to protect it.

Some hosting options are more secure than others. We have written a detailed guide on different types of hosting, including which types are more secure and how to choose the right type of hosting for your needs.

Understanding the network redundancies in your host’s infrastructure is also important. What happens if a network server or a router fails or a component is breached and hacked into? How are your sites isolated and protected from network incidents and service disruptions caused by security breaches?

When evaluating a host, find out what kind of security measures are built into their hosting management and servers. Does your plan include server-side firewalls that proactively prevent malicious codes from entering the network (e.g. WAF), security features for encrypting and transmitting data like SSL, SFTP, and CDN?

What about file scanning, dedicated IPs, two-factor authentication (2FA), nightly backups and one-click restores, and a secure staging area for developing client sites, performing maintenance updates, and installing or testing new applications without leaving your websites vulnerable and exposed to attack?

Also, if despite all security measures, your site ends up being compromised, what kind of security guarantees and support does your web host offer?

Here at WPMU DEV, for example, we not only offer affordable, blazing fast, and secure managed WordPress hosting, but we also provide members with a dedicated 24×7 helpdesk for all WordPress-related issues (including security) and we’ll help you clean your hacked sites. We also provide extensive documentation covering all of our hosting security features.

If you’re serious about protecting your sites from hackers, you should expect nothing less than a total commitment to web security from your hosting provider.

Mitigating Risks from Third-party Sources

Although WordPress is a secure platform, it’s hard to avoid using third-party plugins, themes, and integrations with other platforms.

Any vulnerability in a third-party solution can open the door to hackers and lead to a compromised website.

To minimize risk when using third-party solutions, only download plugins from trusted sources (and themes), use reputable third-party platforms in your site integrations, and always keep your WordPress site up to date.

An excellent resource to check before installing any third-party solutions is the National Vulnerability Database.

For example, while writing this article, I did a quick search of the database on “WordPress” and over 3,000 results popped up, many listing vulnerabilities in WordPress plugins and themes (I also ran a search on “WordPress themes” which brought up 180+ theme vulnerabilities).

National Vulnerability Database
Search the National Vulnerability Database for vulnerabilities in plugins, themes, and third-party software.

(As a point of interest, when we wrote an article about searching for WordPress vulnerabilities almost a decade ago, we looked at eight years of previous data and found that security vulnerabilities reported for WordPress core were trending downward, but issues reported for 3rd-party plugins were trending upward. We plan to revisit this in the near future and we’ll report our findings here, so watch this space!)

Mitigating Risks from Internal Processes

To keep things simple, let’s divide everyone into two groups:

  1. People you outsource services to (e.g. other web developers, remote workers, etc.)
  2. People you provide services to (e.g. your clients) – we’ll address this group later.

Suppose you own a web development agency and you employ/outsource other people. Every person in your business is a potential security threat. Your partners, staff, outsourced contractors, remote workers…and — from your client’s perspective — even you!

For example:

  • You outsource technical work to someone with such high-level skills that no one else can understand or figure out what they are doing.
  • Someone in your team with network access has been careless with a password or an email attachment.
  • A remote worker with access to your systems and data is working from an unsecured wi-fi location.

In the introduction section, I pointed out that:

  • 64% of companies have experienced web-based attacks.
  • 43% of cyber attacks target small businesses.

Do the maths and you will quickly realize that some of your clients are bound to experience a cyber attack.

For example, if you are looking after 10 small business client sites, there’s a good chance that 2 or 3 of those websites will be targeted by hackers (10 x 64% = 6.4 sites x 43% =2.75 sites).

To reduce the probability that your business is responsible for client sites going down, it’s important to develop and implement internal security policies and guidelines covering areas like:

  • Passwords & Accounts – This includes specifying how often passwords should be changed, setting expiring passwords and accounts, revoking access for employees who leave or are terminated, archiving, storing, and deleting stale data and sensitive information, etc.
  • Use of BYOD (Bring Your Own Device) equipment – Do you allow staff, outsourced, or remote workers to use their own phones and laptops? If so, what security measures can you implement to store and handle proprietary data and client information on their devices securely? What happens if they delete important data accidentally or maliciously from your systems or server? Do you have a Mobile Device Management (MDM) policy giving you the power to wipe their devices clean remotely if their devices are stolen or lost?
  • Training – If you employ remote workers make sure that they know how to securely log in and work remotely. Also, consider implementing training programs for employees, especially those in roles that are vulnerable to cyberattacks, and give them options to develop preventative and defensive skills and understand security best practices.
  • Periodic Reviews & Evaluations – Just like software, the security of your business also needs to be reviewed, revised, and updated on a regular basis. Conduct periodic assessments of your internal security practices and policies to identify and patch up any weaknesses.

For additional tips on implementing security practices in your business or work environment, check out this great list of cybersecurity tips.

Now that we have looked at threats that can allow hackers into your business, let’s look at protecting ourselves from threats that can allow hackers into your website.

2. Defence is Your Only Plan of Attack

You’ve done all you can to mitigate security risks from external threats. You’ve chosen a web host that takes security seriously and runs servers from a data center more secure than Fort Knox. You only install third-party plugins and themes from reliable and trusted sources and integrate with established third-party platforms. Your workplace has implemented best security practices.

All that’s left now is to build amazing WordPress sites for your clients and make sure they’re impregnable fortresses to hackers.

Consider this quote from Sense of Security, a leading IT security firm on the escalation of the cybersecurity arms race:

Just as the advancements in technologies help security professionals identify and neutralise potential threats more effectively, it also provides the tools for hackers to undertake larger, more complex attacks. And these attacks are evolving faster than our defences can keep up.

Web security is not just a classic case of good guys vs bad guys, it’s also good guys training bad guys to become even badder guys!

As a web developer focused on building websites and not “cybersecurity weapons” the best you can do is try to keep up and defend as best as you can.

The more you know and understand about security-related issues, the better you will be able to defend sites from cyberattacks, hackers, malicious bots, etc.

To help you with this, we have written many in-depth articles and step-by-step tutorials on WordPress security and how to harden WordPress sites.

So, in this section, I’ll just provide you with a list of articles and tutorials that will turn you into a WordPress security pro.

If You’re a New WordPress Developer

If you’re just starting out as a web developer, we recommend checking out some of our hosting tutorials related to security, like understanding server file permissions, SSL, and WAF.

Also, make sure you understand why hackers want to target your WordPress site and how to scan a WordPress site for malware.

If your client has a small budget, check out how to secure a WordPress site for free.

We also recommend getting these quick and easy WordPress security vulnerability fixes into your tool belt.

Once you’ve got the basics covered, it’s time to…

Become A WordPress Security Pro

Start by checking out our Ultimate Guide To WordPress Security.

Next, go through our checklist for securing a WordPress site, checklist for making your site hacker-proof (with a downloadable PDF so you can tick off the boxes), and our guide to security resources for WordPress.

Also, check out our WordPress security expert interview (coming real soon!) for some great tips on what WordPress security experts do to keep their clients’ sites safe and protected from hackers and malicious threats.

As part of developing your security expertise, make sure to also become familiar with resources like our DDos protection guide and how to test your WordPress site security.

And if your site has been hacked, make sure to head over to this post and learn how to clean up a hacked WordPress site.

Use Defender for Smart WordPress Security

As stated earlier,

“There is a hacker attack every 39 seconds.”

If you don’t believe these statistics, you can confirm this yourself by installing our WordPress security plugin, Defender.

Defender sends out a notification and logs every time someone tries to hack your site.

Defender Lockout Notification
Hackers keep knocking, and Defender keeps blocking.

Defender blocks hackers at every level and adds layers of protection to your site. With just a few clicks, your WordPress site is protected from brute force attacks, SQL injections, cross-site scripting XSS, and many other WordPress vulnerabilities and hacks.

Defender also runs malware scans and antivirus scans and provides IP blocking, firewall, activity logs, security logs, and two-factor authentication login security.

And that’s just the free version of the plugin.

Check out our Defender WordPress security plugin tutorials to see everything that this plugin does and to learn how to easily configure it on your clients’ sites (tip: our WordPress management console The Hub makes it even easier and faster to install and configure Defender on multiple WordPress sites.)

3. Securing 95% of Vulnerabilities Against Hackers

As I stated earlier,

“95% of cybersecurity breaches are caused by human error.”

Choosing a super-secure web host is not a problem. (You can do this with one click here.)

Implementing internal security processes in your business takes some effort, but it’s also not a problem.

Hardening WordPress security…not a problem either. You can find everything you need to know to make WordPress impenetrable to hackers right here on this site.

The main challenge when it comes to preventing hackers is how to make sure people don’t make errors when “to err is human.”

If you can figure that one out, you’ll have protected your clients from 95% of all security vulnerabilities on the web and put hackers permanently out of a job. ;)

Until this happens, however, you’ll just need to be patient with people. Help them implement good security practices and develop better online safety habits, starting with basic things like password security, avoiding email phishing scams, etc.

Also, encourage your clients to implement good security policies in their workplace and train and educate them as best as you can on ways to become more aware of threats and how to reduce security risks.

Netflix Scam Email
All the WordPress security hardening in the world can’t stop hackers if your clients are falling for email phishing scams.

Remember that in the end, no matter what we do, we are all human and we are all going to make mistakes at some point or another.

Also, everyone in the world has problems. Addictions, resentments, job dissatisfaction, greed, opportunism, and disgruntled personalities can manifest at any time in the work environment and these can become a potential security threat too.

So, unless your clients are perfect human beings without problems, you’re still left with 95% of security vulnerabilities to deal with.

The Best You Can Do To Not Get Hacked

Web security threats are multidimensional and cybersecurity is an escalating arms race, so hackers will always have new opportunities to identify weaknesses and vulnerabilities on many levels.

The best you can do to not get hacked is to do your best.

Mitigate as many of the risks as you can, implement best security practices at every level, keep learning and improving your knowledge of web security, stay vigilant, and help your clients do the same.

If you need expert help with anything WordPress-related contact our 24/7 support team. We’re the good guys fighting on your side.

APIs in Less Than 5 Minutes With Strapi

This blog is originally published on InfraCloud blog. 

The evolution of CDN (Content Delivery Networks) and business need to scale multi-channel ways of interacting with the customer have made the traditional CMS obsolete. Organizations are using JAMstack to build responsive websites & CDN to deliver them where the customer is. With the evolution of the 5G and data-intensive applications such as AR, VR, drones, etc. new technologies will emerge that will deliver services closest to where the customer resides.

Netlify Edge Handlers

Some very cool news from Netlify: Edge Handlers are in Early Access (request it here). I think these couple of lines of code do a great job in explaining what an Edge Handler is:

export function onRequest(event) {
  console.log(`Incoming request for ${event.request.url}`);
  event.replaceResponse(() => fetch("https://www.netlify.com/"));
}

So that’s a little bitty bit of JavaScript that runs at “the edge” (at the CDN level) for every request through your site. In the case above, I’m totally replacing the response with an Ajax request for another URL. Weird! But cool. This has incredible power. I can replace the response with a slight-manipulated response. Say, change the headers. Or check who the logged-in user is, make a request for data on their behalf, and inject that data into the response. 🤯

So you might think of Jamstack as either pre-render or get data client-side. This is opening up a new door: build your response dynamically at the edge.

What’s nice about the Netlify approach is that the code that runs these sits right alongside the rest of your code in the repo itself, just like functions.


The post Netlify Edge Handlers appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.