Score 100/100 PageSpeed With Newspaper WordPress Theme

Hello all,

I personally think the Newspaper theme is the best theme out there for publishers. It is fully loaded with features and is highly customizable.

The loading speed of a website can make or break the success of a site. You can have awesome content and a similar site can have mediocre content, but if your pages load extremely slowly and your competition’s pages load extremely fast, your competition is more likely to get the traffic and not you. Google likes fast pages.

Fortunately, there are some ideas to score 100/100 PageSpeed.

Use –
WP Super Cache plugin
CloudFlare – use rocket loader

.htaccess code

# BEGIN Expire headers
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 5 seconds"
ExpiresByType image/x-icon "access plus 604800 seconds"
ExpiresByType image/jpeg "access plus 604800 seconds"
ExpiresByType image/png "access plus 604800 seconds"
ExpiresByType image/gif "access plus 604800 seconds"
ExpiresByType application/x-shockwave-flash "access plus 604800 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType font/truetype "access plus 604800 seconds"
ExpiresByType font/opentype "access plus 604800 seconds"
ExpiresByType application/x-font-woff "access plus 604800 seconds"
ExpiresByType image/svg+xml "access plus 604800 seconds"
ExpiresByType application/vnd.ms-fontobject "access plus 604800 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers
<IfModule mod_deflate.c>
<filesMatch "\.(js|css|woff|html|php)$">
SetOutputFilter DEFLATE
</filesMatch>
</IfModule>
<IfModule mod_mime.c>
 <FilesMatch "\.html\.gz$">
 ForceType text/html
 FileETag None
 </FilesMatch>
 AddEncoding gzip .gz
 AddType text/html .gz
</IfModule> 

Output results will amaze you!!
Read full detailed tutorial here – https://goo.gl/e6pVWs

Thanks for reading.
have a nice time ahead 🙂

• This topic was modified 9 years by Amit.

Heya!
just to chime in …
if they/you are using mod_pagespeed (possibly not), don’t forget to add a webp type;

for advanced users with WOFF2 fonts, you would also add TTL for woff2

e.g.,

ExpiresByType image/webp "access plus 604800 seconds"
ExpiresByType application/font-woff2 "access plus 604800 seconds"

depending on server/CDN setup you might need (out side the time to live section)

AddType image/webp .webp 
AddType application/woff2 .woff2

(on many servers, fyi, you can also do: “1 month” if you prefer)

e.g.,

ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"

I have dedicated server, so as ever each setup type will vary depending on your use 🙂

(( FYI: what is WOFF2? Once you get obsessed with speed, you start getting to the “next level” stuff like so:

The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases). WOFF 2.0 is available since Chrome 36 and Opera 23.

https://gist.github.com/sergejmueller/cf6b4f2133bcb3e2f64a ))

• This reply was modified 9 years by simchris.
• This reply was modified 9 years by simchris.

Hey Amit ! Thanks for sharing this.

Hwy Chris, what kind of fonts do we have with Newspaper theme or Google fonts? Are these woff2 type? How can I conert my fonts to Woff2 type?

Is there any way to upload our own 2-3 fonts that we use on our side and then disable google fonts for speed optimisation?

Thank you. 🙂

Hey Chris S,

Thanks for your suggestions. But all your suggestion for those who have basic knowledge of programming.

As I can see theme package contains the woff file. So there is no need to add the following the line in .htaccess

ExpiresByType application/font-woff2 "access plus 604800 seconds"

The htaccess code provided by me do not have pagespeed module enabled.
Those who have pagespeed module enabled from cPanel they may disable it from cPanel or by adding following code to the .htaccess file.

<IfModule pagespeed_module>
ModPagespeed off
</IfModule>

I would suggest learners to disable pagespeed module as it causes cache issue* If it’s not configured properly.

hello nano2408,

You can convert woff file to woff2 using online tools for example https://everythingfonts.com/woff-to-woff2

Check the following thread to use custom uploaded fonts
Check Method 2 https://forum.tagdiv.com/topic/how-to-disable-google-fonts-2/#post-135462

I am struggling with the page speed can you suggest me how to resolve it… My blog link is http://buddymantra.com

Hello buddymantra,

Follow this tutorial https://goo.gl/e6pVWs to improve page load speed.

My website results – http://prntscr.com/cmnatw

Thanks for your understanding.

• This reply was modified 9 years by Amit.

@snaxzer thanks this works for me too but there are little issues.
1. My Search box at the top right stopped displaying.
2. MY sidebar stopped being sticky
3. The most post at bottom right did not showup on post pages anymore.
When I disable rocket loader in Cloudfare all the features work but very low pagespeed.

View demo here: https://goo.gl/N9FkD5

Hello @hadharm,

Considering that you have followed all the steps given in the tutorial https://goo.gl/e6pVWs
After that, you have to purge all the caches from WP- Super Cache Plugin and Browser as well.

Don’t minify any CSS of js manually using any online tool or a plugin.

Hope this will help you.

Thanks for your understanding

• This reply was modified 9 years by Amit.

Yes @snaxzer I don’t minify CSS with any plugin except the one done in my CloudFlare account as explained in your article. Though I was using W3 Total Cache before but I have uninstalled it to follow your tutorial.
What could be happening???

Hello @hadharm,

make sure to also remove: advanced-cache.php, db.php, w3tc/, w3-total-cache-config.php from wp-content/

Thanks for your understanding

Succesfully solved thanks.

Hello @hadharm

Glad to help you 🙂

Optimised results:

@snaxzer my search button on desktop is not working again.

@Amit Malewar your site shows different stats now – http://prntscr.com/d3f90i & http://prntscr.com/d3f95z

Hello hadharm

Upon checking I can see it’s working fine from my end.

see http://prntscr.com/d3oce6

Clear web browser cache and check again.

Hello beserk77

It’s because we are making some changes to the server and the function files.

Great but i’m running nginx so no htaccess for me 🙁

Hello @Roboman

Install CloudFlare Plugin https://wordpress.org/plugins/cloudflare/ from WordPress Dashboard
Turn ON Rocket loader from the CloudFlare dashboard.
Increase Browser Cache Expiration value (minimum 8 days)
Clear all cache including Browser cache

Tutorial has been Updated: https://goo.gl/Las9Pq

Also, just to pop in here …

many folks should look into https + http/2 on hosting platform;
as we are now running this and much much faster than classic methods for many things we’d been doing like critical CSS injection, etc.

Hello Amit, thanks for the suggestion. I posted a comment/question on your blog.

Hello Chris S,

You are right http/2 have brought some major changes in terms of the optimizations. I have already shared an article about it.