Accelerate wordpress
Hey.
I think among the readers of Habr there are many who have a stand-alone blog on the wordpress engine.
So, for you, my dear, I have two news, as usual, bad and good.
The bad thing is that wordpress is pretty slow.
Krivoruka’s producers of themes and, especially, Krivoruk plug-in manufacturers are to blame for this. Especially the curve plugin, for my taste, wp-ajax-edit-comments , which is a sample of bydlokoding.
The good is that it can be fixed.
')
First, a little theory. For quite some time now, intelligent people from Yahoo have conducted research on the topic “how can we speed up our websites”. And they found out that the speed of the site from the user's point of view is mainly influenced by the optimization of the front-end, not the server-side. More information about this can be found on the website webo.in in Russian and on the website yahoo in English, I’ll just describe a few simple steps that will significantly speed up the speed of your blog.
Warning: although I tried to simplify the text as much as possible, reducing it to a set of instructions, still most of the steps can be performed only with experience developing web sites, so if you are not a programmer, you'd better ask a familiar programmer to perform these steps for you. Yes, and just in case, do not forget to bother :)
Before we move on to practice, I’ll remind you of our main goal: a wordpress blog should work with exactly the same functionality as before, but, from the user's point of view , work faster. So, drove:
Yes, the openness of the Wordpress platform is an obvious benefit. I'm serious.
A lot of great designers, designers, programmers with enthusiastic eyes of inspiration, thoughtfully create themes and plugins for everyone, for all of humanity, without demanding anything in return. It is really beautiful.
Unfortunately, it didn’t do without a fly in the ointment - not all designers and programmers are equally experienced and talented and not all of them are sufficiently diligent and responsible to lick the topic that they provide on socially-voluntary basis.
Even more regret for the progressively thinking part of humanity is caused by the fact thatthere are more uebans than titans of spirit, and therefore the network is full of free shit.
Thus, we need to correct the flaws that (perhaps) are inherent in your favorite topic from birth and correct its code.
So, in order to make the topic work faster, you need to do the following:
you can use the
You can use the theme of my blog as an example. Below, I gave an example of a shell script that you can set on the directory where the theme is located, and it will do everything for you.
Since we can seriously speed up the download speed of files by reducing the number of these files (surprisingly, right? :), it would be wise to merge all css-files and js-files into one. If these files are larger than ~ 70 kilobytes, it is best to break them into two pieces.
If you need to reduce the number of images using the spss css technique and image map technique.
Here we must separately note that many (almost all) plug-ins have a completely idiotic feature - to register their js and css files. Idiocy lies in the fact that very often different plug-ins use the same library, and connect it several times. And the user who views your blog has to load, for example, a prototype or jquery two or three times. Superfluous ~ 30-160 + KB. Neslabo, pradva?
Those. note: it’s completely incomprehensible what prevented wordpress creators from having control over all the resources that plugins prescribe, as done, for example, in RichFaces . For example, if one plugin that needs jQuery writes a script tag with jQuery and reports - “You see, you loaded, everyone who needs it can use it”, and the other one who also needs jQuery already knows about it and does not load its own version .
It is treated this way - all the scripts that load the plug-ins merge with those that you wrote yourself and stick into the footer, and forbid plug-ins to load them. Do the same with css, just stick in the header.
Pictures in png and jpg formats are often not optimized and store a lot of unnecessary information. It would be nice to get rid of this unnecessary information and thus compress files. This is done using special utilities. This will allow us to reduce their size in some cases by 50 percent. Not weak, right?
At the same time, the pictures themselves will not change and will still please the eye of users.
I borrowed information about these utilities and the team from Dmitry Ischenko . I hope he is not offended :)
So, to optimize the entire png images, we will use pngcrush . I find it difficult to answer how to install it on windows or linux, but I installed this utility from the ports on my mac'e without any problems.
To compress the png-files without losing quality, use the following command:
To compress jp (e) g-files, use jpegtran , which is included in the libjpg package, which I also installed from the ports. The command to compress jp (e) g-files without losing quality:
I sketched a shell script here that recursively traverses the directory and optimizes all the png / jp (e) g pictures in it:
Just run it in the uploads directory in the wp-content folder and everything will be fine. You can even hang it on a cron-job and no longer bathe on this account - all newly arrived files will be optimized.
Of course, you need to optimize the graphics used in the theme, so here’s another shell script that recursively traverses the directory, compresses the css, js files and optimizes the jp (e) g / png files. Just in case, before using it, do not forget to backup:
Use less dns-lookups. Do not post pictures, src which points to another resource, better download them to yourself and list the link to the author. Will work faster.
All modern browsers support compression, so you can significantly reduce the size of the transferred files (and hence the time they are loaded) with mod_deflate (for Apache 2.2 for Apache 1.3, you must use mod_gzip). So enable mod_deflate. If you are using Apache 1.3, the code below does not need you, the article “mod_gzip - compressing html pages on the fly” on the website webo.in.
Locate the
In this way, you can reduce js / css / html files by 70-80%, and approximately 10% decrease in jpeg-files, which significantly speeds up the site loading. It should, however, be remembered that using mod_deflate increases the load on the server, since it needs to compress the files before giving them away, so it’s worth checking that using mod_deflate does not create an excessive load on the server.
And finally - in order to speed up surfing on your site you need to turn on caching. This will not speed up the site loading from the user who first came to your site, but put all external js, css files, pictures to him in the cache, and the next time he wanders through your site, resources will not be loaded from the server , and from the cache, which will significantly speed up the speed of your site from the user's _ point of view, as well as significantly reduce the load on your server. Remember that user cached files are taken from the browser’s cache, so if you make changes to a file, say styles, the user cached style.css will not see them. So it is better to include caching after you have finished the topic.
Again, add the following lines to the end of the
Caution : Do this item with caution (or, if you are not sure what you are doing, skip it altogether), many people have problems using the following plug-ins.
There are several wordpress plugins that allow you to cache files on the server side. They work on this principle: as soon as one of your pages is requested on the server, it is dynamically built and an html-file is created with all the data that is stored in the cache. As soon as a request comes to this page, the html file is given to the user instead of dynamically building a page, which significantly reduces the load on the server (now php scripts are not being run and the database is not being loaded).
Unfortunately, all these plugins work somehow very strangely, in any case, neither wp-cache nor wp-super-cache working on its basis worked properly for me.
But it works 1 Blog Cacher , however, it has a rather complicated setup. I hope you figure it out. I use it.
After I conducted a series of these simple actions on my blog, the blog began to load 80% faster.
Now the perfomance meter of my site from the point of view of the YSlow firebug plugin is B (85), was F (33). I think a good result.
Cross-post on my blog .
I think among the readers of Habr there are many who have a stand-alone blog on the wordpress engine.
So, for you, my dear, I have two news, as usual, bad and good.
The bad thing is that wordpress is pretty slow.
Krivoruka’s producers of themes and, especially, Krivoruk plug-in manufacturers are to blame for this. Especially the curve plugin, for my taste, wp-ajax-edit-comments , which is a sample of bydlokoding.
The good is that it can be fixed.
')
Theory
First, a little theory. For quite some time now, intelligent people from Yahoo have conducted research on the topic “how can we speed up our websites”. And they found out that the speed of the site from the user's point of view is mainly influenced by the optimization of the front-end, not the server-side. More information about this can be found on the website webo.in in Russian and on the website yahoo in English, I’ll just describe a few simple steps that will significantly speed up the speed of your blog.
Warning: although I tried to simplify the text as much as possible, reducing it to a set of instructions, still most of the steps can be performed only with experience developing web sites, so if you are not a programmer, you'd better ask a familiar programmer to perform these steps for you. Yes, and just in case, do not forget to bother :)
Before we move on to practice, I’ll remind you of our main goal: a wordpress blog should work with exactly the same functionality as before, but, from the user's point of view , work faster. So, drove:
Practice
Optimizing the topic
Yes, the openness of the Wordpress platform is an obvious benefit. I'm serious.
A lot of great designers, designers, programmers with enthusiastic eyes of inspiration, thoughtfully create themes and plugins for everyone, for all of humanity, without demanding anything in return. It is really beautiful.
Unfortunately, it didn’t do without a fly in the ointment - not all designers and programmers are equally experienced and talented and not all of them are sufficiently diligent and responsible to lick the topic that they provide on socially-voluntary basis.
Even more regret for the progressively thinking part of humanity is caused by the fact that
Thus, we need to correct the flaws that (perhaps) are inherent in your favorite topic from birth and correct its code.
So, in order to make the topic work faster, you need to do the following:
- If the topic is rolled up on the tables, turn it over to divas. I will not touch on the long-standing dispute “how to tell - divs and tables”, I will only note that the tables lose to the divs from the point of view of the goal set before us (the blog that works quickly from the user's point of view) because the table is rendered by the browser only loaded, while divas are drawn as soon as the browser receives them from the server. So, if the page is rendered in divas, the user will see the site content faster, which is what we need, right? Besides, as len says in the comments :
Layout divs together with page splitting into files like left-sidebar, right-sidebar, header, footer etc. allows you to quickly and easily change any small piece of code directly from the engine control panel (Design -> Theme Editor) than attempts from the same control panel to change a piece of your table layout, in which you can get lost behind the fence from tr and td.
- You will laugh, but you need to remove all the style rules in external files. And JavaScript, too. It is so obvious that I will not even explain why this is necessary.
- We register the external style file in the head block, and connect the JavaScript file as close as possible to the closing tag “body”. And all analyst scripts are also lower.
- Compress js and css. For this we will use yui-comressor. It is done like this: download the latest stable release of YUICompressor from the official site , install, if the JRE is not installed yet, and execute a command of the following type on the css / js file:
java -jar /path/ to /yuicompressor-*.*.*.jar -o "output_filename" src_file
* This source code was highlighted with Source Code Highlighter .
you can use the
-type flag, which indicates what type of file (css or js). If the flag is not specified, the file type is determined by the extension.You can use the theme of my blog as an example. Below, I gave an example of a shell script that you can set on the directory where the theme is located, and it will do everything for you.
Reduce the number of files
Since we can seriously speed up the download speed of files by reducing the number of these files (surprisingly, right? :), it would be wise to merge all css-files and js-files into one. If these files are larger than ~ 70 kilobytes, it is best to break them into two pieces.
If you need to reduce the number of images using the spss css technique and image map technique.
Here we must separately note that many (almost all) plug-ins have a completely idiotic feature - to register their js and css files. Idiocy lies in the fact that very often different plug-ins use the same library, and connect it several times. And the user who views your blog has to load, for example, a prototype or jquery two or three times. Superfluous ~ 30-160 + KB. Neslabo, pradva?
Those. note: it’s completely incomprehensible what prevented wordpress creators from having control over all the resources that plugins prescribe, as done, for example, in RichFaces . For example, if one plugin that needs jQuery writes a script tag with jQuery and reports - “You see, you loaded, everyone who needs it can use it”, and the other one who also needs jQuery already knows about it and does not load its own version .
It is treated this way - all the scripts that load the plug-ins merge with those that you wrote yourself and stick into the footer, and forbid plug-ins to load them. Do the same with css, just stick in the header.
Optimize graphics
Pictures in png and jpg formats are often not optimized and store a lot of unnecessary information. It would be nice to get rid of this unnecessary information and thus compress files. This is done using special utilities. This will allow us to reduce their size in some cases by 50 percent. Not weak, right?
At the same time, the pictures themselves will not change and will still please the eye of users.
I borrowed information about these utilities and the team from Dmitry Ischenko . I hope he is not offended :)
So, to optimize the entire png images, we will use pngcrush . I find it difficult to answer how to install it on windows or linux, but I installed this utility from the ports on my mac'e without any problems.
To compress the png-files without losing quality, use the following command:
pngcrush - rem alla -reduce -brute image.png result.png
* This source code was highlighted with Source Code Highlighter .To compress jp (e) g-files, use jpegtran , which is included in the libjpg package, which I also installed from the ports. The command to compress jp (e) g-files without losing quality:
jpegtran -copy none -optimize -perfect src.jpg dest.jpg
* This source code was highlighted with Source Code Highlighter .I sketched a shell script here that recursively traverses the directory and optimizes all the png / jp (e) g pictures in it:
for file in `find . -iname "*.jpg" - or -iname "*.png" - or -iname "*.jpeg" `; do
ext=${file##*.}
if [ -n "$ext" ]; then
if [ "$ext" = "jpg" ]; then
echo "optimizing ${file} as jpeg file with jpegtran"
jpegtran -copy none -optimize -perfect -outfile temp_abracadabra_filename.jpg $file
mv -f temp_abracadabra_filename.jpg $file;
fi
if [ "$ext" = "jpeg" ]; then
echo "optimizing ${file} as jpeg file with jpegtran"
jpegtran -copy none -optimize -perfect -outfile temp_abracadabra_filename.jpeg $file
mv -f temp_abracadabra_filename.jpeg $file;
fi
if [ "$ext" = "png" ]; then
echo "optimizing ${file} as png file with pngcrush"
pngcrush - rem alla -reduce -brute "$file" temp_abracadabra_filename.png;
mv -f temp_abracadabra_filename.png $file;
fi
fi
done;
* This source code was highlighted with Source Code Highlighter .Just run it in the uploads directory in the wp-content folder and everything will be fine. You can even hang it on a cron-job and no longer bathe on this account - all newly arrived files will be optimized.
Of course, you need to optimize the graphics used in the theme, so here’s another shell script that recursively traverses the directory, compresses the css, js files and optimizes the jp (e) g / png files. Just in case, before using it, do not forget to backup:
for file in `find . -iname "*.jpg" - or -iname "*.jpeg" - or -iname "*.png" - or -iname "*.js" - or -iname "*.css" `; do
ext=${file##*.}
if [ -n "$ext" ]; then
if [ "$ext" = "css" ]; then
echo "compressing ${file} as css file with yui compressor"
java -jar /opt/yuicompressor/yuicompressor-2.3.5.jar --type css -o "temp_abracadabra_filename.css" $file
mv -f temp_abracadabra_filename.css $file;
fi
if [ "$ext" = "js" ]; then
echo "compressing ${file} as js file with yui compressor"
java -jar /opt/yuicompressor/yuicompressor-2.3.5.jar --type js -o "temp_abracadabra_filename.js" $file
mv -f temp_abracadabra_filename.js $file;
fi
if [ "$ext" = "jpg" ]; then
echo "optimizing ${file} as jpeg file with jpegtran"
jpegtran -copy none -optimize -perfect -outfile temp_abracadabra_filename.jpg $file
mv -f temp_abracadabra_filename.jpg $file;
fi
if [ "$ext" = "jpeg" ]; then
echo "optimizing ${file} as jpeg file with jpegtran"
jpegtran -copy none -optimize -perfect -outfile temp_abracadabra_filename.jpeg $file
mv -f temp_abracadabra_filename.jpeg $file;
fi
if [ "$ext" = "png" ]; then
echo "optimizing ${file} as png file with pngcrush"
pngcrush - rem alla -reduce -brute "$file" temp_abracadabra_filename.png;
mv -f temp_abracadabra_filename.png $file;
fi
fi
done;
* This source code was highlighted with Source Code Highlighter .Use less dns-lookups. Do not post pictures, src which points to another resource, better download them to yourself and list the link to the author. Will work faster.
Compression
All modern browsers support compression, so you can significantly reduce the size of the transferred files (and hence the time they are loaded) with mod_deflate (for Apache 2.2 for Apache 1.3, you must use mod_gzip). So enable mod_deflate. If you are using Apache 1.3, the code below does not need you, the article “mod_gzip - compressing html pages on the fly” on the website webo.in.
Locate the
.htaccess file in the wordpress installation root directory and add the following to the end:<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|png)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
</IfModule>
* This source code was highlighted with Source Code Highlighter .In this way, you can reduce js / css / html files by 70-80%, and approximately 10% decrease in jpeg-files, which significantly speeds up the site loading. It should, however, be remembered that using mod_deflate increases the load on the server, since it needs to compress the files before giving them away, so it’s worth checking that using mod_deflate does not create an excessive load on the server.
Caching
And finally - in order to speed up surfing on your site you need to turn on caching. This will not speed up the site loading from the user who first came to your site, but put all external js, css files, pictures to him in the cache, and the next time he wanders through your site, resources will not be loaded from the server , and from the cache, which will significantly speed up the speed of your site from the user's _ point of view, as well as significantly reduce the load on your server. Remember that user cached files are taken from the browser’s cache, so if you make changes to a file, say styles, the user cached style.css will not see them. So it is better to include caching after you have finished the topic.
Again, add the following lines to the end of the
.htaccess file and do not forget to include mod_headers and mod_expires (or at least one of them):# mod_expires
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A86400
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/css A2592000
ExpiresByType image/gif A604800
ExpiresByType image/png A604800
ExpiresByType image/jpeg A604800
ExpiresByType text/plain A604800
ExpiresByType application/x-shockwave-flash A604800
ExpiresByType video/x-flv A604800
ExpiresByType application/pdf A604800
ExpiresByType text/html A900
</IfModule>
# mod_header
<IfModule mod_header.c>
# 3 Month
<FilesMatch "\.(flv|gif|jpg|jpeg|png|ico|swf)$">
Header set Cache-Control "max-age=7257600"
</FilesMatch>
# 1 Week
<FilesMatch "\.(js|css|pdf|txt)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
# 10 Minutes
<FilesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=600"
</FilesMatch>
# NONE
<FilesMatch "\.(pl|php|cgi|spl)$">
Header unset Cache-Control
Header unset Expires
Header unset Last-Modified
FileETag None
Header unset Pragma
</FilesMatch>
</IfModule>
* This source code was highlighted with Source Code Highlighter .Server side caching
Caution : Do this item with caution (or, if you are not sure what you are doing, skip it altogether), many people have problems using the following plug-ins.
There are several wordpress plugins that allow you to cache files on the server side. They work on this principle: as soon as one of your pages is requested on the server, it is dynamically built and an html-file is created with all the data that is stored in the cache. As soon as a request comes to this page, the html file is given to the user instead of dynamically building a page, which significantly reduces the load on the server (now php scripts are not being run and the database is not being loaded).
Unfortunately, all these plugins work somehow very strangely, in any case, neither wp-cache nor wp-super-cache working on its basis worked properly for me.
But it works 1 Blog Cacher , however, it has a rather complicated setup. I hope you figure it out. I use it.
Total
After I conducted a series of these simple actions on my blog, the blog began to load 80% faster.
Now the perfomance meter of my site from the point of view of the YSlow firebug plugin is B (85), was F (33). I think a good result.
Cross-post on my blog .
Source: https://habr.com/ru/post/42192/
All Articles