Tips for faster web pages
Loading speed as we all should know by now is a consideration for most websites. There are a few key areas I'm going to cover, images and non-image optimizations.
WordPress updated their core to allow for responsive images, it seems that a compatible theme or a plugin is required to take advantage of this at the moment. The Concrete5 CMS also has the ability to automatically create resized images for different screen sizes, some setup may be required if you want to use a custom theme, but most have taken this into account. All of which is good and dandy, but you'll want to make sure ahead of time that if the thumbnails are automatically generated, that it won't be problematic if the lowest resolution doesn't have enough definition for your purposes (text in images could get blurry on mobile, 2x dpi support can help). Typo3 CMS allows you to resize and shape images for smaller screens in a way allowing you to do this one at a time and crop off unnecessary edges.
If you are using a clumbsy responsive WYSIWYG editor (with no responsive image functionality), just make sure to resize your images to the maximum size they will appear on the screen, and it's always a good idea to optimize them before uploading them (then cross your fingers). Some good online optimizers are tinyPNG and Compress JPEG.
Another consideration is that the image format should be appropriate for the web, using progressive jpegs can help by keeping things from jumping around during the page load, since a lower quality version will take up the space and then get filled-in later by the full image with a few passes.
If you need a transparent PNG, first try to use a PNG8, but if that doesn't look right, try to clean the edges with photoshop or use a background color which works, then consider SVG (CMS permitting) if the image can be done using vectors, and if all else fails use an optimized PNG24 to make it look nice :) Adobe Fireworks also offers nice anti-aliased edges for transparent 8bit PNGs using the web adaptive alpha transparency setting.
Well, maybe that wasn't the last image loading / optimization trick. There is also an opportunity to take advantage of content delivery networks (CDNs) which are benificial by enabling non-http2 (old version of http) served webpages to download more resources at a time. There is a limit to the amount of http resources a browser will download from one domain at a time, so CDNs allow more concurrent resource connections, which can increase loading speed (without spriting). JetPack for WordPress is one tool for integrating externally loaded images into your wordpress installation. CDNs will still benefit your site even after http2 becomes the new standard (and the limit to the amount of concurrent connections to one domain will increase), since it is cloud based, in many situations the data won't have to travel as far to reach the browser.
Your theme could also be a cultprit in speed problems. Even if your theme uses 2 versions, mobile and desktop, make sure that the caching plugin works with both, because an uncached WordPress page can be awfully slow, especially if there is a lot of content in the database.
If you want to use social share buttons, there are plugins which will load the counts and not slow the page down as much as the regular social buttons. Every bit counts, and those also look better in most cases. The Social Warfare plugin is a good solution for this.
Sometimes you can save some loading time by using a plugin for videos that dynamically loads the player instead of automatically loading it in (html5 video players may save some loading too).
After you've completed the quest to finding a combination of plugins that work, you may still want to get more advanced and enable GZIP and resource caching in your .htaccess file... For experienced users only ;D I may write up more about speeding up PHP and other coding techniques to improve site speed in the future, stay tuned!
How to choose a fast CMS or improve your CMS's loading speed
Some things to consider when choosing your CMS can make a big difference later on! Progressive Web Apps are one route for a fast experience, but this article will be about regular old websites.Images are a good place to shed some page weight
I'd recommend to choose a CMS that automatically creates thumbnails for different screen sizes or has the ability to upload/resize appropriately for mobile vs desktop sized screens. If you have separate mobile and desktop editing (as opposed to a responsive design), then it might be beneficial if you have the ability to load different images for each version. Amp pages are also a great way to save some bandwidth. Amp pages are unique in that it is a system in where the images are resized to the size that they will appear on your screen, done by Google. So you'll never load more image than necessary. There are plugins for WordPress which will handle this automatically, so it is a good choice if your pages don't require custom javascript functionality and is more of a content source. Of course if you want the ultimate in responsive image control and fine tuning, our custom CMS, PHP-MVCMS, has some new unreleased features which provide unlimited flexibility for responsive image loading in a convenient easy to use format ;).WordPress updated their core to allow for responsive images, it seems that a compatible theme or a plugin is required to take advantage of this at the moment. The Concrete5 CMS also has the ability to automatically create resized images for different screen sizes, some setup may be required if you want to use a custom theme, but most have taken this into account. All of which is good and dandy, but you'll want to make sure ahead of time that if the thumbnails are automatically generated, that it won't be problematic if the lowest resolution doesn't have enough definition for your purposes (text in images could get blurry on mobile, 2x dpi support can help). Typo3 CMS allows you to resize and shape images for smaller screens in a way allowing you to do this one at a time and crop off unnecessary edges.
If you are using a clumbsy responsive WYSIWYG editor (with no responsive image functionality), just make sure to resize your images to the maximum size they will appear on the screen, and it's always a good idea to optimize them before uploading them (then cross your fingers). Some good online optimizers are tinyPNG and Compress JPEG.
Another consideration is that the image format should be appropriate for the web, using progressive jpegs can help by keeping things from jumping around during the page load, since a lower quality version will take up the space and then get filled-in later by the full image with a few passes.
If you need a transparent PNG, first try to use a PNG8, but if that doesn't look right, try to clean the edges with photoshop or use a background color which works, then consider SVG (CMS permitting) if the image can be done using vectors, and if all else fails use an optimized PNG24 to make it look nice :) Adobe Fireworks also offers nice anti-aliased edges for transparent 8bit PNGs using the web adaptive alpha transparency setting.
WordPress tips
Image loading / optimizing
Images of course should be sized and optimized. There are plugins for optimizing images, as well as themes and plugins which take advantage of WordPress's recent upgrade to handle responsive images. Another solution is to find a theme or plugin which autoloads images, this way of doing things can help by only downloading the images as you scroll down the page and the rest of the resources can be delivered during the loading process instead. Last but not least, for images at least, if you want to go crazy, you could do some advanced theming and use image sprites. I'd recommend some of the other solutions and just wait for http2 to come out, because when it does, spriting might even be slower in some cases. There are other ways of accomplishing dynamic images using css and/or js, or through client hints. For now I'd recommend to go with one of the other solutions since the support and speed seem to be the best as of now.Well, maybe that wasn't the last image loading / optimization trick. There is also an opportunity to take advantage of content delivery networks (CDNs) which are benificial by enabling non-http2 (old version of http) served webpages to download more resources at a time. There is a limit to the amount of http resources a browser will download from one domain at a time, so CDNs allow more concurrent resource connections, which can increase loading speed (without spriting). JetPack for WordPress is one tool for integrating externally loaded images into your wordpress installation. CDNs will still benefit your site even after http2 becomes the new standard (and the limit to the amount of concurrent connections to one domain will increase), since it is cloud based, in many situations the data won't have to travel as far to reach the browser.
Some other ways to improve site performance on a wordpress site
Not all page loading issues are related to images, so a few tips to get the HTML moving quickly are; to uninstall any non functional plugins, delete old page versions that you'll never need again, install a caching plugin like w3c total cache. A good caching system will include css and js minification and combination. As you will want to remove any unwanted comments and combine files into as few requests as possible (the number of requests won't matter if you have an http2 server however). And if you're a coder, check the quality of your plugin, one thing I have found, to my dismay is that some plugins will have useless code which is for the admin section that still loads into the page html!Your theme could also be a cultprit in speed problems. Even if your theme uses 2 versions, mobile and desktop, make sure that the caching plugin works with both, because an uncached WordPress page can be awfully slow, especially if there is a lot of content in the database.
If you want to use social share buttons, there are plugins which will load the counts and not slow the page down as much as the regular social buttons. Every bit counts, and those also look better in most cases. The Social Warfare plugin is a good solution for this.
Sometimes you can save some loading time by using a plugin for videos that dynamically loads the player instead of automatically loading it in (html5 video players may save some loading too).
After you've completed the quest to finding a combination of plugins that work, you may still want to get more advanced and enable GZIP and resource caching in your .htaccess file... For experienced users only ;D I may write up more about speeding up PHP and other coding techniques to improve site speed in the future, stay tuned!
