content optimizations and page size settings
-
REDUCE THE NUMBER OF POSTS SHOWN ON YOUR INDEX PAGE
Settings -> Reading Settings -> Blog pages show at most
Then, change the Blog pages “show at most” value to a lower number.
Alternatively, you can use a plugin like YITH Infinite Scrolling. It will dynamically show more posts when your users scroll down near the end of your page, similar to the way Facebook shows more posts when you’re scrolling.
SPLIT LONG POSTS ON YOUR INDEX PAGE
If your site tends to rely on long posts, you may want to split them into pages using the <!--nextpage-->
tag within the post content. By doing this, you will see a pagination under the page or posts and your users will be able to navigate through them by clicking on the next pages.
This will split one big and slow page into several faster ones.
REPLACE SLIDER WITH MULTIPLE IMAGES WITH ONE STATIC IMAGE
Sliders usually use a lot of JavaScript to operate. Furthermore, not all of the plugins that enable the slider functionality on WordPress sites are written in light and optimized code. Last but not least, sliders aren’t particularly user-friendly on mobile devices. So, if your design allows it, simply replace your slider with a single static image.
However, if you really need and want a slider, I recommend using Soliloquy . It comes in a free and a professional version, which includes more features. This plugin renders a fast and lightweight slider that has everything most people would need from a slider plugin. Another good solution is the Meta Sliderplugin which is another free and well-written extension.
- USE APPROPRIATE IMAGE SIZES
Images are an essential part of a website and may need some time to be transferred from the server while the site is loading.
If you want to display an image 300x300 pixels, don’t upload a 1024x1024 pixels image and then set it to be shown smaller with HTML or CSS.
OPTIMIZE IMAGE SIZE WITHOUT DAMAGING QUALITY
I recommend using a free plugin called EWWW Image Optimizer. It optimizes the file size of your images without damaging their quality and strips them off of all the unnecessary data that your camera saves when you take a photograph (e.g. GPS location of the photo, make and model of the camera used).
Even if the image file is reduced by just a few KBs, when you combine all the images on one page, usually the performance gain is significant.
REDUCE THE USAGE OF EXTERNAL FONTS
Each font that you use from Google Free Fonts or another similar service has multiple variations, weight (300, 400, 500, 700), encoding (Latin, Cyrillic), style and so on.
Check your website and include only the font variation that you’re actually using.
Furthermore, if you’re loading a font for a small piece of text somewhere on your site, I recommend compromising on the design and simply using a font you already have on other pages.
MANAGE THE VOLUME OF COMMENTS ON YOUR SITE
If you get a lot of comments, this may be slowing your site in two ways. First - this makes your page more dynamic (if you have enabled caching, it has to be cleared more often) and second - each comment adds to the size of your page and HTML output.
In such cases, I recommend replacing the default WordPress comment system with a plugin called Epoch
. It will replace the default way WordPress handles comments with a more optimized code that can really speed up your site especially if you get a lot of comments.
Disqusis also an option, but it’s a third party service that relies on a plugin to replace your default comment system with theirs. It will offload the comments from your site, but they will no longer be stored on your server.
ENABLE GZIP COMPRESSION FOR YOUR PAGES
With gZIP compression enabled, the final HTML output of your site and some of the static resources will be compressed before being transmitted to your visitor. Then, your visitor’s browser decompresses the content before rendering. It’s much faster to compress and decompress this content than to transfer it with - out compression.
Enabling gZIP compression is very easy and requires almost no effort. Simply add this code to the .htaccess file in your Word - Press main folder:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
MINIFY AND COMBINE JS AND CSS FILES
Minification and combination are two techniques with one purpose - to reduce the size and number of JavaScript and CSS files that your site loads. Minification strips all unnecessary symbols by removing precious bites from being loaded every time you request an URL.
Combination on the other hand, combines multiple JavaScript and CSS files into one. This reduces the number of requests your site makes. There are a few plugins that do this really well. Either WP Rocket, a premium option or
WP Super Minify, a good free plugin, can do the job.
ENABLE CACHING
Caching is a great technology that saves the outcome of different operations your site has to perform in order to produce your final content. It then serves this ready “product” to the next visitor of your site. With a good caching solution enabled and functioning, your site will be as fast as a static page until you make a change. When this occurs, the page will load dynamically for the first visitor after the modification. Then, the cache will be refreshed and the next time it will load the much faster, cached version of the page.
The easiest way to cache your site is through a plugin. This saves the cached content on the server’s hard disk and significantly improves site performance since your content won’t be dynamically loaded every time. WP Rocket
is a great premium option, or if that’s outside your budget, try WP Super Cache.
Further down in the book I’ll talk about caching as a part of the services your hosting provider can offer. When caching is enabled at the server level, the content gets saved not on the hard disk, but in the server RAM. This makes the site performance gains much greater since reading from the memory is faster than reading from the disc.
