In this article, we will explain to you how to setup page speed optimization on your website with JNews. By configuring your website correctly, your website can reach the optimal page speed results.
- Let’s Prepare
- Setup JNews Page Speed
- Setup Google Analytics
- Enable Compression
- Optimize Images
- Leverage Browser Caching
- Manage Minify Assets
- Manage Content Cache
1. Let’s Prepare
- Please make sure if you already using the latest version of JNews theme v6.5 or higher and keep all JNews plugins up to date.
- We recommend you to only activate the plugin that you really need. Less number of plugins will decrease the resource that needs to load and decrease the functionality that needs to be executed. This thing will improve your site performance.
- We suggest you do page speed optimization after you finish setting up your website. So you won’t need to refresh the cache every time you made any change on your site.
2. Setup JNews Page Speed
On JNews v6.5 we provide some speed options on the Customizer. In this case, please go to WP Admin Dashboard → Appearance → Customizer → JNews Additional Option → Speed Optimization → then enable all options.
3. Setup Google Analytics
If you’re using Google Analytics on your website, we already provide an option to handle this thing. In this case, you don’t need to use an additional plugin to set up Google Analytics.
For setup, please go to WP Admin Dashboard → Appearance → Customizer → JNews Additional Option → Analytics / Tracking → then insert your Google Analytics code and enable Load Analytics Locally for better page speed result.
4. Enable Compression
Implementing the enable compression suggestion can be done simply in your server’s settings. If you are not very technical, you can ask your technical support team to enable GZIP compression for your server.
On the Apache server, you can add code below to tell your server to enable GZIP compression when returning a response to the browser.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule> |
5. Optimize Images
Our themes try to optimize the image by making every image on the container as fit as possible.
But all images still need to be optimized. You can install a plugin such as wp-smushit to optimize the image.
or if you have access on your server, you can use this command (Imagick need to be installed) :
1 2 |
find /var/www/jnews.io/wp-content/uploads -name "*.jpg" -exec convert {} -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace RGB {} \; find /var/www/jnews.io/wp-content/uploads -name "*.png" -exec convert {} -strip {} \; |
If you are not very technical, you can ask your technical support team to set up it on your server.
6. Leverage Browser Caching
When a web browser displays your webpage it has to load several things like your logo, your CSS files, JS files, and other resources.
What browser caching does is “remember” the resources that the browser has already loaded. When a visitor goes to another page on your website your logo, CSS files, etc. do not need to be loaded again, because the browser has them “remembered” (saved). This is the reason that the first view of a web page takes longer than repeat visits.
The code below tells browsers what to cache and how long to “remember” it. It should be added to the top of your .htaccess file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
# 1 YEAR ExpiresActive On <FilesMatch "\.(otf|ico|pdf|flv|ttf|eot|svg|woff|mp3|ogg|mp4|webm|ogv)$"> Header set Cache-Control "max-age=29030400, public" ExpiresDefault "access plus 1 years" Header unset Last-Modified Header unset ETag SetOutputFilter DEFLATE </FilesMatch> # 1 MONTHS <FilesMatch "\.(jpg|jpeg|png|gif|swf)$"> Header set Cache-Control "max-age=2419200, public" ExpiresDefault "access plus 1 month" SetOutputFilter DEFLATE </FilesMatch> <FilesMatch "\.(xml|txt|css|js)$"> Header set Cache-Control "max-age=604800, public" ExpiresDefault "access plus 1 week" SetOutputFilter DEFLATE </FilesMatch> # 30 MIN <FilesMatch "\.(html|htm|php)$"> SetOutputFilter DEFLATE </FilesMatch> |
Again, if you are not very technical, you can ask your technical support team to set up it on your server.
7. Manage Minify Assets
For managing the minify assets of your website we recommend you use Autoptimize plugin. This plugin will help to improve the page speed performance of your website. You can follow the setup below :
* Note: If you encounter JS issue that related to undefined jQuery error, please try to insert “wp-includes/js/dist/, wp-includes/js/tinymce/, js/jquery/jquery.js” on the Exclude scripts from Autoptimize input field.
* Then hit Save Changes and Empty Cache button
* Then hit Save Changes button
8. Manage Content Cache
For managing the content cache of your website we recommend you use WP Super Cache plugin. This plugin generates static HTML files from your dynamic website content. After an HTML file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts. You can follow the setup below :
You still have a lot of plugin options on the WordPress repository such as WP Fastest Cache, WordPress LiteSpeed cache (if you using LiteSpeed) that may work better than WP Super Cache on your condition.
If you find any problem or need help please ask help on our support forum here. Our support team will help you asap.