css:

How to Speed up WordPress

When you’ve built a WordPress blog, an important aspect of maintaining that blog is to keep it as fast as possible for your readers otherwise they will leave your site very quickly.

If you find that your blog is performing slower than you would like, there are many ways to speed up your WordPress site. It’s important to note that some of these suggestions will only provide a slight boost in speed, while others will deliver noticeable improvements.I hope to provide an in-depth guide that will show you exactly how to speed up your WordPress blog.

Build a Strong Foundation

The first part of running a fast WordPress blog is to make sure that you are working with the right tools. So first make sure that your themes, plugins and WordPress version is all updated to the most recent stable release, not only is this a good idea for performance but also for blog security too.

Next it might be time to look at upgrading your web host from a shared hosting environment. Shared hosting is good for small blogs with only a few thousand visitors per month but it might be time to look at something better. For example Blue Host now offers specialist WordPress hosting environments which are a lot faster or for a little more investment you can sign up with a managed WordPress hosting provider such as WP Engine.

Locate Any Plugins That Are Causing Slowdowns

Plugins can be some of the biggest culprits when it comes to slow loading pages that frustrate users. While each of the plugins you have installed at the moment may be necessary to the blog, it’s still important to identify which ones may be causing some slowdown, if any at all, in order to ascertain what you should do in the future regarding these plugins.

Using diagnostic plugins like P3 will actually provide you with a detailed breakdown of all of the plugins you have running and the amount of slowdown that each are causing for your website. If social-sharing plugins are the reason for some of the slowdown, you might want to consider removing these plugins and instead embed buttons for the respective social websites directly into the source code for your theme. There are also times when you can simply choose to replace one plugin for another, less demanding one.

Compress All Images

Compressing the images you’ve placed onto your nlog is also useful in cutting down page load times ever so slightly. However, simply compressing them down can also bring about a huge loss of quality in the pictures themselves. Using a tool like WP Smush.it will take out all of the bytes within the pictures that are deemed to be dispensable while still retaining the overall quality of the image. This will ensure that your images are never large enough to hamper the speeds of your site.

Remove Trash From the Database

While the autosave feature that is included with WordPress is certainly a nice feature to have, it also fills up your database with tons of data you simply don’t need, which can create slowdown for your site. This data includes all of the pingbacks, trackbacks and revisions made throughout the day. Thankfully, there are two methods of dumping this trash and freeing up a good amount of space that will make page load times quicker. For one, you could implement the WP-Optimize plugin into your WordPress, which will clean up the trash within your database on a regular and consistent basis. This ensures that only the essential website data is kept stored in the database. When you are getting ready to do this, make sure to create a back up of your most important data should anything go wrong during the procedure.

It’s also possible to directly set your WordPress to empty the trash itself on a daily basis by adding the line define(‘EMPTY_TRASH_DAYS’, 10 ); to the wp-config.php file. This allows you to manually set the number of days between each trash removal.

Utilize Browser Caching

Browser caching is an exceedingly useful trick to speeding up your WordPress, though it can be more difficult to implement than most of the tips mentioned here. Browser caching makes visiting your website speedier for customers that have already visited in the past. Expires headers are designed to tell a browser if it should take a web page from the browser’s cache. The pages stored within the cache allows the user to more quickly load the pages they’ve been to in the past, as there is already a cached version of that page within the browser. While this, of course, doesn’t work for people that have never visited before, it’s a nice tool that will keep return customers happy.

There are a number of useful and highly rated tools that you can use for browser caching, which include WP Super Cache and Hyper Cache. Each of these are easy to use for your caching needs. However, it’s essential that you install them correctly, as not doing so can make for a frustrating experience.

Place JavaScript on Bottom and CSS to Top

css-top-javacsript-bottom

Placing JavaScript and CSS at the correct areas on the pages of your website can work wonders in actually speeding it up. When it comes to CSS files, make sure to put them as close as you can to the top of the page. Though this might seem like an odd thing to do, it’s important to note that browsers won’t fully load a page until the CSS file has been fully rendered. Putting it at the top of the page helps to expedite this process as much as possible. As for JavaScript, placing it at the very bottom of the footer is the best course of action, as this typically doesn’t allow portions of a page to be parsed until after the JavaScript has been completely loaded. By doing this, there won’t be anything left to parse after the JavaScript has loaded. Both of these suggestions help to create the correct order for loading a page that will automatically improve the loading speed of that page.

Use Static HTML in the Place of PHP at Times

Static HTML and PHP should be used hand in hand throughout your WordPress site. PHP, in particular, helps to make a website more efficient and greatly minimizes the necessity of entering information a multitude of times. Despite this advantage, PHP also uses up a larger amount of server resources than static HTML. As such, you’ll want to replace the PHP with HTML code in the spots around your website where you don’t necessarily need PHP as much. While this won’t drastically reduce load times, it can help to create a reduction in speeds when combined with a few of these other tips and tools.

Remove Any Inactive Plugins

In relation to a previous tip about detecting the plugins that slow down your site the most, a great and simple means of speeding up your WordPress is by removing any plugins that are currently inactive. While WordPress plugins can be extremely appealing, particularly new ones that pop up all the time, keeping a website as quick as possible requires trimming some of the excess that has a penchant to slow pages down. Make sure to identify all of the plugins that aren’t really necessary for your website and remove them entirely. This requires more than just pressing the deactivation button, as this will still take up much needed space, which can be bothersome if you don’t have much space to spare. Once you have identified all of the plugins that you don’t need, delete them completely from your website. Depending on the amount of plugins that you end up cutting, this could improve speeds dramatically.

Try Hosting Video Externally

Unless you fall under the rare situation of actually having a ton of space and an extremely quick server, it’s highly disadvantageous to host videos directly on your own WordPress, as this can cause a huge slow down on the pages associated with the videos. Hosting the videos you make and use on your WordPress with sites like Youtube and Vimeo can help to keep your site speeds fast for all customers. This is particularly important for anyone that posts a stray video here or there. Unless your website is basically dedicated towards posting lots of videos on a regular basis, hosting externally is the preferred method of video hosting.

Compress CSS Code

You should also attempt to compress your CSS code as much as possible, similar to what you would do when compressing an image. Making the code smaller will allow your browser to basically render the code faster, thus reducing the amount of time it takes for the code and subsequent page to load. The great thing about compressing your CSS code is that there are multiple options available for doing so. For instance, it’s possible to use a service known as a CSS Drive in order to compress the code manually. However, if you make changes to the CSS code on a consistent basis, then it’s much more preferable to use the WP CSS plugin, which is designed to automatically reduce the size of your CSS files by eliminating any of the unnecessary white space contained within. With this tool, you are also provided with the ability to set an expiry time for these CSS files.

Get Rid of Pingbacks and Trackbacks

disabletrackbacks

If you’re not currently fully aware, pingbacks and trackbacks are two tools within WordPress that are designed to notify you when another blog or website has linked to your own. This helps to calculate any potential increases you could have in traffic to your site. While interesting and potentially useful at times, these features of WordPress can also be exceedingly taxing on the overall speed of your pages. As such, it’s best to go ahead and turn these notifications off. In order to properly do this, go to the “settings” section of your WordPress and further select the “Discussion” tab. Once you have arrived at that location, turn these two features to off.

Use the Keep Alive Feature

Keep Alive is a feature that sends a message from a visitor’s machine to the Web server as a means of asking permission to download a specific file. By allowing the Keep Alive feature to run in your WordPress, the visitor will be able to download a multitude of files without having to go through the permission process each and every time. This can save you a lot of bandwidth. To manually do this yourself, place the text Header set Connection keep alive into the file titled .htaccess.

By following each of these tips and recommendations, you will find that your page speed has been improved by a lot in next to no time. All of the aforementioned tips are relatively easy to implement and you will be surprised at what they can do for the amount of website traffic you receive now and in the future.

CSS: visibility:hidden und display:none

Es gibt zwei Unterschiede zwischen den Deklarationen visibility:hidden; und display:none;.

Display:none; bewirkt, dass die so deklarierte Box überhaupt nicht generiert wird und der Browser die Seite so aufbaut, als wenn diese Box nicht vorhanden wäre.

Durch visibility:hidden; dagegen wird die Box samt Inhalt nur ‚durchsichtig‘, ihre Fläche bleibt freigestellt.

Der zweite Unterschied bezieht sich auf die Nachkommenelemente. Kindelemente eines mit display:none deklarierten Elementes können nicht ausgegeben werden, auch dann nicht, wenn sie anders als mit none deklariert werden. Nachkommenelemente von mit visibility:hidden deklarierten Elementen erben diese Deklarierung, können aber selbst durch den Wert visible wieder sichtbar sein.