Archive for December 9th, 2014

Optimize WordPress Pictures with EWWW Image Optimizer, Async JS and CSS and Autoptimize for better Search Engine Ranking

Tuesday, December 9th, 2014

 


wordpress-ewww-image-optimizer_settings_screenshot-plugin-seo-for-images-wp_3

While optimizing picture performance with console tools optipng, jpegoptin, jpegtran, pngcrush (could save you a lot of server space and make pictures downloads faster (and hence increase your website responsiveness and SEO – check out), still for Blogs and WebSites based on WordPress its not worthy to loose time with console acrobatics but simply use EWWW Image Optimizer to Optimize all old or new uploaded Images.

To work EWWW Image Optimizer needs jpegtran, optipng, pngout and gifsicle to be installed on the Linux / BSD server. EWWW Image Optimizer can load the command line tools also from a Cloud, if a cloud service is running on the server. Once installed the plugin does scan all the imported WordPress Media files and can be run to optimize picture files on present blog psot / pages.

EWWW Image Opitimizer plugin does a good job in reducing file size on  NextGEN, GRAND FlAGallery galleries.

wordpress-ewww-image-optimizer_settings_screenshot-plugin-seo-for-images-wp

Here is how EWWW Image Optimizer works taken from plugin's website:
How are JPGs optimized?

Lossless optimization is done with the command jpegtran -copy all -optimize -progressive -outfile optimized-file original-file. Optionally, the -copy switch gets the 'none' parameter if you choose to strip metadata from your JPGs on the options page. Lossy optimization is done using the outstanding JPEGmini utility.
It is better if the server has not the jpegtran, pngout, gifsicle utilities installed as the plugin provides an uptodate static compiled Linux binaries.

How are PNGs optimized?

There are three parts (and all are optional). First, using the command pngquant original-file, then using the commands pngout-static -s2 original-file and optipng -o2 original-file. You can adjust the optimization levels for both tools on the settings page. Optipng is an automated derivative of pngcrush, which is another widely used png optimization utility.

How are GIFs optimized?

Using the command gifsicle -b -O3 –careful original file. This is particularly useful for animated GIFs, and can also streamline your color palette. That said, if your GIF is not animated, you should strongly consider converting it to a PNG. PNG files are almost always smaller, they just don't do animations. The following command would do this for you on a Linux system with imagemagickconvert somefile.gif somefile.png

wordpress-ewww-image-optimizer_settings_screenshot-plugin-seo-for-images-wp

Some othe plugins that could strenghten your WordPress Search Engine Optimization ranking worthy to check are:
 

  • Async JS and CSS
     

Most importantly plugin solves "Render-blocking JavaScript and CSS" warning shown during site audit with  Google Developers PageSpeed InsightBy the way Google PageSpeed Insight is a precious tool so I recommend you check if you already haven't, Google's suggestions could often double or triple daily site visitors 

What Async JS and CSS does is:

Converts render-blocking CSS and JS files into NON-render-blocking, improving performance of web page

async_js_and_css_wordpress-plugin_configuration_menu

The plugin makes ALL scripts loaded by other plugins to be loaded in asynchronous. All CSS files will be inserted inline into the document code or moved from the document beginning to the end, just before closing BODY tag (or just where you placed wp_foot() function). There are various methods to do that via plugin configuration page.
 

  • Autoptimize

     

     

     

    Wordpress-Autoptimize-screenshot-a-plugin-to-minify-wordpress-html-js-and-css-scripts

Autoptimize speeds up your website and helps you save bandwidth by aggregating and minimizing JS, CSS and HTML.

What does the plugin do to help speed up site?

It concatenates all scripts and styles, minifies and compresses them, adds expires headers, caches them, and moves styles to the page head, and scripts to the footer. It also minifies the HTML code itself, making your page really lightweight. Autoptimize is very much like WP Mnify (CSS / JS) minifaction WP plugin. The only difference and reason why you might want to use WP Mnify is it does HTML minification – something that WP Minify does not. Both plugins play nice together the only thing to be careful is not to configure CSS / JS minification in both Autoptimize and WP Minifyas this might slower instead of fasten the WP site.

A great bunch of other useful WP plugins to make a WordPress Blog friendly to Search Engines is here.