How to Increase Load Page Speed-Up WordPress?

It’s quite clear. Everyone hates slow websites. The question is, how can you make your WordPress website faster? Keep reading and I’ll show you how you can take proactive steps towards speeding up your site.

Wordpress-Speed-Optimization-Crunchify-Tips

1.Minimize the number of HTTP requests

Translation: Limit the number of files required to display your website

When someone visits your website, the corresponding files must be sent to that person’s browser. This includes CSS files, Javascript library references, and images.

As expected, every file you use to enhance your design detracts from its performance. Similary, WordPress plugins are notorious for injecting extraneous CSS code in the head of your site without giving you the option to manually add the required styles to your stylesheet.

The key takeaway is this: eliminate everything that’s unnecessary. If you’re using a plugin because you like, take a look at how it impacts your code. The extra page-load time may not be worth it.

2.Minify HTML, CSS, and Javascript

Translation: Remove all white space from code when possible before serving it to visitors

The spaces, tabs, and orderly structure used in code is to make it more human-readable. Servers and browsers don’t care about what the code looks like as long as it’s valid and executes without error. If you want your files to download faster, you can remove this whitespace before serving your code.

Since it would be impractical to remove white space from files that are constantly edited (unlike Javascript libraries like jQuery, which are almost always served minified), we’ll want to leverage a plugin like WP-Minify (good) or W3 Total Cache (best) to handle this at runtime without affecting the files we need to edit.

enced webmasters is to upload and serve an image far larger than what is required for the design. WordPress is an unfortunate enabler of this, as many novice website owners upload large images directly off of their digital cameras and utilize WordPress’s image resizing functionality to display a smaller version. With free applications like Picnik and Image Optimizer at our disposal, there is simply no excuse not to resize and optimize!

3.Optimize and correctly display images

Translation: Make images as small as possible and don’t require the browser to resize them

Depending on the format, many images contain a ton of extraneous metadata that can drastically increase the size of the file. Many designers fail to compress their images before uploading them to the web, and the overall impact of this can be dramatic with image-intensive designs.

Another cardinal sin of inexperienced webmasters is to upload and serve an image far larger than what is required for the design. WordPress is an unfortunate enabler of this, as many novice website owners upload large images directly off of their digital cameras and utilize WordPress’s image resizing functionality to display a smaller version.

With free applications like Picnik and Image Optimizer at our disposal, there is simply no excuse not to resize and optimize!

4.Utilize browser caching

Urban Translation: Where the cache at?
Standard Translation: Don’t require browsers to pull down another copy of static files every time

With browser caching, we’re explicitly instructing browsers to hang onto particular files for a specified period of time. When the file is needed again, the browser is to pull from its local cache instead of requesting it from the server again.

Running a website without caching in place makes as much sense as driving to the store for a glass of water every time you’re thirsty. Not only is in impractical and short-sighted, it takes more work!

The ExpiresByType directive is used to tell browsers which files to cache and how long to hang onto them. The example below would tell our visitors’ browsers to hang onto HTML, CSS, Javascript, and images, and favicon for an hour (3600 seconds):

.htaccess   
  1. # BEGIN Expire headers
  2. <ifModule mod_expires.c>
  3. ExpiresActive On
  4. ExpiresDefault "access plus 5 seconds"
  5. ExpiresByType image/x-icon "access plus 2592000 seconds"
  6. ExpiresByType image/jpeg "access plus 2592000 seconds"
  7. ExpiresByType image/png "access plus 2592000 seconds"
  8. ExpiresByType image/gif "access plus 2592000 seconds"
  9. ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
  10. ExpiresByType text/css "access plus 604800 seconds"
  11. ExpiresByType text/javascript "access plus 216000 seconds"
  12. ExpiresByType application/javascript "access plus 216000 seconds"
  13. ExpiresByType application/x-javascript "access plus 216000 seconds"
  14. ExpiresByType text/html "access plus 600 seconds"
  15. ExpiresByType application/xhtml+xml "access plus 600 seconds"
  16. </ifModule>
  17. # END Expire headers
  18. # BEGIN Cache-Control Headers
  19. <ifModule mod_headers.c>
  20. <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
  21. Header set Cache-Control "public"
  22. </filesMatch>
  23. <filesMatch "\.(css)$">
  24. Header set Cache-Control "public"
  25. </filesMatch>
  26. <filesMatch "\.(js)$">
  27. Header set Cache-Control "private"
  28. </filesMatch>
  29. <filesMatch "\.(x?html?|php)$">
  30. Header set Cache-Control "private, must-revalidate"
  31. </filesMatch>
  32. </ifModule>
  33. # END Cache-Control Headers

5.Gzip and compress components

Translation: Compress files at the server level before sending them to browsers

If you were instructed to hurl a piece of paper across the room as far as it can go, would you lightly crumple it or squeeze it with all your might? That’s right, you’d get your Hulk Smash on.

The sample principle applies here: we want to allow our webserver to compress our files before sending them to visitors. We can drop a few lines of code in our .htaccess file to accomplish this:

.htaccess   
  1. <ifModule mod_deflate.c>
  2. AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
  3. </ifModule>

This code might look a bit intimidating, but it’s actually pretty simple. We’re just checking to see if the Apache mod_deflate module exists and if so, electing to serve HTML, CSS, Javascript, plain text, and favicon files using gzip compression.

Note that this requires the Apache webserver and the mod_deflate module. To enable gzip compression with NGINX, ensure that the following lines exist inside of the appropriate directive:

  1. server {
  2. gzip on;
  3. gzip_types text/html text/css application/x-javascript text/plain text/xml image/x-icon;
  4. }

6.Gzip and compress via Header

Insert this code into yourtheme/header.php

  1. <?php
  2. if ( substr_count( $_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip' ) ) {
  3. ob_start( "ob_gzhandler" );
  4. }
  5. else {
  6. ob_start();
  7. }
  8. ?>