When we talk about WordPress optimization, a very important point is related to the loading speed of our web pages in order to make better user experience. As I have already mentioned this subject in many other pages and posts, and now I think, it is time to make a page dedicated to the subject applied for WordPress.
The optimization process that I will describe below should not be applied during all the days, weeks or months, but it can be done a few times during the course of a year. The optimization can be done either on the backend on the frontend, but on this page, we will discuss only the public side that is Frontend Optimization.
After loading our pages, if we check the source code generated by WordPress, we can understand that there are often loaded scripts that do not need absolutely by our visitors, but they add weight and loading time with them. This loading of futility is often caused by the loading of widgets or unused JavaScript, CSS or by the presence of the wrong code or broken links. To make up for these shortcomings it is necessary to comb through the code and figure out which of our pages are those files that are mistakenly loaded.
Data Compression
* Compressing CSS and JavaScript – Code Beautifier is an online tool that is used to obtain good results in the compression of CSS. It allows you to shorten the notations, reduce unnecessary text, combine selectors, compress the color codes and font properties, remove backslashes & new lines and discard invalid properties. For the compression of JavaScript, there are plenty of tools available such as Minify JavaScript , YUI Compressor , Dojo Compressor and JSCompress . Each compressor uses its algorithm, and then you just have to choose the one you like the best. If you do not want to perform these steps manually, there are plugins for WordPress that allow you to automate almost all these processes. In this regard, I can suggest some plugins like Web Optimizer (very well done, but to complete all the tasks you need the pro version – $99 – because with that free version you can make only a few operations) or Autoptimize plugin that is instead completely free. These plugins can pretty much do everything, which is necessary to speed up the loading of the frontend. That includes how to compress CSS and JS, combine all the CSS and JS files into one file, do site caching, compress HTML, images. These plugins can also optimize the installation of VPS and WordPress. There are other plugins that are able to individually compress the various files such as: Script Compressor – for JS and CSS, WP-JS – JS, WP-Minify – for JS and others like WP-HTML-Compression and GZippy .
Please note that the ‘ Using too many plugins can slow down your site compression instead of speed it up because of possible conflicts so make sure you only use a plugin for each type of compression.
Note: To improve performance you are looking to load the JavaScript at the bottom – after closing body tag and the CSS immediately after the opening head tag.
Note: If you can combine all your CSS code in a single file and all your JS code into a single file and then compressing them will get many advantages in terms of speed. The only downside of this procedure is to join JS file using jQuery and mootools together is that this will make them unusable.
* Compression of Images – Images are one of the factors that contribute in increasing size of web pages. There are basically two methods to compress images. The first method is to use your favorite image editor. The second one is to use Smush.it Yahoo. Smush.it is also available as a plugin for WordPress and allows you to save and load images automatically.
Note: The plugins that enable Gzip compression of CSS, JS, etc can be avoided if you have the ability to enable server-side of the Apache mod_deflate and then add to your httpd.conf or .htaccess the following code:
{Code type = php} AddOutputFilterByType DEFLATE text / plain AddOutputFilterByType DEFLATE text / xml AddOutputFilterByType DEFLATE application / xhtml + xml AddOutputFilterByType DEFLATE text / css AddOutputFilterByType DEFLATE application / xml AddOutputFilterByType DEFLATE image / svg + xml AddOutputFilterByType DEFLATE application / rss + xml AddOutputFilterByType DEFLATE application / atom_xml AddOutputFilterByType DEFLATE application / x-javascript AddOutputFilterByType DEFLATE application / x-httpd-php AddOutputFilterByType DEFLATE application / x-httpd-fastphp AddOutputFilterByType DEFLATE application / x-httpd-eruby AddOutputFilterByType DEFLATE text / html# Instructions necessary to prevent them from being compressed files are already compressed, such as images, video, pdf etc etcSetOutputFilter DEFLATE SetEnvIfNoCase REQUEST_URI \. (?: gif | jpe? g | png) $ no-gzip dont-Vary SetEnvIfNoCase REQUEST_URI \. (?: exe | t? gz | zip | bz2 | sit | rar) $ no-gzip dont -vary SetEnvIfNoCase REQUEST_URI \ .pdf $ no-gzip dont-Vary SetEnvIfNoCase REQUEST_URI \ .avi $ no-gzip dont-Vary SetEnvIfNoCase REQUEST_URI \ .mov $ no-gzip dont-Vary SetEnvIfNoCase REQUEST_URI \ .mp3 $ no-gzip dont-Vary SetEnvIfNoCase REQUEST_URI \ .mp4 $ no-gzip dont-Vary SetEnvIfNoCase REQUEST_URI \ .rm $ no-gzip dont-Vary# Instructions necessary for compatibility with older browsersBrowserMatch ^ Mozilla / 4 gzip-only-text / html BrowserMatch ^ Mozilla / 4 \ .0 [678] no-gzip BrowserMatch \ bMSIE! no-gzip! gzip-only-text / html {/ code}
Reducing Query PHP
If you do an analysis of the theme files that you use, you will find that much code is generated dynamically as the file path, the path of the CSS, the image path, the path of the RSS feed, posts, comments pages, the HTML encoding, the title of blog and its description and a lot more coding. Being able to replace this code with the real values makes it possible to spare the execution of many queries. The easiest way to do this replacement operation is to load the page, display the html code and copy it to a file. After copying this file to make a backup copy of your theme files and edit them by substituting the following values with the corresponding html page is loaded.
1. <? Php language_attributes (); ?> in the file header.php .
2. <? Php bloginfo (‘html_type’); ?> in the file header.php .
3. <? Php bloginfo (‘charset’); ?> in the file header.php .
4. <? Php bloginfo (‘name’); ?> is a bit ‘anywhere in your theme.
5. <Meta name = “generator” content = “WordPress <? Php bloginfo (‘version’); ?> “/> <! – Leave this for stats -> in header.php . This should also be removed to prevent anyone who knows our WP version.
6. <? Php bloginfo (‘stylesheet_url’); ?> in the file header.php .
7. <? Php bloginfo (‘rss2_url’); ?> in the file header.php , sidebar.php and footer.php . Be sure to manually change these fields if you decide to upgrade to FeedBurner after making these changes.
8. <? Php bloginfo (‘pingback_url’); ?> in the file header.php .
9. <? Php bloginfo (‘stylesheet_directory’); ?> is a bit ‘anywhere in your theme.
10. <? Php bloginfo (‘description’); ?> is a bit ‘anywhere in your theme.
11. <? Php bloginfo (‘comments_rss2_url’); ?> found in sidebar.php and footer.php .
12. <! – <? Php echo get_num_queries (); ?> Queries. <? Php timer_stop (1); ?> Seconds. -> in the file footer.php .
13. If you use the widgets, you can remove the code found in the file sidebar.php between the lines <? php / * widgetized sidebar, if you have the plugin installed. * / if (! function_exists (‘dynamic_sidebar’) ||! dynamic_sidebar ()):?> and <? php endif; ?>
The code contained between these lines of code is used only in the event that you do not use the widget. If you believe that, you will use more widgets there is no reason to leave this code.
Reduce the size of the pages
* Widgets remove unused or unneeded – Look closely at the widgets you use in your header and footer in your sidebar and ask yourself if you really need this widget and does they add value to your site. If the answer is no then this widget does is increase the size of your page and then eventually its speed.
* Reduce the number of comments displayed – If you have a popular website, it is easy to get a very high amount of comments and very often with avatars attached. For most users, the presence of a large number of comments can cause a big bottleneck and thus significantly slow down the page loading. Starting with version 2.7 of WordPress you can split the comments into multiple pages under Settings -> Discussion.
Caching Frontend
As mentioned above each time your site is loaded all the PHP code of the CMS is running would also be loaded. If you have a very good hosting plan this should not be a big deal, but if for any reason you are having to deal with a situation when simultaneously many visitors will come to your site and your server may not be able to easily handle this situation.
To avoid this problem you can use the caching mechanism we spoke to convert the output of PHP page in a static HTML file that can be served to visitors so much faster. A cache of your pages can be regenerated at hourly intervals and based on the frequency with which you update your website. With WordPress to apply this mechanism you can use plugins like W3 Total Cache , WP Super Cache and Hyper Cache only after checking that do not conflict with other plugins you already use.
CDN (Content Distribution / Delivery Network)
CDN is a technique that allows you to use the content of your site to different servers in various parts of the world, in order to distribute the load on your server in an equitable manner between servers and thereby allowing faster loading of your pages. One of the best services for money is definitely Amazon Cloudfront service with their S3 service. By using this service, you will be able to host all CSS, JS, Images, Video and Audio on the Amazon CDN with the ability to use special plugins like Simple Amazon S3 Upload Form or Amazon S3 for WordPress .
Load only when needed – Use Conditional Tags
The authors of plugins often have a bad habit to include JS and CSS header without including controls for loading them only on actual usage. In this way, each plugin on the plugin is loaded on each page, and this causes a dramatic slowdown in the page load. The methods that can be used are many and there are some complex and some are simple to use, but in all of them, you need a little ‘knowledge of the coding and then a bit of “tweaking”.
These operations even if they do not provide immediate results but they will surely help you in optimizing the speed of your site based on WordPress platform.
Go into the functions.php file of your theme and add this code:
{Code type = php} add_action (‘wp_print_scripts’, ‘my_deregister_javascript’, 100); my_deregister_javascript function () { wp_deregister_script (‘js-name-of-plugin’); }add_action (‘wp_print_styles’, ‘my_deregister_styles’, 100);my_deregister_styles function () { wp_deregister_style (‘css-name-of-plugin’); } {/ code}
And you will see the exception in a very simple CSS and JS specified. To improve this technique and apply it perfectly to your needs you can use the Conditional Tags WordPress .
Let me give you an example that I refer to one of the most usual Plugin Contact Form 7. This plugin includes all your pages in your CSS and JS. Obviously one of the most frequent use of the plugin is in questions on the page called “Contact Us”.
Assuming the scenario, why we need to take us around the CSS and JS of this plugin in every other page? Why not to make them loaded only on the page, where they are actually used?
Here is the solution by combining the above scripts with conditional tags:
{Code type = php} add_action (‘wp_print_scripts’, ‘my_deregister_javascript’, 100);my_deregister_javascript function () { if (! is_page (‘Contact’)) { wp_deregister_script (‘contact-form-7′); } }add_action (‘wp_print_styles’, ‘my_deregister_styles’, 100);my_deregister_styles function () { if (! is_page (‘Contact’)) { wp_deregister_style (‘contact-form-7′); } } {/ code}
With these small changes in code, you can improve your WordPress and load perfectly every file only where and when you want them to get loaded.
Suggestions
Regularly update your WordPress themes and plugins and choose carefully your hosting provider (if you know it is good for WordPress). In case, you have your own server then remember to update it regularly to avoid possible problems. If you have the chance to ask your hosting provider to enable or enable yourself Apache modules – and Expires Headers – and then add in your httpd.conf or .htaccess the following code is appropriately modified:
{Code type = php} Header unset Pragma FileETag None Header unset ETagHeader set Cache-Control “public” Header set Expires “Thu, 15 Apr 2010 20:00:00 GMT” Header unset Last-Modified Header set Cache-Control “max-age = 7200, must-revalidate”Header set Cache-Control “public” Header set Expires “Thu, April 15 2010 20:00:00 GMT” Header unset Last-Modified {/ code}
This will add to your site the deadline for files that do not need to be reloaded each time the browser refreshed and will allow the use of the cache and deadlines server side and also significantly speeds up your site in the eyes of Google and your users.
Blogger Comment