Mobile friendly vs Mobile Optimized
A common misconception! Lets see in detail
Sites that auto adjust itself according to the screen are commonly referred as mobile friendly or responsive websites. There are several grid system frameworks such as Bootstrap, Foundation, Skeleton etc, exist today to provide the responsiveness to a website. These frameworks mainly concentrate on a user’s view irrespective of the device he/she looking in.
More over, they provide additional key words such as aria-label, aria-labelledby, sr-only, sr-onlf-focusable etc which helps the website to perform more functionalities on screen readers. The main object of a mobile friendly site is, the user should find the website easy to navigate and read the content without zooming in or out.
Most WordPress site themes now-a-days are already equipped with these frameworks. Beaver Builder is the best plugin & theme in my opinion. Designers who like to code can simply use media queries to achieve the responsiveness and setup their own breakpoints.
Most commonly used responsive site break points:
- 1200px and up (Desktops)
- 99px and up (laptops)
- 768px and up (tablets)
- Under 786px (mobile)
Tip: Do not use flash content on websites.
SEO companies and Internet marketing firms use this term commonly to refer a non-erroneous fast loading website. Google’s AMP project is an example of a mobile optimized site. The main aim is to decrease the loading speed and present the content to the user as fast as possible.
7 things to achieve an optimized website
- Usually, images are the culprit of a slow loading site. Use WordPress if you don’t want to deal with manually resizing the images and use srcset in image tags
- Design the websites with little to no animation. Use css keyframes if the animation is absolutely necessary
- Apply lazy load for images and iframes
- Avoid fonts that take longer to load.
- Since most of the website content is static, consider using a CDN (Content Delivery Network)
Advanced optimizing tips
- Gzip the content
- Google’s page speed is very good at serving images in webP format. Further more, it optimizes the images dynamically so consider adding it to the server as a module (Available for both NGINX & APACHE)
- Turn off unnecessary logging at server level
- It is better to keep the html root folder close to the server config file rather than bury inside folders
- Use CSS sprite sheet for images because it is quicker to load single large file rather than multiple small files
- WordPress users must consider removing post revisions from time to time.