WordPress Caching plugins comparison
How long does one assume you have got to create a sway on a web site visitor? Well, to grant you a plan, think about however long you may pay on a website’s home page once you land on that. The common time a visitor spends on a landing page is ten seconds before they attempt to continue or bounce. Ten seconds!
So out of that ten seconds, you don’t wish your web site to require up any longer time than is critical. You would like your web site to load as quickly as doable.
What will cause slow page speeds?
There are several things that may cause your WordPress web site to slow loading speeds. Over time, your web site speed will
Advertising Overload: guests don’t wish to see innumerable ads which is able to increase bounce rates and that they can even decrease load speed.
Plugins: These have the potential to significantly lower page load speeds. Employing a cache plugin will usually scale back your load speed times considerably, furthermore as reducing the number of plugins you’re victimization.
Hosting: it’s super necessary to decide on the correct hosting answer for your web site. Cheap shared hosting plans will harm your page speeds. Select a hosting supplier that values page speed and period of time.
Browser Optimization: You ought to be QA Tested on a range of browsers and mobile devices since they are doing not load your site within the same manner.
What is caching?
To begin with, allow us to take an instant to familiarize ourselves with the method of caching generally.
In straightforward terms, caching refers to the method of making static versions of your content, and serving that to guests. Static pages are usually rendered quickly in browsers. This ends up in the quicker performance of your web site.
In WordPress, rendering or winning a page needs back and forth queries to be sent to and from the information. Now, a lot of usually than not, you’ll produce a post or a page and so you won’t change it a day. Caching creates static copies of your post or page and serves that to guests. This way, the rear and forth queries to and from the information is avoided, thereby reducing the server load.
The importance of using caching plugins
There are varied advantages of caching in WordPress, such as:
First up, it enhances the speed and performance of your information processing system. Static cached files load faster than dynamic info queries, and this finally ends up in faster and better performance of your information processing system.
Caching may also facilitate cut back the load on your hosting server. This may save server memory and me/O operations. As a result, caching is quickly changing into a significant feature, particularly for folk with restricted hosting plans.
Faster websites don’t simply load quickly, however additionally get a positive rank with search engines. This, obviously, depends heavily on different metrics moreover, like the standard of your content and your SEO settings. However all different things being constant, a web site that hundreds quicker can getter a more robust PageRank than a slower one. Google has confirmed that it takes page speed into thought.
Cached websites offer for more robust user expertise overall. A quicker website helps user’s browsing higher. moreover, a cached website means the user’s information measure is additionally saved (albeit by a nominal margin) since static cached pages are less in terms of file size as compared to dynamic requests. To create this happen, your caching resolution should build use of combined and minified JavaScript and CSS, except for simple basic page caching.
Some of the best WP caching Plugins:
1. WP Rocket
WP Rocket is the preferred premium possibility in our comparison of the most effective WordPress caching plugins. It systematically scores well in side-by-side comparisons with different caching plugins for WordPress and is presently put in on over one hundred sites. Single-Site license prices $39, a three-site license $99, and a limitless license will be yours for $199.
According to GTmetrix, WP Rocket cut the loading time by zero.98 seconds, up the speed by thirty four.12%. In our Pingdom tests, it cut the loading time by one.27 seconds on the average, with a speed improvement of thirty-five .21%. These results create it the quickest plugin in our take a look at of the most effective WordPress caching tools.
2. WP Super Cache
Another extremely widespread free WordPress caching plugin, WP Super Cache earned its place in our guide to the simplest WordPress caching plugins because it has over 1,000,000 active installs and a user rating of 4.2 out of five stars. It’s particularly effective at keeping your server from speed to a crawl or maybe overloading throughout the massive traffic spikes that may occur if your web blog hits the homepage on Reddit or is featured on alternative widespread sites. WP Super Cache hampers the loading time by zero.85 seconds in GTmetrix, rising the speed by 28.07%. In our Pingdom tests, this plugin cut the load time by 1.03 seconds, raising the speed by 28.61%, creating it one among the quickest choices in our take a look at of the simplest WordPress caching plugins.
3. W3 Total Cache
W3 Total Cache is one in all the foremost fashionable caching plugins for WordPress, with over 1,000,000 active installs and 4.3 out of five stars within the WordPress Plugin Directory. It’s updated every few months and utilized by several major publications, like Smashing Magazine, Mashable, MakeUseOf, net Designer Depot, and lots of others. In our GTmetrix tests to search out the simplest WordPress caching plugins, W3 Total Cache smooth-shaven a mean of 0.62 seconds off the baseline loading time, with a mean improvement of 20.64% on page speed. In step with Pingdom, the plugin smooth-shaven a mean of one.06 seconds off the loading time, with a mean speed improvement of 29.16%.
W3 Total Cache Configure with Cloudflare
Pros and cons of WordPress cache plugin
There are some pros and cons of using cache plugins as follows:
Pros:
Faster loading time for your site
Improved SEO
Lower bounce rate
Increased sales
Cons:
Conflict with the WordPress theme or alternative plugins
Installation issues
Not displaying updates to your site
Security vulnerabilities
Setup a Cookieless domain for WordPress site
In speed optimization, Cookieless domain plays one of the vital roles for page speed. It is undoubtedly one of the most important warnings to fix. This warning shows in every speed test tools. Today we will see how can we fix this issue.
What is Cookie
At first let me tell you what is cookie. Cookies are little records which are stored on a client’s PC. They are intended to hold an unobtrusive measure of data to a specific customer and website can be accessed either by the web server or the customer PC.
How to setup a cookieless domain for WordPress site
There are four steps to setup a cookieless domain for a WordPress site. They are:
- Create a subdomain
- Point subdomain to wp-content
- Update your wp-config file
- Update existing post content
Create a subdomain
If you using Cpanel then the steps are below for subdomain creating:
- Log into the cPanel for your website. The address is usually www.website.com/cpanel, and the username and password would have been provided by your host when you first joined.
- Under ‘Domains‘, click on the icon for ‘Subdomains’
- In the ‘Create a subdomain’ box enter static
- Click on the ‘Create’ button and wait for confirmation that the subdomain has been created.
Point subdomain to wp-content
Now point the subdomain to the “/wp-content” directory of WordPress.
- In the ‘Subdomains‘ field and in the ‘Document Root’field enter the path to the wp-content folder, for example: /public_html/wp-content and click Create.
Update your wp-config file
Now open your wp-config.php file through cpanel or ftp and add these lines:
<?php
define(“WP_CONTENT_URL“,“http://static.yourwebsite.com“);
define(“COOKIE_DOMAIN“,“www.yourwebsite.com“);
?>
Note: Add your domain names accordingly.
Update existing post content
Before starting this step at first backup your DB. Now go to your Cpanel and follow these steps:
- Under ‘Databases’, click on the icon for ‘phpMyAdmin’
- Expand the database for the WordPress installation and click on the posts table
- Click on the ‘Inline’ link, then in the text box enter the following command
UPDATE wp_posts SET post_content = REPLACE(post_content,
'http://www.domainname.com/wp-content/uploads/','http://static.domainname.com/uploads/')
- Click ‘Go’ And it will solve your Use cookie-free domains warning.
Additional step if your theme uses font awesome icons
If you use font awsome icons you also need to do this step for Cookieless domain. For this:
- Open your .htaccess and add these lines:
## EXPIRES CACHING ##
# ------------------------------------------------------------------------------
# | CORS-enabled images |
# ------------------------------------------------------------------------------
<FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
SetEnvIf Origin ":" IS_CORS
Header set Access-Control-Allow-Origin "http://www.domainname.com" env=IS_CORS
</FilesMatch>
# ------------------------------------------------------------------------------
# | Web fonts access |
# ------------------------------------------------------------------------------
# Allow access from all domains for web fonts
<FilesMatch "\.(eot|otf|ttc|ttf|woff)$">
Header set Access-Control-Allow-Origin "http://www.domainname.com"
</FilesMatch>
If you do these steps successfully it will pass your Use cookie-free domains warning.
If you enjoyed this tutorial, then you’ll love our support. If you need anything relates to WordPress Speed Optimization please send us a message.
Avoid a Character Set in the Meta Tag
Avoid a Character Set in the Meta Tag warning is actually from Google Page Speed Insights for speed optimization. You can see this warning in GTMETRIX or Pingdom as well. Today we will deep dive into this issue.
What is Character Set
According to
What is a Meta Tag?
A meta tag describes about the content of the web page. It is an element of HTML. Meta tags can describe a webpage’s description, keywords, author of the document, last modified, and other metadata.
How to Avoid a Character Set in the Meta Tag?
There are several methods for defining a charset without using a meta tag. Depending on your web server. Such as:
Avoid a Character Set in the Meta Tag in Apache
For Apache Open your .htaccess then add the following line:
AddType 'text/html; charset=UTF-8' html
Avoid a Character Set in the Meta Tag in Nginx
For Nginx Open your nginx.conf then add the following line:
http {
include /etc/nginx/mime.types;
charset UTF-8;
...
}
This will solve your problem about Avoid a Character Set in the Meta Tag.
If you enjoyed this tutorial, then you’ll love our support. If you need anything relates to WordPress Speed Optimizationplease send us a message.
How to Fix “Specify a Vary: Accept-Encoding Header”
This kind of warning is very common in Speed Optimization. This is actually an HTTP header what is responses from the server to the browser. This warning shows if your server is not Vary header is not configured.
What is Specify a Vary: Accept-Encoding Header
When a browser makes a request, they include HTTP headers for the server to decide what server should response. The Vary header describes what information identifies inside of that HTTP header (what is the request). Caches should only be used if the request matches the Vary information in the cache.
Fix “Specify a Vary: Accept-Encoding Header” Warning
You can only fix the vary headers what is in your server. You cannot fix the 3rd party VARY HEADERS. Fixes of VARY headers depends on the servers. So it differs fixes between Apache and Nginx.
Fixing “Specify a Vary: Accept-Encoding Header” Warning in Apache
If you don’t have root access of your server open your .htaccess and add these following lines of codes:
<IfModule mod_headers.c>
<FilesMatch ".(js|css|xml|gz|html)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>
Fixing “Specify a Vary: Accept-Encoding Header” Warning in Nginx
To fix Specify a Vary: Accept-Encoding Header in Nginx you need to open
gzip_vary on
Using the Vary: Accept-Encoding header could decrease the speed of your WordPress site and it will ensure you are using gzip compression.
If you enjoyed this tutorial, then you’ll love our support. If you need anything relates to WordPress Speed Optimization please send us a message.
How to fix Configure entity tags (ETags)
Configure entity tags (ETags) is one of the most common issues for the speed fix of a website. In GTmetrix or Pingdom this error shows if your web server doesn’t configure Etags properly. In this post we will deep dive how to fix configure entity tags or ETags.
What is Entity tags (ETags)
Entity Tags (ETags) is a mechanism of HTTP for web cache validation. It provides a unique id what makes a conditional request to the web server from the browser. We don’t need all request of the web server if we visit the website regularly, by ETags mechanism browser requests to server-specific resources what doesn’t changed and Server sends back cache first then new resources. ETags actually collects data from the server’s cache and provides to the browser.
Advantages of ETags
- Better caching and faster load times
- Lower server load and used bandwidth
Disadvantages of ETags
- Slower load times and caching multiple times the same resource.
- Higher server load and used bandwidth
Methods for fixing Configure entity tags (ETags)
There are two methods for fixing configure entity tags (ETags). Such as:
- From Apache config
- From htaccess
Fix Configure entity tags (ETags) from Apache config
If you have root access of your server or SSH access then open your
httpd.conf. To open your httpd.conf navigate: /
<Directory /usr/local/httpd/htdocs>
FileETag MTime Size
</Directory>
Fix Configure entity tags (ETags) from htaccess
If you don’t have SSH access then you can fix configure entity tags (ETags) from
Header unset Etag
FileETag none
This will solve your Configure Entity Tags (ETags) problem. If you need any help relates to WordPress Speed Fix feel free to Contact us.
How to use GTmetrix Speed Test Tools
GTMETRIX is one of the well-known tools for speed test. It was built by GT.net based on Canada for their hosting customers to easily measuring the performance of their sites. It is one of the popular and most usable speed test tools after Pingdom and Google page speed insights. The reason it is one of the best speed
Testing with the GTmetrix Speed Test Tool
A web page is made with different elements. The root of the web page is HTML. To design the page uses CSS and for better UX uses Javascript. Every element generates requests to render what you see on your web page. So it means the more requests you have, the slower your web page. Today we are going to deep dive into GTmetrix Speed Test Tool’s each and every section and explain in detail what actually every section means. Remember do not obsess too much on speed scores, make some real improvements on the speed of your web page.
GTmetrix Summary
When you run tests on GTmetrix you get two individual kinds of stuff. One is Performance Scores and another is Page details. Performance Scores section contains PageSpeed Score and Yslow Score. Page details section contains Fully Loaded Time, Total Page Size and the number of requests you have on your website. In our example, we are using our case study domain wperrfix.com, which is hosted on HostGator. In our first speed test our fully loaded time was 458ms.
PageSpeed & YSlow
GTmetrix follows Google Page Insights and YSlow recommendations to give speed scores to your website. There are more than 25 rules. We will try to cover the most common and most popular ones. If you follow these rules for speed optimization of your website, you should able to see decreases of speed in overall load times.
Serve Scaled Images
When it comes about Image optimization of your website. You should always try and upload them and not let CSS resize them. If you don’t, you will end up with the serve scaled images recommendation. If you are using WordPress, by default, it resizes your images when uploading them to the media library. These settings can be found under “Settings > Media.” You will want to ensure that the max width is close to the width of your site.
Inline Small CSS
Inlining
For inlining your css you can do easily with Autoptimize.
Inline Small JavaScript
It’s the same as Inlining CSS. As I told you earlier it is not recommended to inline
Leverage Browser Caching
Leverage Browser Caching is one of the common recommendation for speed optimization. It only shows if you don’t have correct HTTP cache headers in your web server. T
You can only fix this on resources you control. For example, if you are seeing this on third-party ad networks, there is nothing you can do.
Defer Parsing of JavaScript
Defer Parsing of JavaScript is one the common recommendation where people struggle most. See our post to fix defer parsing of javascript.
Minify CSS, JAVASCRIPT and HTML
Minification of css, javascript and html is one of the essential things you need to do for speed optimization. To fix check out our in-depth post on How to Minify CSS, JAVASCRIPT and HTML.
Enable GZIP Compression
To enable GZIP compression in Apache, simply add the following code to your .htaccess file.
<IfModule mod_deflate.c>
# 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 no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>
If you are running on NGINX, simply add the following to your nginx.conf file.
gzip on;
gzip_disable "MSIE \.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;
Optimize Images
Images consumes a website’s speed around 90% according to HTTP archive. So you have to do the Image Optimization for speed.
Check our post about Image optimization for Optimizing Images.
Remove Query Strings From Static Resources
CSS files have the version at the end of the URLS; such as site.com/style.css?ver=4.6. Sometimes some proxy caching servers and CDN are unable to cache query strings even you have cache-control
YSlow
GTmetrix also uses YSlow to give your site a score. There are more than 15 rules. We will attempt to cover the most widely recognized and famous ones.
Add Expires Headers
To add the Expires header in Apache, simply add the following code to your .htaccess file.
## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 7 days"
</IfModule>
## EXPIRES HEADER CACHING ##
To add Expires headers in NGINX, simply add the following code to your config file.
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 7d;
}
Conclusion
As should be obvious, knowing how the GTmetrix speed test tool somewhat better and what every one of the diagrams means can enable you to settle on additional information-driven choice with regards to speed performance.
On the off chance that you might want to see more in-depth articles like the one above, it would be ideal if you told us underneath in the comments!
How to Fix the Leverage Browser Caching Warning in WordPress
If you check your website in page speed test tools such as Pingdom, Google Page insight’s Lighthouse or GTMETRIX you will probably get an error called Leverage Browser Caching or Add Expire Headers. Today we will deep dive into this warning Leverage Browser Caching and how it affects your wordpress website and how to fix this warning and speed up your website.
What is Leverage Browser Caching?
Leverage browser caching is a process where browser stores static resources locally through HTTP HEADER RESPONSE from the server. If you open any browser like Google Chrome, Mozila Firefox or any browser; clear history, cache and cookies now try to visit your website you will see it is loading slowly. Refresh your website it will load faster. Here is what will happen on the browser:
- The browser fetch all static resources like images, styles, scripts, etc. from the web server during first time loading of the site.
- When browser caching is enabled on the site for static resources then browser will follow the instruction from the server received through HTTP headers.
- Browser will store the static resources on local storage with the expiry date or the maximum age received from the server.
- If browser caching is not enabled on the site (expiry time is not set), then the browser will fetch the files every time it loads. This will increase the page load time as well as the load on the server.
- Expiry time should be specified for each file types like png, jpg, css. js, etc.
How to Fix Leverage Browser Caching Warning in WordPress?
I always recommend to do this by manually. For fixing manually it depends on servers. If you are using Nginx there is a method and if you are using Apache server there is another method. I will show you both of them.
Adding Cache-Control Header in Nginx
You can add Cache-Control headers in Nginx by adding the following lines to your server config’s server location or block.
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}
Adding Expires Headers in Nginx
You can add Expires headers in Nginx by adding the following lines to your server block.
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}
Adding Cache-Control Headers in Apache
Add Cache-Control headers in Apache by adding the following to your .htaccess file. Snippets of code can be added at the top or bottom of the file (before # BEGIN WordPress or after # END WordPress).
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>
Adding Expires Headers in Apache
## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##
What About Other 3rd Party Scripts?
It is a little bit tricky to fix leverage browser caching for 3rd party scripts. Most of the people says it is impossible but I found a way by that method I made it workable.
First of all, you need to download the script that you’re running. I will be using Google Analytics as an example (this appears to be the most problematic script people complain about, but you can replicate this for any external scripts).
Look in your code and find the name of the script, in our case it is: google-analytics.com/ga.js. Pop this URL into your web browser and it will bring up the source code. Simply make a copy of it and save it as ga.js.
Save this newly created JavaScript file onto your webserver, in my case:
- JS
- ga.js
Next you will need to update the code on the pages that are calling your script and just change the directory that is calling the JavaScript file. Once again in our case, we will be changing this line:
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
to
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.yoursite.com/js/ga.js';
At this point, your site will now run the script from your website locally! However, this means the script will never update. Unless you re-run this short process every week. That is up to you.. but I’m far too lazy for that.
Summary
Now you must have some methods for fixing Leverage Browser Caching. After Leverage browser caching your page speed will decrease and this will solve a lot of problem in future of your website. If you looking more article about speed optimization check our blog.
How To Do Web Font Optimization in WordPress
Web fonts are one of the main part of modern web design. It is being used almost every wordpress website. Optimizing web fonts are so important otherwise it will slow down your website drastically. Web fonts are popular because of several reasons. Such as:
- Designers like web fonts because it improves UX magically.
- Web fonts render more effectively than web safe fonts in range of device sizes and resolution.
In this article we will know about web fonts and how to optimize them in WordPress.
What is web fonts?
There are two types of web fonts.
- Web-safe Fonts : These fonts are pre-installed fonts in devices. Like Times New Roman, Arial and sens-serif.
- Web Fonts : These fonts are not pre-installed in devices. These fonts must be downloaded by the browser before displaying on the web page.
There is also some other types of web fonts and their extensions are:
- TrueType Font (TTF) – Compatible with Internet Explorer version 9.0 and above, Chrome starting at 4.0, Firefox at 3.5, Safari since 3.1 and Opera beginning with 10.0
- OpenType Font (OTF) – Has the same browser compatibility as the TrueType Font
- Web Open Font Format (WOFF) – Supported by Internet Explorer version 9.0 and above, Chrome starting at 5.0, Firefox at 3.6, Safari since 5.1 and Opera beginning with 11.1
- Web Open Font Format 2.0 (WOFF2) – Supported only by Chrome since version 36.0, Firefox starting at 35.0 and Opera with 26.0
- Embedded OpenType Font (EOT) – Exclusively available for Internet Explorer version 6.0 and above.
Hosting and Delivering Web Fonts
When you select a web fonts it must be stored in somewhere. For hosting web fonts there are two methods:
- Self-Hosted : Hosting the web font in your server directly.
- Third Party Hosted : Web fonts hosted by a font service such as google fonts.
Each methods has advantages and disadvantages. If you use third party hosted web fonts then you have no control of performance and security. Though it is easier to set up third party hosted web fonts. Even if their server crushes you won’t be able to use that font. In 2015 TypeKit Server Crushed and so many website forced to use Arial and Georgia.
Optimization of Web fonts in WordPress
Optimizing web fonts is a complex topic. There is several ways for optimization of web fonts . What method that suits your website best will depend on a different of factors including the speed of your server and network.
Optimizing Google Fonts in WordPress
If you want to add Google Fonts in your wordpress website it is so easy to add. Or if you already have google fonts then what you can do to optimize it? This a very big question. Cause you don’t have access to google’s server, you cannot modify the font’s performance and other stuffs. Then how?
There is a beautiful plugin what makes our task so easier. The plugin is : Self Hosted Google fonts. You can use any google fonts as you like.
Optimizing custom Web Fonts in WordPress
Another thing is if you don’t want to use google fonts you want to use your custom font then you have to upload that in your server. To do this:
- Login to your cpanel
- Upload your font in a directory
Now it’s time to add the custom font in your theme. To do this:
- Open your theme’s style.css
- Copy and paste the following code into the file, where fonts are referenced. Make sure there is a line break in between each block of CSS and the code you enter.
@font-face {
font-family: FontName;
src: url(public_html/your-site/wp-content/themes/your-theme/fonts/FontName-Regular.ttf);
font-weight: normal;
}
Add the same CSS code additional times to define bold, italicized, header text and the like, keeping sure you update the file name and path to reflect the purpose of the font.
Conclusion
I told you before web font optimization is a huge complex topic. Though I made it simple. There are several methods you could implement for better deliver of your fonts.
Here are some additional webfont optimization resources.
- Web Font Optimization – Google Web Fundamentals
- Webfont Options and Speed – varvy.com
- Web Font Optimization – NerdWallet
How to Optimize Multipurpose WordPress Theme
There is so many rumors about multipurpose theme speed optimization. Some say it will slow down your website some say it is impossible to optimize speeds for multi-purpose themes. But all are fake. Today we will show how to actually optimize a multipurpose theme.
What is a Multipurpose WordPress theme?
Multipurpose theme defines that it can be used in any kind niche or categories such as it could be a band, shop, law firm or any kind of organizations. Multipurpose themes comes with basic features that needs any kind of websites. Such as:
- Responsiveness
- WPML compatibility
- Child theme compatibility.
- RTL supports.
- SEO optimized, cross-browser compatible, and fully responsive for mobile-first indexing.
- Pre-built styled demos with XML demo data to get you up and started fast.
- Compatible with all popular WordPress plugins such as Yoast SEO
and much more.
Optimizing a Multipurpose WordPress Theme
Recently we did a speed optimization for a client website. Who had a multipurpose theme named: “Total“. So today we will optimize a website using “Total WordPress Theme” which is a multipurpose theme.
At very first we ran 6 tests on pingdom. Check the screenshot what we got:
So we can see there is several problems. To fix these issues I divided into several steps which is down below:
Step 1 – Disable Embeds
At first we need to disable embeds. If you don’t have auto embeds you need to disable embeds.
As you can see in the screen shot there is a file called wp-embed.min.js. This wp embed js file generates additional http requests and loads every single page of your website and slower your website. To disable embeds we can use a plugin or we can do manually.
- Disable embeds manually : Open your function.php and add these lines:
function disable_embeds_code_init() {
// Remove the REST API endpoint.
remove_action( 'rest_api_init', 'wp_oembed_register_route' );
// Turn off oEmbed auto discovery.
add_filter( 'embed_oembed_discover', '__return_false' );
// Don't filter oEmbed results.
remove_filter( 'oembed_dataparse', 'wp_filter_oembed_result', 10 );
// Remove oEmbed discovery links.
remove_action( 'wp_head', 'wp_oembed_add_discovery_links' );
// Remove oEmbed-specific JavaScript from the front-end and back-end.
remove_action( 'wp_head', 'wp_oembed_add_host_js' );
add_filter( 'tiny_mce_plugins', 'disable_embeds_tiny_mce_plugin' );
// Remove all embeds rewrite rules.
add_filter( 'rewrite_rules_array', 'disable_embeds_rewrites' );
// Remove filter of the oEmbed result before any HTTP requests are made.
remove_filter( 'pre_oembed_result', 'wp_filter_pre_oembed_result', 10 );
}
add_action( 'init', 'disable_embeds_code_init', 9999 );
function disable_embeds_tiny_mce_plugin($plugins) {
return array_diff($plugins, array('wpembed'));
}
function disable_embeds_rewrites($rules) {
foreach($rules as $rule => $rewrite) {
if(false !== strpos($rewrite, 'embed=true')) {
unset($rules);
}
}
return $rules;
}
- Disable embeds using Plugin: Simply install Disable Embeds from wordpress.org
Step 2 – Remove Query Strings From URLS
This another common issues with every wordpress website for speed optimization. To do this check Remove Query Strings.
After Removing Query Strings from URLs we ran another 6 tests on pingdom and look what we got:
Step 3 – Image Optimization
Then we did image optimization for that multipurpose theme. We use several techniques for image optimization. Check our Image Optimization article for those techniques.
Step 4 – Disable Unnecessary Scripts on Homepage
Another effective way for speed optimization disable unnecessary scripts on homepage. To do this we added a free plugin WordPress Assets manager, dequeue scripts, dequeue styles. Then visit every page and disable unnecessary stylesheets and scripts.
Step 5 – Optimize Slider Revolution Speed
Most of the wordpress user uses slider in their website. In total wordpress theme there is also revolution slider. We turne on both the “Insert JavaScript Into Footer” and “Defer JavaScript Loading” options.
Step 6 – Minify HTML, CSS, JS and enable cache plugin
Now it’s time to minify css and js of the theme. To do this check our article
How To Minify CSS and JS For Speed Optimization In WordPress
After minifying CSS and JS add a caching plugin. We recommend Autoptimise and w3 total cache
Summary
This is the final result after optimization. We ran 6 tests on pingdom after this and the result remain same.
If you need speed optimization for any multipurpose theme such as avada, the7, bridge and etc please let us know
How to Remove Query Strings From Static Resources in WordPress
In wordpress speed optimization remove query strings from static resources has became a big question mark. I have seen too many people is complaining about this. CSS files has the version at the end of the URLS; such as site.com/style.css?ver=4.6. Sometimes some proxy caching servers and CDN are unable to cache query strings even you have cache-control:public header.
So Removing query strings from static resources is important in caching issues. You also can see this in Pingdom and GTMETRIX.
Remove Query Strings From Static Resources
There are two ways to fix Remove Query Strings From Static Resources. One is with a WordPress plugin and another is with code. If you are using CDN you might don’t need this. But as I told you sometimes some servers and proxy servers are unable to cache query strings. So you need to check this first that your cdn is caching this properly. Otherwise follow next sections.
- Remove Query String From Static Resources With Plugin
- Remove Query String From Static Resources With Code
1. Remove Query Strings From Static Resources With Plugin
There are several plugins you can find out in the wordpress.org. But I am going to show you a specific plugin with what I did very easily and it works like magic.
The Plugin is: Remove Query Strings From Static Resources
As you can see this plugin has 10,000+ active installs and they are doing really good work for the open source communities.
Before I installed the plugin here is an example of query strings:
After installing this plugin here is an example :
All you have to do just install and active this plugin rest of the things will be taken care by the plugin automatically.
2. Remove Query Strings From Static Resources With Code
Sometimes people doesn’t want to use plugins. Cause they think plugin can increase his site weight. Yes It is true. So here is a method you can do manually for Remove Query Strings From Static Resources.
- Open your theme’s function.php
- Add these lines for Remove Query Strings From Static Resources
function _remove_script_version( $src ){
$parts = explode( '?', $src );
return $parts;
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );
Note: Editing the source code of a WordPress theme could break your site if not done correctly. If you are not comfortable doing this, please check with a developer first.
If everything goes right then you will have something like this:
If you learn from this tutorial then you will surely enjoy our speed optimization blog We are a team of wordpress error fixers with speed optimization expertise. If you need any help comment.