Here are 8 ways that you can use to improve your site loading time.
There are main two types of images that most WordPress blogs contain: theme images and post images. Theme images are those images that are used in the theme. These can be the header images, the small bullet images you use for any list, the small icon beside the comment link and many more. If you are not the designer of your theme and you know nuts about coding, there is really nothing much that you can do. You can either live with it or change your current theme to one that uses lesser images. For those with some coding knowledge, you can use CSS Sprite to combine several images into one big image and use CSS background-position to shift the image around (more detail here).
Post images are images that you inserted into your posts to illustrate your points or to beautify the post. If possible, reduce the number of images used in the post (not more than 5). If your site is a tutorial blog that uses plenty of screenshots to get your points across (just like Make Tech Easier), the best way out is to optimize and compress the images before posting them in your site. Adobe Photoshop has this “Save for Web” function that you can use to optimize/compress your images easily. Most free image editors (such as GIMP) also provide you with the option to compress your images. Online tools such as online image optimizer and JPEGWizard are also great tools you can use to reduce the filesize of your images.
In addition, check out your existing list of active plugins and see if any of those have overlapping features with the latest version of WordPress. For example, prior to WP2.7, I used the Admin Management Xtended plugin to better manage all the administrative tasks. With the release of WP2.7, most of the features in the plugin are integrated into the software itself, which means I can now retire the plugin and free up the valuable resources.
You may also want to check out the WordPress plugin repository regularly for any other plugins that can do the same function as your existing plugins, but have better performance.
If your Web host can support compressed file, you can further improve your site loading time simply by checking the Enable Compression feature within the SuperCache option page. When this option is turned on, the static html will be compressed as a gzip file, making the filesize even smaller.
(Note that the compression feature might not work for everyone. Some have reported problems with different browsers. Please test it thoroughly before using it live)
Here is an example of how you can streamline your code. Log in to your Admin dashboard. Go to the theme editor section and load up the Header file. You should see something like this (without the color coding):
(Screenshot taken from classic theme header.php in a html editor. Depending on the theme that you are using, result may vary.)
Here is how I change some of the dynamic content (<?php …. ?> tag) into strings of text. Also, look how I have reduce the number of items in the header file.
By streamlining your theme, the site won’t have to keep going back to the server to query the database, thus the time taken to load will also be faster.
Download your .htaccess file from your server.
Add the following lines to the file:
PHP Speedy is a WordPress plugin that optimizes your site and reduces the loading time of all your pages greatly. What it does is to compress and minify all your CSS and javascript files, set expiration-header for CSS and JS file, streamline the html tag and cache it in the server for quick loading.
1. Reduce the number of images and image size in your site
Images take up a lot of bandwidth and can slow down the page’s loading time to a great extent. One of the best way to reduce loading time is to reduce the number of images in your site.There are main two types of images that most WordPress blogs contain: theme images and post images. Theme images are those images that are used in the theme. These can be the header images, the small bullet images you use for any list, the small icon beside the comment link and many more. If you are not the designer of your theme and you know nuts about coding, there is really nothing much that you can do. You can either live with it or change your current theme to one that uses lesser images. For those with some coding knowledge, you can use CSS Sprite to combine several images into one big image and use CSS background-position to shift the image around (more detail here).
Post images are images that you inserted into your posts to illustrate your points or to beautify the post. If possible, reduce the number of images used in the post (not more than 5). If your site is a tutorial blog that uses plenty of screenshots to get your points across (just like Make Tech Easier), the best way out is to optimize and compress the images before posting them in your site. Adobe Photoshop has this “Save for Web” function that you can use to optimize/compress your images easily. Most free image editors (such as GIMP) also provide you with the option to compress your images. Online tools such as online image optimizer and JPEGWizard are also great tools you can use to reduce the filesize of your images.
2. Split up long post into multiple short pages
If you are in the habit of writing long posts (more than 1500 words), it is best to split the post into several small pages. Not only does it leads to a faster loading page, it is also easier for your visitors to read and digest. In WordPress, you can easily split your post with the<!--nextpage--> tag. Read here for more detail.3. Upgrade to the latest version of WordPress and plugins
It is important that you update your WordPress and all your plugins to the latest version. The WordPress team is working hard to make sure that every release of WordPress has a better performance than the previous version. The only way for you to make use of their effort is to follow the development cycle closely and update whenever a newer version is available.4. Deactivate unused plugins
Most of the plugins introduce extra javascript and css file to your site and choke up your bandwidth. If you have no use for any of the plugins, make sure you deactivate them and get rid of those miscellaneous javascript and css. You’ll be surprised how much faster your site will load when these unused plugins are not around.In addition, check out your existing list of active plugins and see if any of those have overlapping features with the latest version of WordPress. For example, prior to WP2.7, I used the Admin Management Xtended plugin to better manage all the administrative tasks. With the release of WP2.7, most of the features in the plugin are integrated into the software itself, which means I can now retire the plugin and free up the valuable resources.
You may also want to check out the WordPress plugin repository regularly for any other plugins that can do the same function as your existing plugins, but have better performance.
5. Install WP-SuperCache
If there is one plugin that you must keep, it have to be WP-SuperCache. The SuperCache plugin caches your page as a static html file. When your visitors arrive at your site, they will be served the static page instead of the actual page.If your Web host can support compressed file, you can further improve your site loading time simply by checking the Enable Compression feature within the SuperCache option page. When this option is turned on, the static html will be compressed as a gzip file, making the filesize even smaller.
(Note that the compression feature might not work for everyone. Some have reported problems with different browsers. Please test it thoroughly before using it live)
6. Streamlining your theme
Your theme (especially header.php and footer.php) contains a lot of redundant dynamic content that can easily take up valuable server resources. You can easily streamline it to reduce the number of php and database queries.Here is an example of how you can streamline your code. Log in to your Admin dashboard. Go to the theme editor section and load up the Header file. You should see something like this (without the color coding):
(Screenshot taken from classic theme header.php in a html editor. Depending on the theme that you are using, result may vary.)
Here is how I change some of the dynamic content (<?php …. ?> tag) into strings of text. Also, look how I have reduce the number of items in the header file.
By streamlining your theme, the site won’t have to keep going back to the server to query the database, thus the time taken to load will also be faster.
7. Add Expires header to static resources
One of the great way to improve your site loading time is to add an Expires header to all your static resources (such as css file, javascript, images etc). An Expires header is a way to specify a time far enough in the future so that the clients (browsers) don’t have to re-fetch any static content. Here is an example of how you can add Expires header to all your images.Download your .htaccess file from your server.
Add the following lines to the file:
ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/png AA2592000
ExpiresByType image/jpg AA2592000
ExpiresByType image/jpeg AA2592000
The A2592000 means that the cache file will expire one month (in seconds) from the time the visitor first visits your site.ExpiresByType image/gif A2592000
ExpiresByType image/png AA2592000
ExpiresByType image/jpg AA2592000
ExpiresByType image/jpeg AA2592000
8. Install php_speedy
From the above, you can see that I did not mention anything about compressing and minify your CSS and javascript files. That is because php_speedy has all of them covered.PHP Speedy is a WordPress plugin that optimizes your site and reduces the loading time of all your pages greatly. What it does is to compress and minify all your CSS and javascript files, set expiration-header for CSS and JS file, streamline the html tag and cache it in the server for quick loading.
No comments:
Post a Comment