Saturday, March 26, 2016

Image Optimization Tools: Making WordPress Pages Load Faster

With the recent launch of Accelerated Mobile Pages, which reminded everyone of Facebook Instant Pages and Apple News, it’s clear they want us slimming down our web pages. They want Speedy Gonzales, but we’re offering a fat, lazy mouse with unnecessarily giant ears.


And by “they” I mean: publishers, platforms, and your everyday web user. All of us have the need for speed don’t we?


Most people are using mobile devices these days, and besides, pages simply take too long to load regardless of browsing device (in many cases). It’s our images that are, in general, unnecessarily large. In file size, that is.


Really, there are a lot of factors that can affect the time it takes to load a web page, but my focus here today is supporting WordPress users, and talking about how we can keep our images lean (and optionally mean).


May I digress for a couple seconds though?


I personally blame the majority of web page slowness on the fact that most things are being pulled from databases and that multiple queries are run within one page load. What happened to the good ol’ days of organized folder structure, static text files, and include files with clean hand-coded HTML? When I learned of the BLOB field type for databases a decade and a half ago, I shook my head and screamed “why, why, why!” But hey, I get it, databases simplify things and reduce redundancy. Moving on.


Overall WordPress Web Site Optimization


For my WordPress sites, I used to take several days just to implement all (or most) of the best practices for optimizing web pages for speed. These days though I use a managed WordPress host that handles many tasks on my behalf.


In terms of speed, they have me covered for:



  • An optimized, tweaked, web server that understands the nuances of WordPress.

  • A proprietary caching system that knows when to serve dynamic pages, and when it’s better to take a snapshot of a page on first load, and serve that instead of hitting the database. See! 
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
Posted by
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta content='https://www.blogger.com/profile/04820791878865708895' itemprop='url'/>
<a class='g-profile' href='https://www.blogger.com/profile/04820791878865708895' rel='author' title='author profile'>
<span itemprop='name'>Diane</span>
</a>
</span>
</span>
<span class='post-timestamp'>
at
<meta content='http://dmflifestuff.blogspot.com/2016/03/image-optimization-tools-making.html' itemprop='url'/>
<a class='timestamp-link' href='https://dmflifestuff.blogspot.com/2016/03/image-optimization-tools-making.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2016-03-26T21:22:00-07:00'>9:22 PM</abbr></a>
</span>
<span class='post-comment-link'>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-818755444'>
<a href='https://www.blogger.com/post-edit.g?blogID=1880026501119027089&postID=4444988598498240085&from=pencil' title='Edit Post'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
<div class='post-share-buttons goog-inline-block'>
<a class='goog-inline-block share-button sb-email' href='https://www.blogger.com/share-post.g?blogID=1880026501119027089&postID=4444988598498240085&target=email' target='_blank' title='Email This'><span class='share-button-link-text'>Email This</span></a><a class='goog-inline-block share-button sb-blog' href='https://www.blogger.com/share-post.g?blogID=1880026501119027089&postID=4444988598498240085&target=blog' onclick='window.open(this.href,

No comments:

Post a Comment