Preload key requests Fonts in Pagespeed Insights Resolve

“Consider using <link rel=preload> to prioritize fetching resources that are currently requested later in page load. …fonts/generatepress.woff2” in Google Pagespeed Insights

To resolve the Preload key requests Fonts in Pagespeed Insights  all you need is to add

preload tag below in theme header and it resolve the issue

<link rel=”preload” href=”/wp-content/themes/generatepress/fonts/generatepress.woff2″ as=”font” type=”font/woff2″ crossorigin>

That’s it now Fonts Preload key requests issue is resolved. Feel free to ask in case of any query.

Swift Performance Plugin Discount Coupon Code

Get WordPress Swift performance plugin discount coupon code which will save you some bucks.

Use this link for the Swift plugin Coupon Code.

Benefits of Swift performance plugin:

Swift WordPress plugin helps you to make your website faster by smartly caching your WordPress sites.

Images missing after SSL in WordPress – Blame plugin Really Simple SSL

If images are not coming in your wordpress website after SSL installation on your website there are high chances that you have enabled the plugin Really Simple SSL which has caused the issue.

Sometime Really simple ssl also causes redirection issue and in that case you need to delete the plugin FROM the cPanel and make changes in the database manually(check for table name wp_options in your database and change the website name from https://yourdomain.com to http://yourdomain.com in BOTH site_url and home row in wp_options table.

after removing the plugin from the backend (you will find the plugin in wp-content/plugin folder) you might laso need to delete it after loggin into your website and deleting the plugin.

Fix inline small css in GTMetrix

To fix inline small css in GTMetrix for a WordPress or any other website all you need to do is either use plugin such as Autoptmize or any other css/js compression plugin which compresses the css and make it inline which in effect will resolve the inline small css issue in GTMetrix.

Resolve Google Map Leverage browser caching Issue in Google Pagespeed Insights

To Resolve Google Map Leverage browser caching Issue in Google Pagespeed Insights you need to use a plugin to show the Google map instead of directly embedding it in the website.

1. Download the plugin from WordPress one such plugin is https://wordpress.org/plugins/wp-google-maps/.
2. Google need API key which you can generate from here https://developers.google.com/maps/documentation/javascript/get-api-key and input in the plugin when asked.
3. create the Google map and add the generated shortcode.
4. done.

 

……………………………………………………………………………………………….

https://www.google.com/maps/vt?pb=!1m5!1m4!1i13!2i2276!3i3084!4i256!2m3!1e0!2sm!3i395091919!2m31!1e2!2sspotlight!5i1!8m27!

1m2!12m1!20e1!2m7!1s0x88348cbeadb0e735%3A0xf3ef67b040d2eb72!2s635+Sangree+Rd%2C+Pittsburgh%2C+PA+15237!

4m2!3d40.5395846!4d-79.9914764!5e0!6b1!11e11!13m

11!2sa!14b1!18m4!5b0!6b0!8b0!9b1!22m3!6e2!7e3!8e2!19u14!19u20!19u42!3m14!2sen-US!3sUS!5e289!

12m4!1e52!2m2!1sentity_class!2s0!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!4e0&token=39402

 

https://maps.googleapis.com/maps/api/js?client=google-maps-embed&paint_origin=&libraries=geometry,search&v=3.exp&language=en_US&region=us

WordPress move jquery to footer to resolve for Render Blocking

If facing render blocking due to WordPress default jquery wp-includes/js/jquery/jquery.js you need to move the script to footer and to do that add the following codes in the themes functions.php file.

Code for WordPress  to move jquery to footer

function starter_scripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', includes_url( '/js/jquery/jquery.js' ), false, NULL, true );
    wp_enqueue_script( 'jquery' );

    wp_enqueue_style( 'starter-style', get_stylesheet_uri() );
    wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'starter_scripts' );

 

Now you jquery script in WordPress blog will be in footer and hopefully will resolve the render blocking issues in Google pagespeed insights.

Remove Open Sans Google font from WordPress

To remove the Googlefont family=Open+Sans:700&subset=latin coming from WordPress you need to

1. Add the plugin above the fold Optimization.
2. In the css tab enable “optimize web fonts”
3. In the remove list option type “Open Sans”
4. Done.

Cloudflare ssl error showing “ERR_CERT_AUTHORITY_INVALID”

I am trying to add CloudFlare free ssl on dedicated server based(WHM). I am getting warning in Chrome “ERR_CERT_AUTHORITY_INVALID”.
cloudflare ssl error
1. I have updated the Name Server(almost 24 hours ago) and Cloudflare is showing This website is active on Cloudflare.
2. Even Page Rules is not working on CloudFlare.
3. Checking the website on whatsmydns.net shows CloudFlare IPs.

Solutions:

 

1. check if autossl is enabled in WHM, disable and try again
2. Add CloudFlare ssl in the cpanel  generate the cloudflare ssl and add in the cPanel.
3. If you  are on dedicated hosting in WHM make the CloudFlare SSL primary.
4. Check Chrome again.

 

Resolve MAXCDN not showing WebFonts

The reason for MAXCDN not showing WebFonts is not it is missing  “Access-Control-Allow-Origin” in the header and because when using Webfonts via @font-face or other CSS3 methods, some browsers like Firefox and IE will refuse to embed the font when it’s coming from a 3rd party URL because it’s a security risk.

# CORS-enabled images (@crossorigin)
# ———————————————————————-
# Send CORS headers if browsers request them; enabled by default for images.
# developer.mozilla.org/en/CORS_Enabled_Image
# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
# wiki.mozilla.org/Security/Reviews/crossoriginAttribute

# mod_headers, y u no match by Content-Type?!
<FilesMatch “\.(gif|png|jpe?g|svg|svgz|ico|webp)$”>
SetEnvIf Origin “:” IS_CORS
Header set Access-Control-Allow-Origin “*” env=IS_CORS

</IfModule
</IfModule
# ———————————————————————-
# Webfont access
# ———————————————————————-
# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like “subdomain.example.com”.

<FilesMatch “\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$”>
Header set Access-Control-Allow-Origin “*”

</IfModule

https :// www. maxcdn .com/one/tutorial/how-to-use-cdn-with-webfonts/

css js gzip compression not working

1. If css js gzip compression not working you need to check if the Apache server getting javascript as application/javascript or as text/javascript. You might need to contact the host regarding this to resolve the issue.
2. Also check for possibility that your website is running on Nginx server and it has disabled the gzip compression for traffic coming on https version of the website as sometime Gzip for SSL requests is blocked by Nginx server.