Try Usersnap for Bug Reporting <\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\nHow fast is your WordPress site today?<\/h2>\n\n\n\n
In order to optimize your WordPress site speed, you need to know where you\u2019re currently standing at. Anaylzing the current situation of your WordPress site speed is an absolute must-have.<\/p>\n\n\n\n
We analyzed our website\u2019s speed by using Google\u2019s PageSpeed Insights Tool<\/a>.
(There are some other great tools out there which I mention in this blog post<\/a>.)<\/p>\n\n\n\nEnter a URL of one of your articles or important pages of your website and Google will tell you how good (or bad) your website\u2019s performance currently is.<\/p>\n\n\n\n![\"speed](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/05\/speed-up-wordpress-site.png\")
<\/a><\/figure>\n\n\n\nHave a plan.<\/h2>\n\n\n\n
We analyzed our own page exactly a week ago and realized that our blog could need some improvements.<\/p>\n\n\n\n
And to be totally honest here, we thought that those performance improvements would take us days or even weeks to conduct.<\/p>\n\n\n\n
However, to all our surprise this wasn\u2019t the case. It was way faster. We put our heads together and got started.<\/p>\n\n\n\n
After about two hours we were done. Yep – we were done.<\/p>\n\n\n\n
So, I\u2019d like to give you some insights on what we exactly did in order to speed up our WordPress blog. And what you can do as well.<\/p>\n\n\n\n
WordPress is your SEO friend.<\/h2>\n\n\n\n
As mentioned in the beginning, WordPress<\/a> is your friend. And WordPress is definitely your friend when it comes to search engine optimization<\/a>.<\/p>\n\n\n\nWordPress comes with a lot of built-in SEO requirements and enables you to easily add further plugins to make your website faster.<\/p>\n\n\n\n
Pre-conditions for optimizing your website speed<\/h2>\n\n\n\n
I do not want to go into too much detail here, but optimizing your WordPress site speed, requires some essential preconditions which must be met.<\/p>\n\n\n\n
Be sure to:<\/p>\n\n\n\n
\n- Have a caching strategy in place<\/li>\n\n\n\n
- Make use of a CDN<\/a><\/li>\n\n\n\n
- Have the SEO Yoast plugin installed<\/li>\n\n\n\n
- Have Google Webmaster Tools installed<\/li>\n\n\n\n
- Make sure to have the latest WordPress installed<\/li>\n<\/ul>\n\n\n\n
So here we go. In less than two hours, we conducted the following optimizations in order to speed up our WordPress site.<\/p>\n\n\n\n
Some key facts:<\/strong><\/p>\n\n\n\n\n- Optimize our blogs usersnap.com\/blog (English blog) and usersnap.com\/de\/blog (german blog)<\/li>\n\n\n\n
- Optimization goal: Get a grading higher than 85 on mobile & desktop<\/li>\n<\/ul>\n\n\n\n
And most importantly: We didn\u2019t want to spend days and nights optimizing our blog.<\/p>\n\n\n\n
Clean up your plugins<\/h2>\n\n\n\n
If you have your WordPress site running for a while, you might find some WordPress problems<\/a>, and I\u2019m sure you\u2019ll have some old and deactivated plugins in place.<\/p>\n\n\n\nSo, before digging into the real work make sure to delete all unnecessary plugins. If you\u2019re not using a plugin, not only deactivate it, but delete it.<\/p>\n\n\n\n
Eliminate JavaScript files in above-the-fold content<\/h2>\n\n\n\n
JavaScript enables developers to do amazing things on websites and it is also heavily used by WordPress websites.<\/p>\n\n\n\n
Using a lot of JavaScript files in the above-the-fold content influences the speed of your site. Therefore, Google recommends to eliminate all (render-blocking) JavaScript in above-the-fold content.<\/p>\n\n\n\n
Removing the JavaScript below-the-fold works pretty straight-forward and speed ups your WordPress site massively.<\/p>\n\n\n\n![\"speed](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/05\/buffer-website-speed.png\")
<\/a><\/figure>\n\n\n\nAs you can see in the screenshot above, I took a closer look at Buffer\u2019s blog<\/a> where Google suggests to remove the render-blocking JavaScript.<\/p>\n\n\n\nBe aware, that using 3rd party services (like sharing buttons, comment system, etc.) might make moving the JavaScript below the fold a bit of a challenge.<\/p>\n\n\n\n
Furthermore, there might be some good reasons why certain JavaScript files are render-blocking. Make sure to investigate on every JavaScript file in order to decide if it can be moved below the fold or not.<\/p>\n\n\n\n
In our case there was one JavaScript file which couldn\u2019t be moved below-the-fold. Luckily, we could delete the entire file as it wasn\u2019t used any longer.<\/p>\n\n\n\n
CSS clean-up<\/h2>\n\n\n\n
When working on a new website, most people focus primarily on the design and UI of a site. It\u2019s just the natural way on how we look and perceive our visual world.<\/p>\n\n\n\n
However, the hyper-complex, image-heavy interfaces require us to use a lot of CSS.
And here comes the big drawback: CSS files which must be loaded (for displaying your extravagant web design) add to the loading time of your website.<\/p>\n\n\n\n
In order to speed up your WordPress site you need to get clean up your CSS file(s).<\/p>\n\n\n\n
Things you can and should do when cleaning up your CSS:<\/p>\n\n\n\n
\n- The fewer lines of code you use, the better (reduce the number of line breaks, use simple comments e.g.)<\/li>\n\n\n\n
- The smaller the CSS file size is, the better. Try to minimize your CSS file to less than 10 bytes.<\/li>\n\n\n\n
- The probably most important thing: insert your CSS inline<\/a><\/li>\n<\/ul>\n\n\n\n
I know that most style sheets are inserted as an external style sheet. Though it makes sense to insert the most important styles inline for ensuring super-fast loading times.<\/p>\n\n\n\n
However, you need to make sure to minimize your CSS file, because it doesn\u2019t do any good if you inline a CSS file larger than 20kb.<\/p>\n\n\n\n
If you can\u2019t insert the entire CSS inline, make sure to insert the most important CSS inline.<\/p>\n\n\n\n
Example: Comments in CSS<\/em>
Bad:<\/strong><\/em><\/p>\n\n\n\n\/************************************\/\n\/* Content Page *\/\n\/************************************\/\n<\/pre>\n\n\n\nGood:<\/strong><\/em><\/p>\n\n\n\n\/* content page *\/<\/pre>\n\n\n\nPS: I don\u2019t think that I have to say that the more complex your CSS file structure is, the worse it is for your website performance.<\/p>\n\n\n\n
PPS: I\u2019m fully aware of the conflict of design vs. speed. Everyone has to find the right balance here.<\/p>\n\n\n\n
Optimize your images.<\/h2>\n\n\n\n
Images are beautiful to look at. Especially on websites.<\/p>\n\n\n\n
But here\u2019s the thing: Images add to the size of your page, and therefore influences your loading time. So what should you do?<\/p>\n\n\n\n
The answer can be found in the image optimization process.<\/p>\n\n\n\n
\n- Format selection<\/strong>: PNG images work best for logos, illustrations and text. In every other case, simply use jpeg.<\/li>\n\n\n\n
- File size<\/strong>: I guess there\u2019s nothing more to say than: the smaller the better.<\/li>\n\n\n\n
- Image compression<\/strong><\/a>: You have to strike a balance between the quality and the size of an image.<\/li>\n<\/ul>\n\n\n\n
So what did we do in order to speed up our WordPress site?<\/p>\n\n\n\n
First of all, we installed the Compress JPEG & PNG images plugin<\/a>. This plugin allows you to optimize and compress all your image material.<\/p>\n\n\n\n![\"compress](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/05\/compress-images-wordpress.png\")
<\/a><\/figure>\n\n\n\nEvery image uploaded to WordPress will be first analyzed, then optimized and finally saved as a smaller version. It claims that on average JPEG images are compressed by 40-60% and PNG images by 50-80% without visible loss in quality.<\/p>\n\n\n\n
After installing the plugin, we compressed all our blog post images – a total of 4.113 images. All in all this optimization took us 10 minutes and cost us $32.<\/p>\n\n\n\n![\"speed](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/05\/speed-up-wordpress-site-compression.png\")
<\/figure>\n\n\nTry Usersnap for Bug Reporting <\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\nOther content optimization<\/h2>\n\n\n\n
If you\u2019re using other content formats – such as videos and gifs – I\u2019d recommend embedding those visuals via 3rd party services.<\/p>\n\n\n\n
In order to make use of GIFs we uploaded all our gifs to giphy.com<\/a> and embedded the gif with a little code snippet. The same can be applied to all our video material which is uploaded and embedded via Youtube.<\/p>\n\n\n\nThe outcome.<\/h2>\n\n\n\n
The JavaScript & CSS cleanup, the plugin reduction, and image optimization took us about two hours.<\/p>\n\n\n\n
In the end, we made in the green zone on the Page Insights test, though there\u2019s still some room for improvement:<\/p>\n\n\n\n![\"speed](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/05\/speed-up-wordpress-website-test.png\")
<\/a><\/figure>\n\n\n\nAnd most importantly, we felt some relief and happiness after seeing how these speed improvements affected our organic traffic growth.<\/p>\n\n\n\n
(There are some other great tools out there which I mention in this blog post<\/a>.)<\/p>\n\n\n\n
Enter a URL of one of your articles or important pages of your website and Google will tell you how good (or bad) your website\u2019s performance currently is.<\/p>\n\n\n\n We analyzed our own page exactly a week ago and realized that our blog could need some improvements.<\/p>\n\n\n\n And to be totally honest here, we thought that those performance improvements would take us days or even weeks to conduct.<\/p>\n\n\n\n However, to all our surprise this wasn\u2019t the case. It was way faster. We put our heads together and got started.<\/p>\n\n\n\n After about two hours we were done. Yep – we were done.<\/p>\n\n\n\n So, I\u2019d like to give you some insights on what we exactly did in order to speed up our WordPress blog. And what you can do as well.<\/p>\n\n\n\n As mentioned in the beginning, WordPress<\/a> is your friend. And WordPress is definitely your friend when it comes to search engine optimization<\/a>.<\/p>\n\n\n\n WordPress comes with a lot of built-in SEO requirements and enables you to easily add further plugins to make your website faster.<\/p>\n\n\n\n I do not want to go into too much detail here, but optimizing your WordPress site speed, requires some essential preconditions which must be met.<\/p>\n\n\n\n Be sure to:<\/p>\n\n\n\n So here we go. In less than two hours, we conducted the following optimizations in order to speed up our WordPress site.<\/p>\n\n\n\n Some key facts:<\/strong><\/p>\n\n\n\n And most importantly: We didn\u2019t want to spend days and nights optimizing our blog.<\/p>\n\n\n\n If you have your WordPress site running for a while, you might find some WordPress problems<\/a>, and I\u2019m sure you\u2019ll have some old and deactivated plugins in place.<\/p>\n\n\n\n So, before digging into the real work make sure to delete all unnecessary plugins. If you\u2019re not using a plugin, not only deactivate it, but delete it.<\/p>\n\n\n\n JavaScript enables developers to do amazing things on websites and it is also heavily used by WordPress websites.<\/p>\n\n\n\n Using a lot of JavaScript files in the above-the-fold content influences the speed of your site. Therefore, Google recommends to eliminate all (render-blocking) JavaScript in above-the-fold content.<\/p>\n\n\n\n Removing the JavaScript below-the-fold works pretty straight-forward and speed ups your WordPress site massively.<\/p>\n\n\n\n As you can see in the screenshot above, I took a closer look at Buffer\u2019s blog<\/a> where Google suggests to remove the render-blocking JavaScript.<\/p>\n\n\n\n Be aware, that using 3rd party services (like sharing buttons, comment system, etc.) might make moving the JavaScript below the fold a bit of a challenge.<\/p>\n\n\n\n Furthermore, there might be some good reasons why certain JavaScript files are render-blocking. Make sure to investigate on every JavaScript file in order to decide if it can be moved below the fold or not.<\/p>\n\n\n\n In our case there was one JavaScript file which couldn\u2019t be moved below-the-fold. Luckily, we could delete the entire file as it wasn\u2019t used any longer.<\/p>\n\n\n\n When working on a new website, most people focus primarily on the design and UI of a site. It\u2019s just the natural way on how we look and perceive our visual world.<\/p>\n\n\n\n However, the hyper-complex, image-heavy interfaces require us to use a lot of CSS. In order to speed up your WordPress site you need to get clean up your CSS file(s).<\/p>\n\n\n\n Things you can and should do when cleaning up your CSS:<\/p>\n\n\n\n I know that most style sheets are inserted as an external style sheet. Though it makes sense to insert the most important styles inline for ensuring super-fast loading times.<\/p>\n\n\n\n However, you need to make sure to minimize your CSS file, because it doesn\u2019t do any good if you inline a CSS file larger than 20kb.<\/p>\n\n\n\n If you can\u2019t insert the entire CSS inline, make sure to insert the most important CSS inline.<\/p>\n\n\n\n Example: Comments in CSS<\/em> Good:<\/strong><\/em><\/p>\n\n\n\n PS: I don\u2019t think that I have to say that the more complex your CSS file structure is, the worse it is for your website performance.<\/p>\n\n\n\n PPS: I\u2019m fully aware of the conflict of design vs. speed. Everyone has to find the right balance here.<\/p>\n\n\n\n Images are beautiful to look at. Especially on websites.<\/p>\n\n\n\n But here\u2019s the thing: Images add to the size of your page, and therefore influences your loading time. So what should you do?<\/p>\n\n\n\n The answer can be found in the image optimization process.<\/p>\n\n\n\n So what did we do in order to speed up our WordPress site?<\/p>\n\n\n\n First of all, we installed the Compress JPEG & PNG images plugin<\/a>. This plugin allows you to optimize and compress all your image material.<\/p>\n\n\n\n Every image uploaded to WordPress will be first analyzed, then optimized and finally saved as a smaller version. It claims that on average JPEG images are compressed by 40-60% and PNG images by 50-80% without visible loss in quality.<\/p>\n\n\n\n After installing the plugin, we compressed all our blog post images – a total of 4.113 images. All in all this optimization took us 10 minutes and cost us $32.<\/p>\n\n\n\n If you\u2019re using other content formats – such as videos and gifs – I\u2019d recommend embedding those visuals via 3rd party services.<\/p>\n\n\n\n In order to make use of GIFs we uploaded all our gifs to giphy.com<\/a> and embedded the gif with a little code snippet. The same can be applied to all our video material which is uploaded and embedded via Youtube.<\/p>\n\n\n\n The JavaScript & CSS cleanup, the plugin reduction, and image optimization took us about two hours.<\/p>\n\n\n\n In the end, we made in the green zone on the Page Insights test, though there\u2019s still some room for improvement:<\/p>\n\n\n\n And most importantly, we felt some relief and happiness after seeing how these speed improvements affected our organic traffic growth.<\/p>\n\n\n\n<\/a><\/figure>\n\n\n\nHave a plan.<\/h2>\n\n\n\n
WordPress is your SEO friend.<\/h2>\n\n\n\n
Pre-conditions for optimizing your website speed<\/h2>\n\n\n\n
\n
\n
Clean up your plugins<\/h2>\n\n\n\n
Eliminate JavaScript files in above-the-fold content<\/h2>\n\n\n\n
<\/a><\/figure>\n\n\n\nCSS clean-up<\/h2>\n\n\n\n
And here comes the big drawback: CSS files which must be loaded (for displaying your extravagant web design) add to the loading time of your website.<\/p>\n\n\n\n\n
Bad:<\/strong><\/em><\/p>\n\n\n\n\/************************************\/\n\/* Content Page *\/\n\/************************************\/\n<\/pre>\n\n\n\n
\/* content page *\/<\/pre>\n\n\n\n
Optimize your images.<\/h2>\n\n\n\n
\n
<\/a><\/figure>\n\n\n\n<\/figure>\n\n\nTry Usersnap for Bug Reporting <\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\n
Other content optimization<\/h2>\n\n\n\n
The outcome.<\/h2>\n\n\n\n
<\/a><\/figure>\n\n\n\n