Top 10 Ways to Improve PageSpeed on WordPress Websites
2 Improve PageSpeed on WordPress websites with the best tips around the web!
WordPress is one of the most used CMSes around the world right now. More than 27% of the total websites are now built by WordPress. WordPress has made it ridiculously easy to create a blog within minutes. However, making WordPress faster has become a tough job. If you want to know the secrets to improve pagespeed on WordPress websites, you have come to the right place.
You can tinker with WordPress categories, tags, widgets, posts or pages either in localhost or in the live server. Nevertheless, if you need a higher ranking on Google and want to have good SEO then you must have to implement WordPress speed optimization techniques.
WordPress is a complete package when you know how to optimize it correctly. Check our coverage for the handpicked, best WordPress plugins to find out a curated list of some of the best WordPress Plugins. These plugins collectively help to improve pagespeed on WordPress.
Also, it is also very crucial to secure your website. (Check out WordPress Security Guide to learn more). WordPress has many advantages, but one of its cons is that WordPress often can feel slow and sluggish if not optimized properly.
Quick Navigation
This article will explore some of the best ways to improve pagespeed on WordPress websites, and we will also suggest the top 10 ways to improve pagespeed on WordPress websites.
Improving page speed can have drastically faster performance. Here are some of the before/after comparison after optimizing each site
Choose a Fast Hosting Provider
Choose a Safe and Fast Hosting Provider: Hosting providers play a crucial role to determine your WordPress website. Choose a hosting provider that supports SSD because SSDs can load websites much faster than regular spinning HDDs. This is one of your top priorities to improve pagespeed on WordPress
In comparison, SSD loads almost 2x faster than a traditional HDD.
Also, you must know that your hosting provider has a good reputation. You can face data loss if your hosting provider does not take backups in regular interval.
Kinsta.com is one of the most popular WordPress hosting providers who are obsessive about WordPress speed. You can give them a try.
Improve Pagespeed on WordPress: Minify JS CSS HTML
Combine JS, CSS and Minify HTML: You can optimize your website with various plugins. One such plugin is Autoptimize. Autoptimize can combine your Javascripts, CSS and also can minify HTML This effective means your page will have lower size. As we all know, if your page has the smaller size it will load faster.
If you do not know how these things work, then do not worry. Autoptimize provides a straightforward user interface to enable JS, HTML and CSS minifying.
Use Caching to Improve your WordPress Pagespeed
Caching is very important to maintain a fast loading website.
What is caching? Why caching is important?
Caching is a way of keeping data in storage to allow retrieval without having to request the data from the original source if that data will not change frequently.
A typical caching scenario is having a cached copy of a web page. That page doesn’t change every five minutes, so caching it locally on your computer saves time and bandwidth for you to re-display it if you hit reload in your browser.
Cache is generally much faster than loading from disk or having a server generate a page from scratch. We have covered the top 8 best caching plugins. You can use any of the cache plugins mentioned in the post. For example, if you prefer mod_rewrite cache, then WP Super Cache can help you to implement caching efficiently on your WordPress website.
Reduce HTTP Requests
When you add many different services, it sends HTTP requests to various sites. If you want to improve page loading time, you need to reduce HTTP requests as little as you can. For example, many social sharing plugins send many HTTP requests to implement sharing. These can significantly slow down your website.
On another instance, Facebook Comments takes a lot of time to load because the plugin loads Facebook comment using JS and sends many HTTP requests to Facebook. This can significantly slow down your website. You can significantly improve pagespeed on WordPress by reducing HTTP requests
Use a Content Delivery Network
Using a Content Delivery Network is a good idea to distribute the load. The concept of a content delivery network is that different providers place servers at various locations around the world. When you use a CDN, the request is served from the nearest server. This results in much faster loading time.
There are many CDN providers around the world. Such as,
If you are looking for a free CDN, then try Cloudflare. Cloudflare is a Content Delivery Network that also provides many useful features like DNS Manager, HTTP/2 with free SSL and more.
Remove Render Blocking Javascripts
What is render-blocking Javascript? Javascripts that are loaded in above the fold of a website is called render blocking javascript. Render blocking javascript can slow down your websites significantly.
Hence, the user experience gets much worse when users cannot load the most vital part of a website in minimal time. Often users get frustrated by slow loading time and simply closes the tab.
You should avoid and minimize the use of blocking JavaScript, especially external scripts that must be fetched before they can be executed. Scripts that are necessary to render page content can be inlined to avoid extra network requests, however the inlined content needs to be small and must execute quickly to deliver good performance. Scripts that are not critical to initial render should be made asynchronous or deferred until after the first render. Please keep in mind that for this to improve your loading time, you must also optimize CSS delivery.
One good way to remove render blocking javascript is to load the javascript in the footer. Then, the user will be able to see the website in an instant, and the javascript will load later. Win-win for both developers and users! Autoptimize can help you to reduce render blocking javascripts too.
Enable Gzip Compression/Brotli Compression
Gzip compression enables a compression on your website that the browser can quickly decompress. Gzip compression can significantly change your website loading time. For example, before gzip compression a website can be around 2MB, however, after gzip compression, it becomes around 500KB. Your site can load more than 50% faster by enabling gzip compression.
Most hosting companies have gzip compression by default.
Check GZIP Compression Tool
You can check if your website is already gzip compressed or not with https://checkgzipcompression.com.
If your hosting company does not support gzip, then add this code snippets to your .htaccess
Important: take a backup of your current .htaccess file so that you can always revert back if your server does not support it.
# Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent
Enable Brotli Compression with Cloudflare
Brotli is a next-generation compression technique which is better than gzip compression technique. You can use Cloudflare to enable Brotli compression.
According to research conducted by CertSimple:
- Compressed JS with Brotli is 14 percent smaller than compressed with Gzip.
- Compressed HTML files by Broti are 21 percent smaller than their Gzip equivalents.
- Compressed CSS files compressed by Brotli are 17 percent smaller than those compressed by Gzip.
Optimize Database
WordPress plugins often create many unnecessary tables on the database. That is why you need to optimize your database. You need to back up your database daily as mentioned in our WordPress Security Guide.
Check our coverage of 21 Best WordPress plugins where we have mentioned about WP-DBManager. The plugin can help you to optimize your WordPress database tables.
Use Optimized Images
If you upload a 5MB image directly to your WordPress website, your page will never load faster. That is why you need to optimize your images before uploading. It is also wise to resize big images before uploading.
- You should not upload any images larger than 1600px (width) on your WordPress website. There are many free image resizers. One such image resizer is PixResizer. You can use the software to resize your photos.
It is essential to compress images before uploading. There are numerous compression techniques. Our favorite is tinypng.org. This website intelligently compresses image size without compromising quality.
Do Not Use Many Google Fonts
People often load 3/4 Google fonts to show some basic content. This can affect your page loading time. Choose only the fonts that you need. Even better, do not use any web fonts if you want your website to be lightning fast.
Even if you want to use a web font, make sure to host the font on your own server and then load it on your website. This will ensure faster loading time.
Lazy Load Images
You can use Lazy Load to load the images once the user scrolls at the website. This will make sure you have a speedy loading time for your website. Images/media files usually take the most time to load. You can lazy load images to make sure your images load after the whole page has already loaded. This will assure a fast and responsive experience for your users.
You can enable lazy loading from Jetpack Settings
Bonus Tips
Choose a Fast Loading Theme
A fast loading theme is critical to a fast loading website. There are quite a few themes that are fast loading. You may need to measure loading time before choosing a theme permanently.
Use AMP for Mobile Visitors
You can make use of Google’s AMP platform to make sure mobile device users’ are having a great experience. Google AMP is an opensource project that enables the creation of websites that are consistently fast, beautiful and high-performing across devices and distribution platforms.
- Install Google AMP plugin on WordPress to enable Google AMP support on your website.
Wrapping on WordPress Speed Optimization
WordPress has been growing so fast that often it becomes clumsy, slow, less responsive. Having a great site speed is mandatory Since January 2018, Google has been using page speed as a metric to rank websites on mobile search.
The “Speed Update,” as we’re calling it, will only affect pages that deliver the slowest experience to users and will only affect a small percentage of queries. It applies the same standard to all pages, regardless of the technology used to build the page. The intent of the search query is still a very strong signal, so a slow page may still rank highly if it has great, relevant content.
So basically the summarized checklist looks like this
• Optimize all JPEG, PNG and GIF file sizes
• Delete unused theme thumbnails
• Scale images to sizes used in your website
• Enable browser caching
• Setup lazy image loading
• Stop wp-cron.php if not used
• Stop admin-ajax.php if not used
• Setup and configure cache plugin
• Setup and configure the Cloudflare CDN plugin
• Enable GZIP comparison for your website
• Define long expire dates for static files
• Minify Javascript and CSS files
• Block bad bots to crawl your website
• Enable image hotlink protection
• Check if the theme uses the best possible widget sizes
• Cleanup post revisions
• Turn off pingbacks and trackbacks
• Check if unused PHP is removed
If you have any questions regarding speed optimization technique, let us know via comments. Also, you can take a look at our WordPress Security Optimization Guide to secure your website from attacks, vulnerabilities.
Be sure to follow our beginner-friendly WordPress tutorials for more.
Disclosure: WP Hive earns a commission when you buy through partner links. It does not influence the unbiased opinions of our writers. Learn more →
Share:
https://wphive.com/seo/10-ways-to-speedup-your-wordpress-website/
Saif Hassan
Product Manager by passion & profession. Lead Product Manager at weDevs, former PM @ Poptin. Passionate about writing & tech. He's an advocate of Human-Centered Design and believes that websites and the tools used to build them should be well crafted, intuitive, and accessible. Cyclist. Reader. A WordPress ninja 🥷, HCI expert & a design thinker 💡
Email Subscription Request
2 replies on “Top 10 Ways to Improve PageSpeed on WordPress Websites”
What i found – the most important part as WP dev is to choose or write good theme without bloat. Then, everything is easier to manage.
Yes, it is. Choosing a good theme will give you a much-needed headstart.