Although most of the advice given here are valid for all Web projects, the focus was on sites powered by the WordPress platform. To recap, WordPress is a content management - Content Management System, which propels 16.6% of websites in the world and almost 50% of the top 100 blogs.
some fundamentals
80% of the loading time of a site corresponds to the front-end (images, style sheets, JavaScript, Flash, etc..). Reducing the number of elements is the key to optimizing the display speed.
- The optimization of a website is made on three points:
- The weight of the current page (homepage but also the URLs that receive the most visitors should be optimized);...
- Load time in seconds;
Obviously , optimization will be to minimize each of these three values .
A site that is fully charged in less than 5 seconds is already a good result but only the first elements appear from the first second and the rest unfolds smoothly . The visitor must be able to visually scan the content you have to offer from the first second .
Generally , there are two major complementary approaches: data compression acting on the weight and the combination of files that determines the number of queries.
Also note that is relative loading time depending on the type of WordPress site you have: a WordPress blog will generally be slower than a showcase site ... but this is just a typical example for actually all depends on the features of the project - some corporate sites are sometimes more complex than a simple blog.
So avoid catalog and discuss this work on your project as a whole . There is no universal targets : the important thing is that the display operates without blocking and quickly to the end user ADSL and 3G standard . Personally, to give you an idea , I try to aim for the -100 HTTP requests to -8 seconds and -1 MB (which is quite accurate in my opinion ) .
You should also take the time to identify the leeway you have . In other words , what are the following tips that I can apply for my project based on my technical knowledge, my budget , etc. .
To micro -optimization is not used much either: you lose unnecessary time to optimize a website whose server is slow by nature .
A preliminary advice: go from the general to the particular.
Tools for performance analysis
Of course, we need measurement tools and performance analysis to compare before and after results of your optimization.
Include:
- Tools built into browsers: usually accessible via a right Inspect Element or click F12;
- Browser extensions: Firebug for Firefox that we will couple to YSlow;
- Online tools: Pingdom Tools, GTmetrix. and Google Analytics;
- WordPress plugins: P3 (Plugin Performance Profiler)
Optimize the loading time of your website by 8 points
If you methodically follow each of the methods outlined below , you should get exceptional gains optimizations. The methods discussed here may sound techniques: they are but their implementation is not really so do not hesitate to try . It goes without saying that prior backups are necessary to avoid mishandling .
Only 8 points? Yes, because the fundamental techniques are discussed and advanced users will have no difficulty to continue their experiments with the proposed end of the article resources.
# 1 - Change for Good Web Hosting
This is certainly not the easiest and yet I begin by addressing this key point number one thing . Essential in the sense that it will not help to optimize your website if , at the base, the server hosting is slow. Without strong foundation , your house can not stand : he same goes for your website.
2 cases are generally : to change your bid to the next level or opt for a new host .
Let me be clear : offers low-cost pooled never allow you to get a fast and fluid site. Count in 60 € / year minimum for a quality offer . Web projects that start to receive thousands of visitors will go on semi - dedicated or dedicated .
But know that it is hardly useful to rent a dedicated server - often misconfigured or too complex to manage, for a site that receives little traffic. Do not be tempted by attractive offers that will cost you time in learning unless they have human resources internally.
To quickly and efficiently test the full compatibility of WordPress with your web host, use the excellent script phpwpinfo free download on GitHub (click on the ZIP button). Send it to your FTP server and open it in a browser.
Green , nothing to report , yellow is a warning , and red is an error.
A good server will influence both the front end (the part visible to visitors) that the back-office (WordPress administration).
# 2 - Compress Pictures
There are 2 types of images:
- Images on WordPress theme: they will be charged once for all pages visited (logo, buttons, background etc ...);
- The artwork image of your content (articles, pages, custom content type) as screenshots, photos, etc ...);
For the first, there are several methods of compression:
- Online tools such as Smush.it that you can use directly from YSlow;
- Photo editing software like Adobe Fireworks (more powerful than Photoshop to compress for web) or other free (Paint.net on Windows, Mac OS X Preview)
For seconds , know that WordPress applies compression natively import weight - for a slight loss of quality. If you do not take the time to compress upstream is already a plus.
Image compression is feasible and you will get significant performance gains .
To go further technically , use CSS sprites which will reduce the number of queries by combining images. This trick is still reserved for experienced users .
# 3 - Compress CSS and JavaScript files
Similarly for images , we can compress CSS and JS .
CSS styles contain different display properties ( colors, fonts , structure, etc. . ) . Without it, the Web does not look like much.
JavaScript files (JS) add interaction to boost the site: slideshow , sharing buttons on social networks , etc. . JQuery and jQuery UI (User Interface) libraries are used by WordPress .
For CSS, I generally recommend CleanCSS which has interesting settings including selecting the compression level ( readable unreadable ) and does not crash the site (except in rare cases where your theme will use media queries) .
For JavaScript , again , many tools exist, but be sure to check after each compression everything works . JSCompress.com is one of these powerful tools .
The compression of the CSS and JS will effectively create virtual files unreadable to the extent they are composed only of a single line.
# 4 - Use gzip compression (server side)
Compress items by the server before sending it to the client (browser) is one of the most effective methods of optimization. It significantly reduces the weight of a page and saves you a few seconds. The gain is considerable!
To find out if you have this option, please contact with your host who will be better able to advise you.
If you have access to the administration console cPanel (Plesk is equivalent), look for an option called Optimize the website and choose Compress all content.
By analyzing your site with YSlow, notice the smooth running of the operation in the column GZIP.
Scripts outsourced as Google, Facebook and Twitter are automatically compressed by their servers ( global , you can imagine that the bandwidth savings are enormous ) . Internalized scripts that are stored on your server can therefore be a GZIP compression if your host allows.
# 5 - Cache and compress via htaccess (client side).
You can use the cached elements in the browser to prevent sending unnecessary queries each time a visitor returns to your site. Logo , CSS, JS and other rarely have to change on a site it is interesting that the browser stores cache to reduce the number of unnecessary queries. Why ask the stylesheet of the site while it changes only very rarely every time?
To apply this technique, you can simply modify the . Htaccess file located in the root of your Web project on your FTP server. This file is a bit unusual is hidden by default as indicated by the presence of the point at the beginning . Check the settings in your FTP client ( FileZilla , Transmit, CyberDuck etc ...) if such files are not hidden by default. Otherwise, create it using a file editor that WordPress created when you change the structure of your permalinks .
Attention to thoroughly test your site once this technique applied and in several browsers in case this method would pose concern .
# MOD_DEFLATE COMPRESSIONIn the Statistics tab of YSlow Firefox, notice the effectiveness of such a method (do not forget to empty your browser cache to avoid distorting the tests):
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/x-httpd-php
#Pour les navigateurs incompatibles
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
#ne pas mettre en cache si ces fichiers le sont déjà
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip
#les proxies doivent donner le bon contenu
Header append Vary User-Agent env=!dont-vary
# BEGIN Expire headers
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 7200 seconds"
ExpiresByType image/jpg "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
AddType image/x-icon .ico
ExpiresByType image/ico "access plus 2592000 seconds"
ExpiresByType image/icon "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 2592000 seconds"
ExpiresByType text/javascript "access plus 2592000 seconds"
ExpiresByType text/html "access plus 7200 seconds"
ExpiresByType application/xhtml+xml "access plus 7200 seconds"
ExpiresByType application/javascript A259200
ExpiresByType application/x-javascript "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
<FilesMatch "\\.(ico|jpe?g|png|gif|swf|css|gz)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
<FilesMatch "\\.(js)$">
Header set Cache-Control "max-age=2592000, private"
</FilesMatch>
<filesMatch "\\.(html|htm)$">
Header set Cache-Control "max-age=7200, public"
</filesMatch>
# Disable caching for scripts and other dynamic files
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>
</IfModule>
# END Cache-Control Headers
# 6 - Remove unnecessary plugins
Plugins or extensions bring new functionality to the heart of WordPress. Although they facilitate a large number of technical operations for the beginner, it remains that many of them are poorly optimized - without the developer is responsible.
Let me explain . You have installed a module contact form ( Contact Form 7 to name him ) on a page of your site. This plugin has a CSS style sheet and a JavaScript required for its proper functioning file. However, these two files will generate two additional queries on all pages visited your site. It would be wise to load them on the relevant page - something the developer can not predict natively , you 'll understand .
For example, you can use this snippet to Contact Form 7, placing the functions.php file in the folder of your WordPress theme :
// Optimisation de Contact Form 7These lines of code will disable the loading of the JS file on all pages of the site except for the page with permalink 'contact' at line 4 ( modify if necessary).
add_action( 'wp_print_scripts' , 'cf7_js' , 100 );
function cf7_js() {
if ( !is_page('contact')) {
wp_deregister_script( 'contact-form-7' );
}
}
add_action ( 'wp_print_styles' , 'cf7_styles' , 100 );
function cf7_styles() {
wp_deregister_style( 'contact-form-7');
wp_register_style( 'contact7' , get_template_directory_uri() . '/css/contact.css' );
wp_enqueue_style( 'contact7', get_template_directory_uri() . '/css/contact.css' );
}
Ditto for CSS. However, I go further here by not loading that provided by the plugin but mine that I placed in the theme CSS file. Interest ? Use custom styles and adapted to the project and not the default .
This case study is applicable to most of the plugins that modify the front-end functionality . You can easily identify with inspection tools like Firebug web browsers .
Another point to consider: some plugins use the same scripts and creating duplicate requests. Also make sure that the scripts used to-date.
Many plugins are useless insofar as a few lines of PHP code enough to get the same result. I assure you, it is easier than it seems to add / edit functionality in PHP WordPress .
# 7 - Optimize or change WordPress theme
The WordPress theme is a key element in the display of your site speed. Often, developers themes override feature their creations to maximize sales. Unfortunately, we must recognize that it works because it has more value for money we are happy ... more
However, it is best to focus primarily on the graphical appearance, additional features can be added later in the form of plugins.
A theme is not a plugin! Think of the consequences the day you change theme if certain features are directly related to the theme code ... it will not be easy for the average user to migrate a slideshow or many shortcodes available (shortcuts that generate buttons and other columns directly from the publisher).
A few tips:
- Choose an elegant but limited in terms of features theme;
- Prefer a clean source code: hard to see for a non-developer I admit;
- Analyze the performance of the demonstration URL (including weight and the number of queries, the time is not a reliable data insofar as they are generally dedicated servers for demos);
- Buy your theme from recognized professionals (online shop or web agency to tailor-made - which remains the ideal);
Certainly not overlook the importance of this choice that will determine the success of the project.
# 8 - Streamline the display by moving the JavaScript files in the footer
We say that a Web page is fluid if there is no blocking during loading thereof. Some greedy scripts will literally block the display of the page or even slow down the browser as a whole.
This is due to congestion: too many scripts, kill scripts!
This technique should be implemented by experienced users. Indeed, some scripts will not work if you load at the end of the page.
If the theme is coded JS scripts are loaded by the functions.php file (or one of its dependent files) - in any case by the header.php or footer.php file. To be precise, they are injected by eigenfunctions WordPress directly involved in these locations.
Therefore identify lines that resemble the following:
wp_enqueue_script('NOM_DU_SCRIPT', get_template_directory_uri() . '/js/fichier_script.js', 'fichier_dependant', false);Note the presence of a false parameter at the end of the line. The switch to true to indicate that WordPress should load in the footer and not in the header of the site.
Thus, your visitors will begin their reading and even click on one of your content even before some additional scripts are loaded.
Test result after each modified line. Development tools in your favorite browser, notice the change in position in the process of loading the site.
resources
If you are thinking seriously about the dig, some technical resources:
The tips presented here are relatively simple to implement and you will get a time-saving therefore the most of your WordPress sites. However, extensive techniques are numerous and it is often a harsh breath work that requires patience and determination to get the maximum score in the tools of analysis.
One last tip: test and retest!
A Your Tour Now!
And you, what are your best tips to speed up the loading time of your WordPress site ? "
Modèles Web pour Dreamweaver CS3 / CS4 / CS5 / CS6 et CC (Creative Cloud). Modèles de sites Web uniques avec de nombreuses options. www.templatemonster.com/fr/type/modeles-dreaweaver/
RépondreSupprimer