Hello, this is Matsunaga from the Creative Department Operations Team.
Our main role in web page operations is production (coding).
Looking back on this year, I think it was a year in which we received many requests to improve our smartphone sites.
We have also heard from customers that, as more and more people are now accessing their sites from smartphones than from PCs, they would like to make a serious effort to revamp their smartphone sites.
As many of you may know, around April of this year, Google began recommending optimizing web pages for smartphones, and the term "mobile-friendly" was coined.
Mobile friendly means that a website or web page is optimized for display on mobile devices such as smartphones and tablets.
Mobile-friendliness also seems to have a slight impact on Google's search algorithm.
How many points does your smartphone page have?
One way to measure how mobile-friendly your site is is to use an application service called PageSpeed Insights.
PageSpeed Insights is a web app provided by Google that "scores your mobile pages." It scores your mobile page from two perspectives: "speed (how quickly the page loads)" and "user experience (what users experience on the page)," each out of 100 points.
PageSpeed insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja
Improve your mobile page
As part of our smartphone optimization efforts, we received a request from a customer to improve their PageSpeed Insights score. At that time, we researched how to specifically optimize for smartphones.
Basically, it's about making the data lighter, but we tried various things like using browser cache and devising ways to load CSS/JS.
I'll tell you about one of the easier ways to do this.
Smartphone Improvements Part 1
Image Compression - Speed -
Even if you compress an image using the image compression tools JPEG MINI or PNG MINI, you will receive a warning that "correction is needed."
After researching why this was the case, I discovered that JPEG MINI and PNG MINI are called basic compression, and that more advanced compression called "lossless compression" is required.
Lossless compression is a compression method that does not result in loss of data.
An easy way to achieve lossless compression is to download it from the link below that appears after measurement with PageSpeed Insights.
When I uploaded the downloaded file, the warning from PageSpeed Insights no longer appeared.
This link is very useful, but please note that if the image is too large, it may reduce the image size.
Smartphone Improvements Part 2
Utilize browser cache ~Speed~
Browser cache is a function that temporarily stores files in the browser. As long as data exists in the cache, it will be read from the cache when you access the page.
To enable browser caching, you can set up the cache by adding the following to .htaccess.
Header set Cache-Control "max-age=2592000, public"
I'll briefly explain the code.
"Files ~" allows you to choose which file extensions to store in the cache.
In the above example, the targets are "gif, jpeg, jpg, png, ico", so if you want to add CSS or JS, you can add them here.
You can set the expiration time for cache storage with "max-age=2592000".
The number part is the number of seconds, so by changing this you can determine the period for which the data will be stored in the cache.
Smartphone Improvements Part 3
Fit content to viewport – User experience
On PC sites, the width of the content is specified in pixels, but on smartphones, if pixels are specified, the content may overflow the display width depending on the device, and the content may be cut off. If the content is cut off, users may have to scroll the screen to see it, or depending on the CSS settings, the content may not be displayed at all, making for an uncomfortable browsing experience.
Liquidize to fit size to viewport
Make your content fit the viewport by liquidizing it.
You need to specify the content width in "%" instead of "px".
The process of liquifying involves gradually replacing widths specified in "px" with "%", but there are some things you should do before starting the liquifying process.
Set "box-sizing" to "border-box"
* {
box-sizing: border-box;
}
In CSS terms, "box-sizing" is a property that sets how to specify the size of an element.
If you specify "box-sizing" as "border-box", the size specification includes border and padding, so even if you specify the border and padding in px, it will be easier to calculate the width in percentages.
Therefore, before liquidizing, add "box-sizing: border-box;" to the first line of your CSS.
By the way, the current (November 2015) default setting for "box-sizing" in many browsers is "content-box". "content-box" does not include border and padding when specifying the size.
Once you're ready for "box-sizing", just convert the widths of your images and content into "%".
We have explained three areas for improvement above, but by using PageSpeed Insights you can find other hints for improvement.
It's not that you should just focus on the score, but why not use PageSpeed Insights as a barometer for mobile optimization?
To make it easier for users to browse, do everything you can to improve your mobile page.
MATSUNAGA Satoru