Entspannt zu Google PageSpeed 100%, damit es keine Qual wird. Diskussionen, ob die Erreichung von Google PageSpeed Insights Werten mit 100% anzustreben sind, gibt es viele. Google ist jedoch nicht der alleinige Wert, der zählt. Es geht auch um Ladezeiten, SEO, Requests, Schriften und viele andere Puzzleteile, die eine Website ausmachen. Wer aber das Optimale nicht erreicht, kann nicht bewusst zugunsten von Usability und Experience(UX) die PageSpeed (Lighthouse) Werte reduzieren.
1. Zum Einstieg
Google PageSpeed 100% sind die Werte, die ausgespuckt werden, wenn mit Google PageSpeed Insights und Lighthouse der Beitrag getestet wird. Wenn die Ergebnisse alle 100% zeigen, wird gefeiert, weil ja das Ziel Google PageSpeed 100 % erreicht ist.
Die Ausgangsposition für diesen Beitrag liegt bei Lighthouse und PageSpeed sauber bei 100%, wobei hier nur die PageSpeed-Werte betrachtet werden sollen. Die Lighthouse-Werte sind in gewissen Grenzen von dem aufgerufenen Rechner abhängig.
Ok, bei den Mobile-Werten ist die Leistung nur bei 99%. Der Wert ist aber sehr schwer auf 100% zu bringen, weil die Hinweise auf die Minderung sehr dürftig sind.
Da wir nun feiern konnten – wir haben ja 100% erreicht – werden einige Plugins hinzugefügt, die für mehr Usability und Experience(UX) sorgen.
Details sind im Kapitel 4. Plugins für User Experience (UX) und Usability zu finden.
2. Aller Anfang ist schwer
Die Auswahl eines Standard Theme wird nicht zum Erfolg führen, weil es einfach nicht den Strukturen folgt, die erforderlich sind, um das Ziel Lighthouse 100% zu erreichen. Bildgrößen, Content-Bereiche, Sidebar etc. sind wenig oder gar nicht anpassbar. Hier trifft man einfach auf zu starre Strukturen, die Individualität nicht gestatten.
Eine Website sollte individuell und persönlich sein und das Widerspiegeln, was den Websiteinhaber – Person oder Firma – ausmacht.
Es ist wichtig, ein geeignetes Starter-Theme auszuwählen, um die erforderlichen Strukturen implementieren zu können.
Ein Wermutstropfen ist es natürlich, dass man sich dann mit CSS und PHP herumschlagen muss – wobei es irgendwann doch zum Spaß ausartet. Beides ist nicht unbedingt schwer zu erlernen, um gewisse Grundlagen beherrschen zu können, zum Profi muss jedoch viel Ehrgeiz investiert werden. Wenn das Ergebnis jedoch eine individuelle Website mit großartigen PageSpeed Werten ist, wird der Aufwand gerechtfertigt.
2.1 Warum und wieso dieses Theme
Mit underscores.me als Starter Theme ist eine Top Grundlage gegeben, weil alle Strukturen enthalten sind, die zum Aufsetzen einer tollen Anwendung enthalten sind – es ist eben von den Leuten die auch WordPress geschrieben haben.
Wenn die Website das erste Mal mit diesem Theme aufgerufen wird, ist das Aussehen erschreckend und zeigt eigentlich, dass man einiges zu tun hat, um sie zu einem Erlebnis zu machen.
2.2 Auswahl von Plugins
Plugins sind unbestritten erforderlich, denn hier wird die Fachkompetenz geliefert, die man selbst nicht hat – und auch vom Arbeitsaufwand nicht realisieren kann. Einige sind mit recht kostenpflichtig, weil hier ganze Teams ihren Lebensunterhalt verdienen. Inwieweit der Preis angemessen ist, muss jeder selbst einschätzen.
Die Entwickler der freien Plugins haben aber auch ganz sicher eine Spende oder einen Kommentar verdient, weil auch hier persönlicher Ehrgeiz und viel Zeit eingebracht wird, um das Plugin leben zu lassen. Wir haben nichts von großartigen Plugins, die irgendwann sterben, weil der Schöpfer es aufgibt.
Zu viele Plugins können den Brei verderben, ein schlechtes Plugin verdirbt ihn garantiert. mediendr.de
Die Anzahl von guten Plugins ist nicht ausschlaggebend für das Ergebnis, wenn gewisse Regeln eingehalten werden.
2.3 Trennung von Mobile und Desktop
Eine Trennung von Mobile- und Desktop-Anwendung ist unbedingt erforderlich, damit man über Verzweigungen Einfluss nehmen kann.
Damit ist es möglich:
- Sidebars nur für Desktop
- Gezieltes Wegschalten von Sidebars
- Auswahl Bildgrößen für Desktop und Mobile
- Unterschiedliche Schriften
2.4 Auswahl Bildgrößen
Die Standardbildgrößen von WordPress passen nicht zum eigenen Layout – hier sind Anpassungen und Erweiterungen erforderlich. Vorgabe ist immer der zur Verfügung stehenden Content-Bereich, damit nicht der Internet Explorer die Bilder anpassen muss – dies ist dann meistens der Grund für schlechte Ladezeiten.
3. Verwendete Plugins
Nr.
Name
Plugin-Link
Version
Desciption
1
Query Monitor
3.17.0
The developer tools panel for WordPress.
2
Shortcodes Ultimate
7.3.3
A comprehensive collection of visual components for WordPress
3
ACF Content Analysis for Yoast SEO
https://wordpress.org/plugins/acf-content-analysis-for-yoast-seo/
3.1
Ensure that Yoast SEO analyzes all Advanced Custom Fields 5.7+ content including Flexible Content and Repeaters.
4
Advanced Custom Fields: Extended PRO
0.9.1
All-in-one enhancement suite that improves WordPress & Advanced Custom Fields.
5
Admin Columns Pro
6.4.13
Customize columns on the administration screens for post(types), users and other content. Filter and sort content, and edit posts directly from the posts overview. All via an intuitive, easy-to-use drag-and-drop interface.
6
Admin Menu Editor Pro
2.26.1
Lets you directly edit the WordPress admin menu. You can re-order, hide or rename existing menus, add custom menus and more.
7
Advanced Custom Fields PRO
https://www.advancedcustomfields.com
6.3.11
Customize WordPress with powerful, professional and intuitive fields.
8
Advanced Database Cleaner PRO
https://sigmaplugin.com/downloads/wordpress-advanced-database-cleaner
3.2.10
Clean database by deleting orphaned data such as 'old revisions', 'old drafts', 'orphan options', etc. Optimize database and more.
9
Akismet Anti-spam: Spam Protection
5.3.5
Used by millions, Akismet is quite possibly the best way in the world to protect your blog from spam. Akismet Anti-spam keeps your site protected even while you sleep. To get started: activate the Akismet plugin and then go to your Akismet Settings page to set up your API key.
10
AME Branding Add-on
https://adminmenueditor.com/branding-add-on/
1.3.10
Adds branding options to Admin Menu Editor Pro. It creates three new tabs on the "Settings → Menu Editor Pro" page: "Branding", "Login", and "Colors".
11
Borlabs Cookie
3.2.11
Borlabs Cookie helps you make your website GDPR compliant by providing an opt-in option to its visitors.
12
Contact Form 7
6.0.2
Just another contact form plugin. Simple but flexible.
13
Disable Gutenberg
https://perishablepress.com/disable-gutenberg/
3.2.2
Disables Gutenberg Block Editor and restores the Classic Editor and original Edit Post screen. Provides options to enable on specific post types, user roles, and more.
14
Yoast Duplicate Post
https://yoast.com/wordpress/plugins/duplicate-post/
4.5
The go-to tool for cloning posts and pages, including the powerful Rewrite & Republish feature.
15
Edit Author Slug
https://github.com/thebrandonallen/edit-author-slug/
1.9.1
Allows an Admin (or capable user) to edit the author slug of a user, and change the Author Base. i.e. - (WordPress default structure) http://example.com/author/username/ (Plugin allows) http://example.com/ninja/master-ninja/
16
Flamingo
-
2.5
A trustworthy message storage plugin for Contact Form 7.
17
FooBox Image Lightbox (Premium)
2.7.33
The best responsive lightbox for WordPress.
18
Gonzales
2.4
Speed up your site by deactivation of useless plugins, scripts and styles.
19
WP Armour - Honeypot Anti Spam
http://wordpress.org/plugins/honeypot/
2.2.05
Add honeypot anti spam protection.
20
Justified Image Grid
4.7
Create beautiful photo grids from sources you already use.
21
Loco Translate
https://wordpress.org/plugins/loco-translate/
2.6.14
Translate themes and plugins directly in WordPress
22
Media Library Assistant
3.24
Enhances the Media Library; powerful [mla_gallery] [mla_tag_cloud] [mla_term_list], taxonomy support, IPTC/EXIF/XMP/PDF processing, bulk/quick edit.
23
Max Mega Menu - Pro Addon
2.4.2
Extends the free version of Max Mega Menu with additional functionality.
24
Max Mega Menu
3.4.1
An easy to use mega menu plugin. Written the WordPress way.
25
MetaSlider Pro
2.43.0
MetaSlider Pro unlocks the power of video slides, layer slides, post type slides as well as many other features.
26
MetaSlider
3.94.0
MetaSlider gives you the power to create a beautiful slideshow, carousel, or gallery on your WordPress site.
27
Multiple Roles
https://wordpress.org/plugins/multiple-roles/
1.3.7
Allow users to have multiple roles on one site.
28
Optimus
1.6.3
Smart compression and optimization of uploaded images in WordPress. Automatic, reliable, effective.
29
Page scroll to id
http://manos.malihu.gr/page-scroll-to-id
1.7.9
Page scroll to id is an easy-to-use jQuery plugin that enables animated (smooth) page scrolling to specific id within the document.
30
PHP Native Password Hash
-
3.0
Swaps out WordPress's password hashing mechanism with PHP 5.5's `password_hash()` functions set, and automatically rehashes the existing passwords on users next successful login. Provides safety against dictionary attacks, time-attacks, and brute-force attacks.
31
Posts Table Pro
https://barn2.com/wordpress-plugins/posts-table-pro/
3.2.1
Display any WordPress content in an instant data table with powerful search, sort and filter capabilities.
32
Relevanssi Premium
2.27.4.1
This premium plugin replaces WordPress search with a relevance-sorting search.
33
Shortcodes Ultimate: Extra Shortcodes
https://getshortcodes.com/docs/extra-shortcodes-user-guide/
1.8.5
Extra set of shortcodes for Shortcodes Ultimate
34
Shortcodes Ultimate: Additional Skins
https://getshortcodes.com/docs/additional-skins-user-guide/
1.6.3
Set of additional skins for Shortcodes Ultimate
35
Smart Custom Display Name
https://wordpress.org/plugins/smart-custom-display-name/
5.0.3
Set users "Display Name" to any custom value
36
Mobile Detect
https://www.tinywp.in/wp_is_mobile-exclude-ipad/
3.1.0
Excludes tablets, such as iPad, from being detected as mobile in wp_is_mobile!
37
UpdraftPlus - Backup/Restore
2.24.12.26
Backup and restore: take backups locally, or backup to Amazon S3, Dropbox, Google Drive, Rackspace, (S)FTP, WebDAV & email, on automatic schedules.
38
User Switching
https://wordpress.org/plugins/user-switching/
1.9.1
Instant switching between user accounts in WordPress
39
Wordfence Security
8.0.2
Wordfence Security - Anti-virus, Firewall and Malware Scan
40
Yoast SEO
24.1
The first true all-in-one SEO solution for WordPress, including on-page content analysis, XML sitemaps and much more.
41
WP Armour Extended - Honeypot Anti Spam
http://wordpress.org/plugins/honeypot/
1.35
Extra tools and feature for WP Armour
42
WP Links
5.30
Check & scan all links + open external links in a new tab or window, control "nofollow" and "noopener", set font icon; SEO friendly.
43
WP Rocket
3.17.4
The best WordPress performance plugin.
44
AME Toolbar Editor
1.5.1
Lets you edit the WordPress Toolbar (a.k.a. Admin Bar) - the horizontal menu at the top of your page that shows up when you're logged in. You can hide, move, rename and edit existing items, as well as create new menu items. Requires Admin Menu Editor Pro.
45
Prosodia VGW OS
https://wordpress.org/plugins/wp-vgwort/
3.25.3
Verdienen Sie mit Ihren Beiträgen/Texten Geld durch die Integration von Zählmarken der VG WORT.
46
wpDiscuz
7.6.27
#1 WordPress Comment Plugin. Innovative, modern and feature-rich comment system to supercharge your website comment section.
47
WPFront Scroll Top
http://wpfront.com/scroll-top-plugin/
2.2
Allows the visitor to easily scroll back to the top of the page.
4. Plugins für User Experience (UX) und Usability
Für eine bessere Experience(UX) und Usability muss gestattet werden, dass einige Plugins gegen PageSpeed gewinnen, da sonst die Website keinen Spaß bei der Nutzung (Joy of use) macht. Für diese wird eine bewusste Reduzierung in den Bewertungen hingenommen.
5. Prüfung der Anwendung und Beiträge
Nach jeder Korrektur sei es programmtechnisch als auch textlich, müssen Prüfungen durchlaufen werden, damit die Anwendung den erreichten Standard beibehält. Dies sind unter anderem die Google Lighthouse und PageSpeed Werte, als auch die SEO-Ergebnisse.
6. Fazit: Google PageSpeed (Lighthouse) 100% ganz entspannt
Das Ziel ist mit Strukturen und einigen Arbeitsaufwand grundsätzlich zu erreichen. Unbestritten ist viel Energie – auch einige Sackgassen – erforderlich, um den richtigen Weg dorthin zu finden. Das Ergebnis ist eine Website, die individuell, persönlich und mit eigenem Design aufwartet.
