Just looking back on my notes from when I had a consultation with Google regarding site speed, and specifically about mobile site speed:
They used this tool to test site speed and get recommendations -
https://developers.google.com/speed/pagespeed/insights/
They recommended doing these things -
Enabling Browser Caching for Apache
Enabling Browser Caching for IIS
Enabling Browser Caching for Nginx
Enable Compression for Apache
Enable Compression for IIS
Enable Compression for Nginx
Image Optimization - Compress Images
Minify CSS
Eliminate Render-Blocking JavaScript in Above-the-Fold Content
Eliminate Render-Blocking CSS in Above-the-Fold Content
Avoid Landing Page Redirects
Bundling Static Resources (JS / CSS)
Enable Keep-Alive
Font Elimination
When I actually went through this process, they used a plugin called autoptimize.
A couple of things I noted that made a big improvement were -
Adding CSS inline that is needed for above the fold page load -
Get the link to your main CSS file and open it. Copy the code and paste it here -
https://jonassebastianohlsson.com/criticalpathcssgenerator/
add in website URL as well.
then we get css that is required above the fold
combined all critical css stuff together
in aotoptimize in advance settings
go to Inline and Defer CSS
then add the css code in there and save
clear all caches and test the site
this basically loads critical css first for abvove fold stuff, then it defers the rest of the css
If you have loaded google web fonts or similar, try to replace them with default fonts because not having to load these fonts makes for a big improvement.
This is another tool Google recommended specifically for dealing with mobile site performance tuning -
https://www.webpagetest.org/
The general recommendations they gave specifically relating to mobile speed improvement were -
First impressions
Eliminate render-blocking JavaScript
in above-the-fold content
Eliminate render-blocking CSS
in above-the-fold content
Prioritize visible content
Enable Asynchronous Scripts
Enable Keep-Alive
number of requests
Avoid landing page redirects
Enabling browser caching
Avoiding loading duplicate JavaScript and CSS
files
Use CSS Sprites (Combining multiple
images to a single image)
Avoid CSS @ Import
Bundling Static Resources (JS / CSS)
page weight
Image optimization - Compress images
Image optimization - Removing duplicate images
Minify CSS
Minify JavaScript
Enable compression
Use of CDN (Content Delivery Network)
Hope that helps.
