Increase Google Page Speed for JNews
As we advertise on our themes, this themes (JNews) potentially reach perfect score speed by minimal effort. Its doesn’t mean that by just installing JNews you will automatically get perfect score on Google Page Speed. You will still need to configure your server to reach maximum result. Some of JNews user reach almost perfect score with very minimal effort. some of them are :
It is also important to remember that achieving that 100/100 might not always be possible depending upon how your environment is setup. This environment can be your server location, server setting, server speed, your content stack, and much more.
1. Leverage Browser Caching
When a web browser displays your webpage it has to load several things like your logo, your CSS file, 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 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>
2. 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 apache server you can add code below to tell your server to enable GZIP compression when returning response to browser.
<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>
3. Optimize images
Our themes try to optimize the image by make every image on container as fit as possible event on responsive element by loading different image size on different screen.
But image still need to be optimized. You can install plugin such as wp-smushit to optimize image.
or if you have access on your server, you can use this command (Imagick need to be installed) :
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 {} \;
4. Render-Blocking Resources Above the Fold
Render blocking usually becoming nightmare when you optimize your server speed. This metric can be the hardest to fix. You can install plugin such as Autoptimize to optimize your website.
5. Minify Javascript, CSS, and HTML
One feature of Autoptimize is Asset Minification. By enabling this feature, asset (javascript & CSS) will automatically minified.
Please note, that not all plugin compatible with Autoptimize . Some of them may have issue because inlining jQuery acess. If you have this issue, please excluded the main Jquery file (jquery.js) from Autoptimize. But by excluding this file, will make javascript blocking render of the site.
6. Minify HTML & Reduce Server Response Time
Other feature of Autoptimize is HTML minification. By enabling this feature your HTML will be compressed. But the downside of this feature is will increase your server load. This feature need quite extensive CPU usage.
Using WP Super Cache plugin or any other HTML Caching plugin can be solution not only for extensive CPU usage because of HTML minification, also increase your server response time.
Summary
As you can see the recommendations from Google PageSpeed Insights are valuable and if followed can help optimize your site. By configuring your website correctly, your website can be reach optimal potential speed on Google Page Speed.
All plugin we mention above is not a mandatory to install when using JNews. You still have alot of plugin option on 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.
We also suggest you to do speed optimization after you finishing setting up your website. So you won’t need to refresh the cache everytime you made any change on your site.