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

Advertisements

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 hopelly will resolve the render blocking issues in Google pagespeed insights.

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.cloudflare-ssl

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/